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

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

Продвижение в Facebook и Twitter

Facebook предлагает разработчикам различные параметры настройки того, как будут выглядеть веб-страницы в новостной ленте пользователей социальной сети. Все сайты по умолчанию относятся к типу контента под названием “Веб-ресурс”, и именно его мы используем в примере.

Предположим, что кто-то поделился главной страницей сайта турфирмы. В ленте Facebook результат будет выглядеть следующим образом:

Twitter также предлагает несколько способов форматирования веб-страниц, но сегодня мы рассмотрим пример, схожий с приведенным выше примером для Facebook. Такой формат в Twitter называется «Summary Card with Large Image»:

В каждом примере имеется несколько атрибутов:

• Большая картинка и заголовок;
• Описание;
• Домен.

Мета-теги

Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта. При публикации ссылки на ресурс Facebook и Twitter извлекают связанную веб-страницу и считывают ее meta-теги, что позволяет отображать соответствующую информацию.

Facebook использует meta-теги, используя протокол Open Graph. Это система классификации веб-страниц, которая на данный момент охватывает meta-теги, определенные в HTML5. Полный список доступных тегов можно просмотреть на сайте Open Graph. Но в работе пригодится всего четыре тега:

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">

Как Facebook, так и Twitter дают рекомендации относительно использования упомянутых выше тегов. Учтите, что Facebook ссылается на публикуемую веб-страницу при помощи термина «объект» (object):

Совмещаем теги <meta>

Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа. Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что Twitter позволяет заменять мета-теги Open Graph на собственные. К тому же за исключением необходимости определить формат отображения нам не понадобятся уникальные мета-теги Twitter. В результате мы получаем следующий код, который стоит рассматривать как самый минимум с точки зрения тегов, необходимых для того, чтобы репост сайта выглядел достойно:

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">

Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничениеTwitter в 1Мб.

Валидация тегов <meta>

Если у вас возникли сомнения относительно комбинирования мета тега description для сайта c другими тегами, то всегда можно воспользоваться специальными инструментами Facebook Sharing Debugger иTwitter Card Validator. Оба средства умеют извлекать любые веб-страницы с публичных серверов, используя релевантные мета-теги, и демонстрировать вам, как они будут смотреться при распространении в социальных сетях. Кроме этого они выводят список ошибок и дают советы. Как мы поступим с нашим примером? С Twitter, кажется, проблем не возникло, а вот проверка Facebook выдала предупреждение:

И это дает нам отличную тему для разговора.

Аналитика социальных сетей

Этой ошибкой Facebook указывает, что, если вы собираетесь использовать их аналитический инструментDomain Insights, то нужно будет предоставить уникальный ID, привязанный к вашему аккаунту. Мета-тег должен выглядеть следующим образом:

<meta property="fb:app_id" content="your_app_id" />

У Twitter имеется нечто похожее - Twitter Card Analytics. Twitter рекомендует использовать следующий мета-тега, который должен содержать ваш логин в Twitter, привязанный к публикуемой веб-странице:

<meta name="twitter:site" content="@website-username">

Если вы не планируете пользоваться этими инструментами аналитики, то можно опустить эти мета теги для сайта, и это никак не скажется на отображении публикуемой веб-страницы в хронике Facebook или лентеTwitter.

Что мы упустили?

В документации Facebook есть еще одна рекомендация о дополнительном мета-теге. Он отвечает за название сайта:

<meta name="og:site_name" content="European Travel, Inc.">

Twitter рекомендует использовать другой мета-тег, но он также не обязателен:

<meta name="twitter:image:alt" content="Alt text for image">

Он позволяет указывать альтернативное описание картинки для людей с плохим зрением.

Что у нас получилось

И на этом, пожалуй, все. Стоит отметить, что в документации Facebook и Twitter есть множество другихмета тегов для HTML сайта, которые можно использовать для распространения контента другого типа. Но я считаю, что приведенного ниже кода будет вполне достаточно:

<!--  Essential META Tags -->

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">

<!--  Non-Essential, But Recommended -->

<meta name="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">

<!--  Non-Essential, But Required for Analytics -->

<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">

<meta name="twitter:site" content="@website-username">

Если вы не планируете пользоваться этими инструментами аналитики, то можно опустить эти мета теги для сайта, и это никак не скажется на отображении публикуемой веб-страницы в хронике Facebook или лентеTwitter.

Что мы упустили?

В документации Facebook есть еще одна рекомендация о дополнительном мета-теге. Он отвечает за название сайта:

<meta name="og:site_name" content="European Travel, Inc.">

Twitter рекомендует использовать другой мета-тег, но он также не обязателен:

<meta name="twitter:image:alt" content="Alt text for image">

Он позволяет указывать альтернативное описание картинки для людей с плохим зрением.

Что у нас получилось

И на этом, пожалуй, все. Стоит отметить, что в документации Facebook и Twitter есть множество другихмета тегов для HTML сайта, которые можно использовать для распространения контента другого типа. Но я считаю, что приведенного ниже кода будет вполне достаточно:

<!--  Essential META Tags -->

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">

<!--  Non-Essential, But Recommended -->

<meta name="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">

<!--  Non-Essential, But Required for Analytics -->

<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">

Перевод статьи “The Essential Meta Tags for Social Media”

Источник: http://www.internet-technologies.ru/articles/article_2909.html