Важные мета-теги для социальных сетей

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

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

Продвижение в 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):

Facebook Twitter
Title(Заголовок). Заголовок или название объекта. Продуманный заголовок для связанного содержимого(максимально 70 символов).
Description(Описание). Краткое описание или содержание объекта(2-4 предложения). Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц(длина до 200 символов).
Image(Картинка). URL изображения объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше(объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки Ссылка на картинку, прикрепленную к содержимому. Не следует использовать случайные изображения типа логотипа веб-сайта, фотографию автора или иные изображения, которые встречаются на иных ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес изображения не должен превышать 1 Мб.
URL Канонический URL страницы. Ссылка должна быть прямой, без дополнительных настроек, переменных, данных идентификации посетителей и т. д.

Совмещаем теги <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">

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *