Romych: /* Микроразметка */

2020-05-18T06:25:44Z

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

Нова сторінка

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

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

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

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

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

Главные правила (подробнее см. [https://developers.google.com/search/docs/guides/sd-policies?hl=ru Рекомендации Google]):

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

<div class="note">
Есть два варианта синтаксиса: JSON-LD (JavaScript) и Microdata (HTML).

Используем синтаксис JSON-LD потому, что он наиболее простой, наиболее компактный и его официально рекомендует Google ([https://codelabs.developers.google.com/codelabs/structured-data/index.html 1], [https://developers.google.com/search/docs/guides/sd-policies 2]).

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

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

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

* '''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 поля:

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

<source lang="json">
<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>
</source>

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

<source lang="json">
<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>
</source>

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

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

<source lang="json">
<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>
</source>

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

* [https://developers.google.com/search/docs/guides/intro-structured-data?hl=ru Принципы работы структурированных данных]
* [https://codelabs.developers.google.com/codelabs/structured-data/index.html?hl=ru Руководство по работе со структурированными данными]
* [https://developers.google.com/search/docs/guides/sd-policies?hl=ru Рекомендации по использованию структурированных данных]

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

* [https://developers.google.com/search/docs/data-types/breadcrumb Строка навигации] — хлебные крошки
* [https://developers.google.com/search/docs/data-types/local-business Данные о местной компании]
* [https://developers.google.com/search/docs/data-types/logo Логотип]
* [https://developers.google.com/search/docs/data-types/review-snippet Отзыв]
* [https://developers.google.com/search/docs/data-types/article Статья] — страница с новостной статьей или записью в блоге
* [https://developers.google.com/search/docs/data-types/faqpage Часто задаваемые вопросы]
* [https://developers.google.com/search/docs/data-types/qapage Вопросы и ответы]
* [https://developers.google.com/search/docs/data-types/how-to Инструкция]

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

* '''[https://www.google.com/webmasters/markup-helper/u/0/ Мастер разметки структурированных данных] Google''' — позволяет сделать разметку на основе реальной страницы в визуальном режиме. Заодно это способ проверить, какие данные реально есть на странице. Недостаток — отсутствует схема Organization.
* [https://www.google.com/webmasters/tools/data-highlighter Инструмент "Маркер" Google Search Console] — позволяет без вмешательства в исходный код сайта разметить данные микроразметки на страницах. См. описание: https://blog.promopult.ru/seo/kak-nastroit-mikrorazmetku-schema-org.html
* [https://hallanalysis.com/json-ld-generator/ JSON-LD Schema Generator For SEO] — hallanalysis.com
* [https://technicalseo.com/tools/schema-markup-generator/ Schema Markup Generator (JSON-LD)] — TechnicalSEO.com
* [https://webcode.tools/json-ld-generator The Ultimate JSON-LD Generator] — webcode.tools
* [https://microdatagenerator.org/localbusiness-microdata-generator/ Local Business Schema Generator] — microdatagenerator.org — только Local Business

=== См. также ===

* [https://inweb.ua/blog/micromarking/ 8 типов разметки для корпоративного сайта, инструкция по внедрению микроразметки для сайта услуг]
* [https://inweb.ua/blog/analiz-i-primery-razmetki-tablits-dataset-ot-google/ Dataset разметка таблиц для Google — пример реализации разметки Dataset для таблиц и файлов]

== 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

Основные:

<source lang="html5">
<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" /> 
<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="Название сайта" />
</source>

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

<source lang="html5">
<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" /> 
<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" /> 
<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" />
</source>

== Twitter Cards ==

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

=== Summary Card ===

Основной тип карточки — [https://dev.twitter.com/cards/types/summary Summary Card]:

<source lang="html5">
<meta name="twitter:card" content="summary" /> 
<meta name="twitter:site" content="@zinadesign" /> 
<meta name="twitter:title" content="Название страницы" /> 
<meta name="twitter:description" content="Описание страницы." /> 
<meta name="twitter:image" content="http://gwer.github.io/twi-cards/img/cat1.jpg" />
</source>

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

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

Если у вас есть достаточно большое изображение — минимум 280×150 пикселей, — то лучше поменять тип карточки на [https://dev.twitter.com/cards/types/summary-large-image Summary Card with Large Image], тогда изображение будет не квадратным, а панорамным:

<source lang="html5">
<meta name="twitter:card" content="summary_large_image" /> 
</source>

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

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

== Устарело ==

<div class="note">

'''Facebook'''

Разметка мета-тэгов в <code><nowiki><head></nowiki></code> на основе [https://developers.facebook.com/docs/reference/opengraph/object-type/business.business/ business.business Open Graph Object Type]:

<source lang="html5">
<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="Украина" />
</source>

'''Микроразмета 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 с полями <code>name</code>, <code>image</code>, и <code>description</code>:

<source lang="html5">
<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>
</source>

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

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

<source lang="html5">
<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" />
</source>

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

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

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

<source lang="html5">
<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" />
</source>
</div>

== См. также ==

* https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.xml
* [https://gist.github.com/SergSlon/9662413 Html META tags · GitHub]
* [https://pr-cy.ru/news/p/5333-kak-vnedrit-mikrorazmetku-informatsii-na-sayte-i-chto-eto-daet Примеры микроразметки]

[[Категория: SEO]]
[[Категория: Микроразметка]]

Микроразметка - Історія редагувань

Romych: /* Микроразметка */