Микроразметка

Обязательные мета-тэги

<title>Заголовок страницы, 60-80 знаков</title>
<meta name="description" content="Описание страницы. 150-160 знаков." />

title — длина — примерно 60-80 знаков, потому что желательно, чтобы текст поместился в 600 пикселей — такова максимальная ширина отображаемого текста title в Google (а на самом деле еще меньше, потому что Google обрезает title по границе слов, а не точно по буквам). Можно делать и длинее, в этом не будет ошибки и Google даже проиндексирует все слова (скорее всего), но выгоднее уместить главные ключевые слова в видимую область.

description — Google в первую очередь из него будет брать сниппет для поисковой выдачи, поэтому в description можно написать более завлекательный текст, чем есть на странице.

Микроразметка

Главные правила (подробнее см. Рекомендации Google):

Структурированные данные должны соответствовать основному контенту страницы.
Информация из структурированных данных должна быть в видимом пользователям тексте.
Словарь используем Schema.org.
Синтаксис (формат) используем JSON-LD.

Есть два варианта синтаксиса: JSON-LD (JavaScript) и Microdata (HTML).

Используем синтаксис JSON-LD потому, что он наиболее простой, наиболее компактный и его официально рекомендует Google (1, 2).

По сути, JSON-LD — это JavaScript в тэге <script>, который помещается в <head> или в <body>.

Тестирование микроразметки

Микроразметку проще всего писать на основе примеров ниже и затем тестировать двумя способами:

https://search.google.com/structured-data/testing-tool — Инструмент проверки структурированных данных — прямое тестирование написанного кода или страницы сайта
https://search.google.com/test/rich-results — Проверка расширенных результатов
https://www.google.com/webmasters/markup-helper/u/0/ — Мастер разметки структурированных данных Google — проверка соответствия содержимого страницы микроразметке

Пример: микроразметка логотипа

Инструкция Google: https://developers.google.com/search/docs/data-types/logo

Логотип — это часть свойства https://schema.org/Organization. Содержит всего 2 поля:

logo — URL логотипа организации, JPG, PNG и GIF, минимум 112×112 пикселей
url — URL сайта организации.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name" : "Студия «Зина дизайн»",
    "url" : "https://www.zina.design/",
    "logo": "https://www.zina.design/img/zina-design-logo-ru.png"
  }
</script>

Пример: микроразметка страницы контактов Organization

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "name" : "Студия «Зина дизайн»",
  "description": "Создание самых красивых сайтов в Днепре.",
  "logo": "https://www.zina.design/img/zina-design-logo-ru.png",
  "image" : "https://www.zina.design/img/vesna-1200x627.jpg",
  "url" : "https://www.zina.design/",
  "telephone" : [
    "+38 (050) 348-17-11",
    "+38 (056) 777-80-77"
  ],
  "email" : "info@zina.design",
  "address" : {
    "@type" : "PostalAddress",
    "streetAddress" : "ул. Староказацкая, 56 этаж 6, офис 5",
    "addressLocality" : "Днепр",
    "addressCountry" : "UA",
    "postalCode" : "49101",
    "postOfficeBoxNumber" : "5441"
  },
  "sameAs" : [
    "https://www.facebook.com/Zina.Design",
    "https://twitter.com/zinadesign"
  ]
}
</script>

Пример: микроразметка страницы контактов Local Business

То же, что и для Organisation, но добавлены карта и географические координаты (в схеме Organization их использовать нельзя).

<script type="application/ld+json">
{
  ...
  "@type" : "LocalBusiness",
  ...
  "hasMap": "https://maps.google.com/maps?cid=9653418838187618952",
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "48.4679559",
    "longitude": "35.0287369"
  }
}
</script>

Руководства Google по микроразметке

Примеры микроразметки:

Строка навигации — хлебные крошки
Данные о местной компании
Логотип
Отзыв
Статья — страница с новостной статьей или записью в блоге
Часто задаваемые вопросы
Вопросы и ответы
Инструкция

Генераторы микроразметки

Мастер разметки структурированных данных Google — позволяет сделать разметку на основе реальной страницы в визуальном режиме. Заодно это способ проверить, какие данные реально есть на странице. Недостаток — отсутствует схема Organization.
Инструмент "Маркер" Google Search Console — позволяет без вмешательства в исходный код сайта разметить данные микроразметки на страницах. См. описание: https://blog.promopult.ru/seo/kak-nastroit-mikrorazmetku-schema-org.html
JSON-LD Schema Generator For SEO — hallanalysis.com
Schema Markup Generator (JSON-LD) — TechnicalSEO.com
The Ultimate JSON-LD Generator — webcode.tools
Local Business Schema Generator — microdatagenerator.org — только Local Business

См. также

Open Graph

Формат микроразметки Open Graph разработан Facebook для передачи структурированных данных при публикации постов. Он используется в Telegram, WhatsApp, Viber, Slack, Twitter, LinkedIn, Pinterest.

Т.е. чтобы ссылка на сайт или страницу правильно отображалась при отправке ее через мессенджеры, нужно использовать на странице микроразметку Open Graph.

Документация: https://developers.facebook.com/docs/sharing/webmasters
Тестирование: https://developers.facebook.com/tools/debug

Основные:

<meta property="og:title" content="Заголовок страницы" /> <!-- Заголовок статьи без какого-либо упоминания бренда, например названия сайта. -->
<meta property="og:type" content="website" /> <!-- для главной страницы сайта -->
<meta property="og:type" content="article" /> <!-- для остальных страниц сайта -->
<meta property="og:url" content="http://www.example.com/section/page/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> <!-- Не менее 600 x 315 пикселей, однако рекомендуется использовать размер 1200 x 630 пикселей или более -->
<meta property="og:description" content="Описание страницы. 1-2 предложения." />
<meta property="og:locale" content="ru_RU" />
<meta property="og:locale:alternate" content="uk_UA" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:site_name" content="Название сайта" />

Опциональные:

<meta property="article:author" content="https://www.facebook.com/YourAuthorName" />
<meta property="article:publisher" content="https://www.facebook.com/YourPageName" />
<meta property="article:published_time" content="2017-02-14T12:37:14+03:00" /> <!-- формат даты-  ISO 8601 https://en.wikipedia.org/wiki/ISO_8601 -->
<meta property="article:modified_time" content="2017-02-14T12:37:14+03:00" /> 
<meta property="article:expiration_time" content="2017-02-14T12:37:14+03:00" /> 
<meta property="article:section" content="Article Section" /> <!-- раздел сайта, в котором находится страница. Например: Technology -->
<meta property="article:tag" content="" /><!-- список слов-тэгов, к которым относится страница -->
<meta property="og:see_also" content="http://www.example.com/page1" /> <!-- Другие похожие страницы -->
<meta property="og:see_also" content="http://www.example.com/page2" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:audio" content="http://www.example.com/bond/theme.mp3" />
<meta property="og:video" content="http://www.example.com/bond/trailer.swf" />

Twitter Cards

Документация: https://dev.twitter.com/cards/markup
Валидация: https://cards-dev.twitter.com/validator

Summary Card

Основной тип карточки — Summary Card:

<meta name="twitter:card" content="summary" />  <!-- Тип карточки -->
<meta name="twitter:site" content="@zinadesign" /> <!-- @username сайта -->
<meta name="twitter:title" content="Название страницы" /> <!-- До 70 символов -->
<meta name="twitter:description" content="Описание страницы." /> <!-- До 200 символов -->
<meta name="twitter:image" content="http://gwer.github.io/twi-cards/img/cat1.jpg" /><!-- Минимальный размер 120×120 пикселей, файл меньше 1 Мб. -->

twitter:card — обязательное поле. Меняется только если вы точно понимаете, что делаете — например, делаете галерею из нескольких изображений.

twitter:image — не обязательное, но очень рекомендуемое поле. Изображение будет обрезано до квадратной формы. Важно: это должно быть уникальное изображение, характерное только для этой страницы. Нельзя использовать логотип сайта, фото автора или другие изображения, относящиеся к нескольким страницам.

Если у вас есть достаточно большое изображение — минимум 280×150 пикселей, — то лучше поменять тип карточки на Summary Card with Large Image, тогда изображение будет не квадратным, а панорамным:

<meta name="twitter:card" content="summary_large_image" />  <!-- Тип карточки -->

Дополнительные (необязательные) поля:

<meta name="twitter:creator" content="@romych" /> <!-- @username автора контента страницы -->
<meta name="twitter:image:alt" content="Альт-текст к картинке, описывающий, что изображено. " />

Устарело

Facebook

Разметка мета-тэгов в <head> на основе business.business Open Graph Object Type:

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#">
  <meta property="og:type"                              content="business.business" />
  <meta property="og:title"                             content="Студия «Зина дизайн»" />
  <meta property="og:url"                               content="https://www.zina.design/" />
  <meta property="business:contact_data:website"        content="https://www.zina.design" />
  <meta property="business:contact_data:email"          content="info@zina.design" />
  <meta property="business:contact_data:phone_number"   content="+38 0567780777" />
  <meta property="business:contact_data:phone_number"   content="+38 0503481711" />
  <meta property="business:contact_data:street_address" content="ул. Староказацкая, д. 56" />
  <meta property="business:contact_data:locality"       content="Днепр" />
  <meta property="business:contact_data:postal_code"    content="49000" />
  <meta property="business:contact_data:country_name"   content="Украина" />

Микроразмета Google+

Документация:
- https://developers.google.com/+/web/snippet/
- https://developers.google.com/+/web/snippet/article-rendering
Тестирование: http://www.google.com/webmasters/tools/richsnippets

Google предлагает несколько форматов мета-тэгов для формирования нужного вам сниппета страницы.

Рекомендуемый формат — Schema.org с полями name, image, и description:

<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
  <img itemprop="image" src="{image-url}" />
  <p itemprop="description">Shiny trinkets are shiny.</p>
</body>

Этот вариант плох тем, что требует размещения всех элементов напрямую на странице.

Еще один способ Schema.org — вместо поля name используется headline:

<meta itemscope itemtype="http://schema.org/Article" />
<meta itemprop="headline" content="Top 10 Most Challenging Hikes in North America" />
<meta itemprop="description" content="Looking for a challenging hike? We spent the
past year spanning the continent for the most grueling trails. Check out the entire
ranked list, and learn about our methodology..." />
<meta itemprop="image" content="http://i.sportyfitness.com/media/tough-trail-lrg.jpg" />

Второй вариант — Open Graph с полями title, image, и description (он же используется для Facebook):

<meta property="og:title" content="Название страницы" />
<meta property="og:image" content="http://gwer.github.io/twi-cards/img/cat1.jpg" />
<meta property="og:description" content="Описание страницы." />

Еще один вариант Open Graph — вместо поля title используется headline:

<meta property="og:type" content="article" />
<meta itemprop="og:headline" content="Top 10 Most Challenging Hikes in North America" />
<meta itemprop="og:description" content="Looking for a challenging hike? We spent the
past year spanning the continent for the most grueling trails. Check out the entire
ranked list, and learn about our methodology..." />
<meta property="og:image" content="http://i.sportyfitness.com/media/tough-trail-lrg.jpg" />

См. также

Микроразметка

Зміст

Обязательные мета-тэги

Микроразметка

Тестирование микроразметки

Пример: микроразметка логотипа

Пример: микроразметка страницы контактов Organization

Пример: микроразметка страницы контактов Local Business

Руководства Google по микроразметке

Генераторы микроразметки

См. также

Open Graph

Twitter Cards

Summary Card

Устарело

См. также

Навігаційне меню

Микроразметка

Обязательные мета-тэги

Микроразметка

Тестирование микроразметки

Пример: микроразметка логотипа

Пример: микроразметка страницы контактов Organization

Пример: микроразметка страницы контактов Local Business

Руководства Google по микроразметке

Генераторы микроразметки

См. также

Open Graph

Twitter Cards

Summary Card

Устарело

См. также

Навігаційне меню

Пошук