Теги
При передаче ссылки - и 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" />