Главная Категории Контакты Поиск

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

Какие мета-теги для социальных сетей нужно использовать и как.

HTML ·17.09.2019·читать 6 мин 🤓·Автор: Alex Myzgin

Теги

При передаче ссылки - и Facebook, и Twitter берут указанную веб-страницу, и читают её теги <meta>, чтобы отобразить соответствующую информацию.

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

<meta property="og:title" content="Frontend Stuff" />
<meta property="og:type" content="Blog" />
<meta
  property="og:description"
  content="Frontend Stuff. Everything for front-end developers."
/>
<meta property="og:image" content="https://frontend-stuff.com/logo.jpg" />
<meta property="og:url" content="https://frontend-stuff.com/" />

У Twitter есть свои собственные теги <meta>, которые похожи на протокол Open Graph, но используют префикс twitter вместо og. Как и в случае с Facebook, требуется всего несколько. Тип формата отображения, также указывается:

<meta name="twitter:title" content="Frontend Stuff" />
<meta
  name="twitter:description"
  content="Frontend Stuff. Everything for front-end developers."
/>
<meta name="twitter:image" content="https://frontend-stuff.com/logo.jpg" />
<meta name="twitter:site" content="@StuffFrontend" />
<meta name="twitter:creator" content="@AlexMyzgin" />

<!-- минимальные свойства для Summary Card с большим изображением -->
<meta name="twitter:card" content="summary_large_image" />
<!-- минимальные свойства для Summary Card -->
<meta name="twitter:card" content="summary" />

Поскольку эти проприетарные теги <meta>, в конце концов, ссылаются на одни и те же элементы, было бы идеально, если был какой-то способ объединить их. К счастью, такой способ у нас есть.

Согласование тегов

Нет ничего плохого в том, что несколько тегов <meta> выглядят излишними. Слишком много информации никогда никому не навредит, кроме как добавлением нескольких не совсем нужных нам дополнительных байтов в HTML-файл.

Теги Twitter card выглядят аналогично тегам Open Graph и основаны на тех же соглашениях, что и протокол Open Graph. При использовании протокола Open Graph для описания данных на странице, легко создать Twitter card без дублирования тегов и данных. Когда процессор Twitter card ищет теги на странице, сначала он проверяет свойство, специфичное для Twitter, и, если его нет, возвращается к поддерживаемому свойству Open Graph. Это позволяет независимо определить оба элемента на странице и свести к минимуму количество дублирующих разметок, необходимых для описания содержимого.

Но, для наших целей и ради краткости мы можем использовать тот факт, что Twitter позволяет нам заменять теги Open Graph <meta> своими собственными. В конце концов, за исключением необходимости указания формата отображения, ни один из пользовательских тегов <meta> в Twitter не требуется. Это даёт нам возможность использовать минимум тегов <meta>, необходимых для того, чтобы сделать веб-страницу доступной для публикации в социальных сетях:

<meta property="og:title" content="Frontend Stuff" />
<meta
  property="og:description"
  content="Frontend Stuff. Everything for front-end developers."
/>
<meta property="og:image" content="https://frontend-stuff.com/logo.jpg" />
<meta property="og:url" content="https://frontend-stuff.com/" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@StuffFrontend" />
<meta name="twitter:creator" content="@AlexMyzgin" />

Проверка тегов

Если есть какие-либо сомнения относительно законности анализа этих тегов, можно использовать полезный отладчик общего доступа Facebook и средство проверки Twitter card. Оба эти инструмента очистят любую веб-страницу, размещенную на общедоступном сервере для поиска соответствующих тегов <meta> и покажут, как она будет выглядеть при публикации. Также он перечислит любые ошибки и варианты их решения.

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

Если собираемся использовать аналитику Facebook - Facebook Analytics, мы должны предоставить уникальный идентификационный номер, связанный с учетной записью. Тег <meta> будет выглядеть примерно так:

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

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

<meta name="twitter:site" content="@StuffFrontend" />

Однако, если у нас нет особого интереса к использованию этих аналитических инструментов, то, пропуск двух вышеуказанных тегов <meta> не повлияет на отображение общей веб-страницы на временной шкале Facebook или в фиде Twitter.

Ещё теги

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

<meta property="og:site_name" content="Frontend Stuff" />

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

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

Этот тег обеспечивает альтернативное описание изображения для тех, у кого нарушено зрение.

Финальная разметка

Повторим ещё раз: когда просматриваем документацию из Facebook и Twitter для публикации веб-страниц, есть много других доступных тегов <meta>, которые можно использовать для указания различных типов контента. Но, в целом, достаточно этих:

<meta property="og:title" content="Frontend Stuff" />
<meta
  property="og:description"
  content="Frontend Stuff. Everything for front-end developers."
/>
<meta property="og:image" content="https://frontend-stuff.com/logo.jpg" />
<meta property="og:url" content="https://frontend-stuff.com/" />

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

<!--  Не обязательно, но рекомендуется -->

<meta property="og:site_name" content="Frontend Stuff" />
<meta name="twitter:image:alt" content="Alt text for image" />

<!--  Не обязательно, но требуется для аналитики -->

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

Источники

  1. Facebook Analytics
  2. Optimize Tweets with Cards
  3. Twitter Card Validator

Website, name & logo
Copyright © 2019. Alex Myzgin