Існує міф, що опис - найбільш некерована частина сніпета. Капризний Google ігнорує мета-тег description (хоча він є), і автоматично вибирає відрізок тексту, не найбільш підходящий, або гірше того - технічну інформацію.
Що таке сніпет?
Сніпет (snippet) - це інформація про сайт, яка відображається в пошуковій видачі, включаючи назву сайту (1), URL (2), заголовок (3), значок сайту (4), опис (5), дату публікації (6), а також зображення та інші додаткові дані залежно від вмісту сторінки сайту.
Що таке опис у сніпеті?
Короткий опис, буквально в пару рядків, сторінки-джерела сніпету. Є доповненням до заголовка, що дозволяє краще розкрити зміст сторінки.
Метою опису, так само як і всього сніпета взагалі, є перехід користувача від сторінки результатів пошукового запиту на конкретну веб-сторінку. Це означає, що опис в сніпеті повинен якомога краще розкривати тему, точно та коротко передавати вміст сторінки сайту, щоб відвідувачі могли швидко отримати уявлення про сторінку та перейти на неї.
Критерії якісного опису в сніпеті:
Опис складає Google, і ви не можете просто вписати його в пошукову видачу. Але на своєму сайті ви можете сформувати метаопис (метатег description), який враховує Google. При успішному складанні, висока ймовірність того, що саме description буде виводитись в сніпеті як опис.
Релевантність (Відповідність). Опис, як і заголовок, повинні відповідати темі сторінки. Сніппет формує певні очікування відвідувача щодо розділу сайту за посиланням. Опис повинен бути складений таким чином, щоб очікування виправдались.
Стислість. Опис не може займати більше двох рядків в пошуковій видачі Google. Це приблизно до 150-160 символів. Опис може бути ще коротшим на мобільному пристрої, де його довжина обмежується трьома рядками - до 130-140 символів. Якщо присутня дата (створення або публікації матеріалу), ліміт опису скоротиться ще більше. Якщо ліміт перевищено, опис буде автоматично обрізаний (ось так...). Тому ви повинні враховувати ліміт та розміщувати найважливіше на початку метаопису.
Змістовність. Короткий текст, який містить увесь зміст у 130-150 символах. Опис має розкривати суть сторінки, доповнюючи заголовок, без зайвих слів.
Не бути переліком тегів. Опис має бути стислим, але при цьому не повинен бути просто переліком ключових слів або фраз. Ключові слова, що стосуються тематики сайту чи сторінки, є позитивним фактором, оскільки допомагають сформувати правильне уявлення про сторінку у відвідувачів. Тому опис може містити ключові слова, але при цьому повинен бути в формі нормальних речень.
Метаопис складається передусім для людей, а не для пошукових роботів, тому має бути зрозумілим, точним та привабливим для відвідувача.
Кожна сторінка сайту повинна мати своє метаописання.
Виберіть запит, який вас цікавить, та перевірте сніпети на перших позиціях у видачі Google - ймовірно серед них знайдуться вдалі приклади описів.
Як Google створює описи у сніпетах
Google дійсно створює опис автоматично, враховуючи інформацію на сторінці та мета-тег description. Автоматичне створення описів не є капризом або помилкою системи. Google формує опис під певний запит, підбираючи згідно своїх алгоритмів, найбільш релевантну інформацію. Тобто опис однієї і тієї ж сторінки в пошуку, за різними запитами може бути різним.
У теорії, автоматичне створення сніпетів - відмінне рішення. Але на практиці не кожен раз все працює так, як би хотілося.
Інструменти управління описами у сніпетах Google
Не забувайте, що найочевиднішим способом управління описом сторінки є редагування контенту. Окрім простого редагування тексту, ви можете управляти пошуковим роботом Google:
- вказуючи, який текст ви хочете бачити як опис (метатег description та властивість description у мікроданих);
- обмежуючи або забороняючи формувати сніпет на основі тих чи інших елементів (метатег nosnippet, метатег max-snippet, атрибут data-nosnippet).
Метатег description - короткий опис вмісту сторінки, який задається на боці сайту. Цей опис використовується пошуковими системами як один із факторів для визначення того, яким чином сторінка має відображатися у результатах пошуку.
Метаопис розміщується в head сторінки. Приклад description:
<head>
<meta name="description" content="Що таке метатег description? Чим відрізняється від опису в сніпеті?">
</head>
Визначаючи текст в налаштуваннях сайту як опис, ви тим самим кажете пошуковому роботу "Агов, Google, я хочу, щоб цей текст був у пошуковій видачі, відразу під заголовком". І Google це розуміє та враховує. Але немає жодних гарантій, що опис під заголовком буде взято з метатегу description. Як уже писали вище, Google формує опис у сніпеті залежно від введеного пошукового запиту.
Крім матаопису є ще один спосіб вказати Google, який текст ви вважаєте найбільш підходящим для опису в сніпеті. Мова йде про мікророзмітку, або структуровані дані.
2. Description у структурованих даних - короткий опис окремого елемента, такого як товар, організація або стаття.
Відносно синтаксису існує 3 види мікророзмітки: Microdata, RDFa та JSON-LD. Ви можете вибрати один з форматів для використання на своєму сайті. Найчастіше використовують JSON-LD та Microdata. Зустрічаються сайти, де застосовані одразу два типи мікророзмітки. Втім, валідатори не фіксують одразу два типи як помилку. Перераховані типи мікророзмітки, або структурованих даних допомагають Google та іншим пошуковим системам зчитувати інформацію про сторінки вашого сайту та відображати її в пошуковій видачі.
Також існують мікророзмітки розроблені Facebook (OpenGrpaph) та Twitter. Мікророзмітки OpenGrpaph і Twitter застосовуються паралельно до мікророзміток типу JSON-LD або Microdata, і служать для корректного показу соціальними медіа інформації про сторінку сайту при розміщенні на цих платформах посилання на сайт. За допомогою мікророзміток соцмедіа, ви можете контролювати та покращувати вигляд вашого контенту у Facebook та Twitter.
Google виділяє JSON-LD як переважний формат, який зручніший для налаштування окремих елементів. Однак не всі пошукові системи добре злагоджені в роботі з js-мікророзміткою, тому в окремих випадках оптимальним форматом може стати Microdata, який також чудово сприймається роботами Google.
Joomla 4 має вбудовані в макети статті та інших типів сторінок елементи структурованих даних у форматі Microdata. Також існують розширення для додавання мікророзмітки у форматі JSON-LD.
На відміну від метаопису, властивість description у структурованих даних не завжди відноситься до всієї сторінки. Структуровані дані відносяться до окремих елементів, яких може бути кілька на сторінці. Наприклад, на сторінці може бути декілька товарів, в такому випадку опис у кожного товару буде своїм, як і властивість description.
Однак, наприклад, в разі з таким елементом як "стаття" (Article), метаопис та властивість description структурованих даних повинні мати однаковий зміст. Було б дивно заповнювати метатег description та властивість мікроданих description різними даними в рамках однієї сторінки зі статтею.
Для такого елемента сторінки як "хлібні крихти" (BreadcrumbList), властивості description не застосовні.
Повний перелік типів струкрутованих даних можна знайти тут: https://schema.org/docs/full.html. Найбільш популярна схема мікроданих у веб-розробці Schema.org містить сотні типів структурованих даних та їх властивостей.
Перевірити сторінку сайту на наявність та помилки структурованих даних, можна у валідаторі від Google: https://search.google.com/test/rich-results
Валідатор Schema.org: https://validator.schema.org/
Мікродані для статті (елемент типу Article) включно з властивістю description формату JSON-LD можуть виглядати так:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Назва статті",
"description": "Стислий та змістовний опис статті",
"author": {
"@type": "Person",
"name": "Ім'я автора"
},
"datePublished": "2023-04-14",
"dateModified": "2023-04-14",
"publisher": {
"@type": "Organization",
"name": "Назва організації",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png",
"width": 600,
"height": 60
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://example.com/article"
}
}
</script>
Скрипт мікроданих додається всередині тегів head або body на сторінці сайту, залишаючись невидимим для відвідувачів.
Приклад мікроданих статті формату Microdata:
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">Заголовок статті</h1>
<p itemprop="description">Короткий і змістовний опис статті</p>
<div itemprop="articleBody">
<p>Текст статті...</p>
</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Ім'я автора</span>
</div>
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Назва організації</span>
<div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
<img src="/logo.png" itemprop="url" alt="Логотип">
</div>
</div>
<meta itemprop="datePublished" content="2023-04-14">
<meta itemprop="dateModified" content="2023-04-14">
</article>
3. Метатег nosnippet – заборона автоматичного створення опису сторінок.
Щоб застосувати цей тег до сторінок сайту, необхідно додати наступний код у секцію <head> (всього сайту або окремої сторінки):
<meta name="robots" content="nosnippet">
4. Метатег max-snippet:[number] - обмеження опису максимальної кількості символів.
Максимальна кількість – не більше 90 символів, виглядає так:
<meta name="robots" content="max-snippet:90">
Значення "-1", замість "90" буде означати, що обмежень не задано.
5. HTML-атрибут data-nosnippet - заборона використання тексту всередині тега, як основу формування опису сніпета.
Наприклад, необхідно заборонити текст, що знаходиться в тегах div:
<div data-nosnippet>Чим більш точним та інформативним є опис, тим більша ймовірність, що відвідувач перейде за посиланням на ваш сайт.</div>
Позначений текст не буде брати участь у автоформуванні опису. Код не повинен містити помилок, інакше атрибут data-nosnippet не спрацює.
Працює тільки з тегами: div, span і section. Якщо ваш вміст знаходиться в інших тегах, замініть їх на один з трьох типів (div, span, section), або додайте зазначені теги (всередині або ззовні тегів іншого типу), щоб необхідна інформація опинилась всередині них. Наприклад, є нумерований список, який не підходить для опису в пошуковій видачі:
<div data-nosnippet>
<!-- Весь текст нижче, що міститься в тегах <div>...</div> буде заборонено для опису в Google, включаючи абзац (p) та нумерований список (ol)-->
<p>Розширені сніпети — візуальні елементи в результатах видачі Google, які надають додаткову інформацію про сторінку. До елементів розширених сніпетів можна віднести:</p>
<ol>
<li>1. Відгуки про продукт.</li>
<li>2. Рейтинг (на основі відгуків користувачів).</li>
<li>3. Ціни.</li>
<li>4. Розклад.
<li>5. Карта.</li>
</ol>
</div>
За допомогою атрибута data-nosnippet можна виключати не тільки фрагменти безпосередньо з статті, а й фрагменти в макетах сайту, які виводять технічну інформацію, що потрапила якимось чином в опис у сніпеті.
Як ми переконалися, управління описами в сніпеті все-таки можливе - через редагування метаопису, структурованих даних, а також безпосередньо тексту сторінки. Ці три інструменти: nosnippet, max-snippet:[number] та data-nosnippet є косвеною, але відмінною можливістю управляти описами в Google через виключення.