Социальные сети

Вы можете повлиять на то, как ваш сайт будет выглядеть в социальных сетях, добавив несколько строк кода на каждую страницу. Это может привлечь на ваш сайт больше посетителей, поскольку в предварительном просмотре будет больше информации, чем обычно.

Eiji Kitamura

Вы можете повлиять на то, как ваш сайт будет выглядеть в социальных сетях, добавив несколько строк кода на каждую страницу. Это может привлечь больше посетителей на ваш сайт, поскольку в результатах поиска будет показываться больше информации о нем.

Сводка

  • Используйте микроданные schema.org, чтобы указать заголовок страницы, описание и изображение для Google+.
  • Используйте протокол Open Graph (OGP), чтобы указать заголовок страницы, описание и изображение для Facebook.
  • Используйте Twitter Cards, чтобы указать заголовок страницы, описание, изображение и идентификатор Twitter.

Вы можете повлиять на то, как ваш сайт будет выглядеть в социальных сетях, добавив несколько строк кода на каждую страницу. Это может повысить вовлеченность пользователей, поскольку они будут видеть в предварительном просмотре больше информации, чем обычно. Без нее социальные сети будут предоставлять только базовую информацию, без изображений и других полезных сведений.

Как вы думаете, на какое из них пользователи будут нажимать чаще? Изображения привлекают внимание пользователей и помогают им понять, что они найдут на сайте.

При наличии подходящей разметки в сниппет включаются правильный заголовок, краткое описание и изображение. Это поможет повысить вовлеченность.
Разметка выполнена правильно: указаны название, краткое описание и изображение. Это поможет повысить вовлеченность.
Если разметка отсутствует, то в результатах поиска будет показан только заголовок страницы.
Без правильной разметки будет включен только заголовок страницы.

Когда кто-то хочет поделиться вашим сайтом с друзьями в социальной сети, он, скорее всего, добавит несколько слов о том, какой он замечательный, и опубликует ссылку. Однако описание сайта может быть громоздким и не отражать точку зрения владельца страницы. Некоторые сервисы ограничивают количество символов, которые пользователи могут вводить в заметке.

Добавив на страницы подходящие метаданные, вы можете упростить процесс публикации для пользователей, предоставив им заголовок, описание и привлекательное изображение. Это значит, что им не нужно тратить время и символы на описание ссылки.

Использование schema.org и микроданных для создания расширенных описаний в Google+

Поисковые роботы используют множество методов для анализа страницы и понимания ее содержания. Используя микроданные и словарь schema.org, вы помогаете социальным сетям и поисковым системам лучше понимать содержание страницы.

Пример:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

В то время как большинство метаданных встраивается в раздел head веб-страницы, микроданные размещаются там, где существует контекст.

Добавьте itemscope, чтобы определить область действия микроданных

Добавив itemscope, вы можете указать, что тег является блоком контента об определенном объекте.

Добавьте itemtype, чтобы указать тип сайта

Вы можете указать тип товара, используя атрибут itemtype вместе с itemscope. Значение itemtype можно определить по типу контента на веб-странице. Вы можете найти подходящую форму на этой странице.

Добавьте свойство itemprop, чтобы описать каждый элемент с помощью словаря schema.org.

itemprop определяет свойства для itemtype в области видимости. Для передачи метаданных в социальные сети обычно используются следующие значения itemprop: name, description и image.

Проверка расширенных описаний веб-страниц

Чтобы проверить расширенные описания в Google+, можно использовать следующие инструменты:

Инструмент проверки структурированных данных

Используйте протокол Open Graph (OGP), чтобы создавать расширенные описания для Facebook.

Протокол Open Graph предоставляет Facebook метаданные, необходимые для того, чтобы веб-страницы имели те же функции, что и другие объекты Facebook.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Если добавить эти метаданные в раздел head, то при публикации страницы в социальных сетях будет показываться расширенное описание.

Используйте теги с пространством имен og:meta для описания метаданных

Тег meta состоит из атрибутов property и content. Свойства и содержимое могут принимать следующие значения:

Свойство Контент
og:title Заголовок веб-страницы.
og:description Описание веб-страницы.
og:url Канонический URL веб-страницы.
og:image URL изображения, прикрепленного к записи.
og:type Строка, указывающая тип веб-страницы. Вы можете найти подходящий вариант для своей веб-страницы здесь.

Эти метатеги предоставляют семантическую информацию поисковым роботам социальных сетей, например Facebook.

Подробнее…

Чтобы узнать больше о том, что можно прикрепить к записи в Facebook, посетите официальный сайт Open Graph Protocol.

Проверка расширенных описаний веб-страниц

Чтобы проверить разметку на Facebook, можно использовать следующие инструменты:

Используйте Twitter Cards, чтобы показывать расширенные описания в Твиттере

Twitter Cards – это расширение протокола Open Graph, предназначенное для Twitter. Они позволяют добавлять к твитам медиафайлы, например изображения и видео, со ссылкой на вашу веб-страницу. Если вы добавите нужные метаданные, то в твитах со ссылками на вашу страницу будет появляться карточка с подробной информацией.

Используйте метатеги с пространством имен twitter: для описания метаданных

Чтобы Twitter Card работала, ваш домен должен быть одобрен и содержать метатег, в котором в качестве атрибута name указано twitter:card, а не property.

Пример:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Если вы укажете идентификатор Twitter в качестве значения метатега twitter:site, то Twitter будет добавлять эту информацию в опубликованные записи, чтобы пользователи могли легко связаться с владельцем страницы.

Карточка Twitter.

Подробнее…

Дополнительную информацию о карточках Twitter можно найти на следующих страницах:

Проверка расширенных описаний веб-страниц

Для проверки разметки Twitter предоставляет:

Рекомендация

Лучше всего добавить на веб-страницу все три варианта. Пример:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Обратите внимание, что в микроданных и OGP используется одинаковая разметка:

  • itemscope находится в теге head
  • title и description используются и в микроданных, и в OGP.
  • В itemprop="image" используется тег link с атрибутом href вместо повторного использования тега meta с атрибутом property="og:image".

Наконец, перед публикацией убедитесь, что ваша веб-страница отображается на каждом сайте социальной сети так, как ожидалось.