Про цей інструмент
Мета-теги в HTML <head> контролюють, як пошукові системи та соціальні платформи відображають попередній перегляд сторінки. Найважливіші теги включають <title>, <meta name="description">, теги Open Graph (og:title, og:description, og:image) і теги Twitter Card (twitter:title, twitter:description, twitter:image). Якщо ці теги відсутні, неправильно сформовані або неправильні, пошукові фрагменти та попередні перегляди в соціальних мережах виглядають несправними або містять неналежний вміст.
Цей засіб перевірки отримує URL-адресу та перевіряє всі відповідні мета-теги. Відсутні теги позначаються. Теги з вмістом, що перевищує обмеження довжини певної платформи (скорочення фрагментів Google, великі символи Twitter), виділені. Посилання на зображення перевірено — якщо og:image вказує на 404, попередній перегляд у соціальних мережах буде порушено.
Усе це важливо, оскільки більшість кліків на ваш сайт надходять із результатів пошуку та публікацій у соціальних мережах. Мета-теги є маркетинговою копією, яка вирішує, чи відбудеться клацання. Зробити їх правильно – одне з найважчих завдань для оптимізації пошукових систем і соціальних мереж.
Навіщо перевіряти метатеги
Помилки метатегів мовчать. Сторінка без og:image завантажується правильно; ніщо на сторінці не говорить про те, що публікації в соціальних мережах виглядають несправними. Помилка помітна лише тоді, коли хтось ділиться сторінкою, до цього моменту втрачене перше враження вже втрачено. Регулярна перевірка сторінок своєчасно виявляє ці проблеми.
Після серйозних змін на сайті — редизайну, міграції CMS, оновлення шаблону — мета-теги часто регресують. Перевірка якості на важливих сторінках підтверджує, що нічого критичного не було втрачено під час зміни.
Технічні деталі
Необхідні мета-теги для SEO: <title> (50-60 символів; Google скорочує більше цього у пошукових фрагментах), <meta name="description"> (150-160 символів; довший текст скорочується). Відсутність того чи іншого значно погіршує вигляд пошуку.
Теги Open Graph (використовуються Facebook, LinkedIn, Slack і багатьма іншими): og:title, og:description, og:image, og:url, og:type. og:image має бути принаймні 1200 × 630 пікселів для візуалізації з високою роздільною здатністю. og:image:alt — це мітка доступності.
Теги картки Twitter: twitter:card (зазвичай summary_large_image), twitter:title, twitter:description, twitter:image. Twitter повертається до тегів OG, якщо відсутні специфічні для Twitter теги, тому часто достатньо добре налаштованого OG.
Поширені запитання
- Які мета-теги найважливіші для SEO?
- Тег заголовка (найважливіший — 50-60 символів), метаопис (150-160 символів), канонічний URL, мета роботи, Open Graph (og:title, og:description, og:image) і вікно перегляду для мобільних пристроїв. Вони безпосередньо впливають на пошуковий рейтинг і рейтинг кліків.
- Якої довжини має бути мій тег заголовка?
- 50-60 символів (або ~580 пікселів) для повного відображення в результатах пошуку Google. Довші заголовки скорочуються за допомогою "...". Перше завантаження важливих ключових слів з самого початку є найпомітнішим і має більшу вагу для SEO.
- Чи потрібні мені теги Open Graph?
- Так, якщо ваші сторінки поширюються в соціальних мережах. Без og:image і og:title Facebook/LinkedIn автоматично створюватиме попередні перегляди, які можуть виглядати погано. Відповідні теги OG гарантують, що ваш вміст виглядає чудово, коли ви його ділитеся.
- Для чого призначений канонічний тег?
- Канонічний тег (rel="canonical") повідомляє пошуковим системам, яка URL-адреса є "офіційною" версією сторінки. Це запобігає проблемам дублювання вмісту, коли одна й та сама сторінка доступна за кількома URL-адресами (з/без www, HTTP/HTTPS, із параметрами запиту).
- Чому мій спільний доступ у Facebook відображає неправильне зображення?
- Найчастіше Facebook використовує кешовану версію. Використовуйте Facebook Sharing Debugger, щоб очистити кеш і повторно отримати свою сторінку.
- Чи чутливі метатеги до регістру?
- Назви властивостей пишуться з малої літери. Більшість синтаксичних аналізаторів толерантні, але для безпеки дотримуйтеся нижнього регістру.
- Моя URL-адреса отримана з браузера чи сервера?
- Залежить від інструменту. Отримання веб-переглядача може спричинити проблеми з CORS; деякі інструменти використовують проксі-сервер для отримання та звітування.
- А як щодо структурованих даних JSON-LD?
- JSON-LD — це структуровані дані для розширених результатів, відокремлені від метатегів. Більшість засобів перевірки мета-тегів зосереджуються на мета-заголовку HTML; валідатори структурованих даних є окремим класом інструментів.