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

Теги

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

Предыдущий

Следующий

html. Делает ли метатег для «og:title» избыточным метатег для «title»?

спросил
11 лет, 9 месяцев назад

Изменено
8 лет, 7 месяцев назад

Просмотрено
13 тысяч раз

На моем сайте есть два метатега, которые в настоящее время имеют одинаковое значение:

Второй формат необходим для подключения facebook .

Означает ли это, что первый лишний и его можно удалить?

• html
• facebook
• seo
• метатеги

Лучше иметь оба тега. Тег сообщает поисковым системам о вашей странице для индексации, а также отображается как заголовок в поисковой выдаче.
Тег og:title помогает Facebook индексировать контент, чтобы на вашей странице могли отображаться результаты поиска в Facebook, а также для определенного контента, когда этот конкретный URL-адрес на вашем веб-сайте публикуется. Также помогает добавить атрибут og:image, который является изображением предварительного просмотра в стандартных публикациях/рассылках Facebook.

Также нет

 
 Это
 
 
 Нет. Метатег Facebook не является стандартным, и вы не должны ожидать, что кто-то еще, кроме Facebook, будет использовать значение этого тега для чего-либо.
 1
 Первый — это стандартный тег заголовка, который обычно совпадает с заголовком страницы. Он используется (или, по крайней мере, использовался) поисковыми системами. Видеть это.
 Мне не удалось найти официальную ссылку, описывающую первый тег:   . На практике это кажется бесполезным, и если оно когда-либо было полезным, я подозреваю, что это был просто ленивый синтаксический анализатор в веб-сканере.
 Второй тег используется. Стандарт OpenGraph используется для обмена многими сайтами, кроме Facebook. Хотя это и не поможет ранжированию напрямую, но может помочь косвенно за счет более привлекательных и лучше отформатированных акций.
 Я бы предложил использовать больше тегов OpenGraph, чем просто  og:title  . Другие, в том числе  og:image , помогут лучше делиться.
 Поскольку ваш второй метатег также включает атрибут имени, любой совместимый синтаксический анализатор должен подобрать его для заголовка. Поэтому ваш первый метатег лишний.
 Однако я не знаю ни одной системы, использующей метатег title.
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Что такое теги Open Graph и почему это важно 
  Узнайте, как использовать Open Graph, чтобы сделать ваш контент более интерактивным, доступным и привлекательным в социальных сетях. 
  Содержание 
 Что такое Open Graph?
 Типы тегов Open Graph
 Карты Twitter: метатеги Open Graph для Twitter
 Почему протокол Open Graph важен для вашего веб-сайта
 Как добавить теги Open Graph на ваш веб-сайт
 Как протестировать и отладить теги Open Graph
 Open Graph и разметка схемы: в чем разница?
 Резюме
 Обмен контентом в социальных сетях является неотъемлемой частью маркетинговой стратегии. Но знаете ли вы, как оптимизировать общий контент, чтобы раскрыть его потенциал?
 Теги Open Graph — это решение. Но что это такое, почему они важны и как их использовать?
 Это руководство отвечает на эти вопросы и поможет вам улучшить маркетинг в социальных сетях.
 Что такое Open Graph? 
 Протокол Open Graph определяет, какой контент отображается при публикации ссылок в социальных сетях. Любая веб-страница, использующая теги Open Graph, становится богатым объектом в социальном графе.
 Например, протокол Open Graph позволяет вам контролировать, какое изображение, заголовок и описание будут отображаться при обмене ссылками в социальных сетях.
 Без Open Graph платформы социальных сетей могут выбирать случайное изображение, заголовок и описание.
 Платформы социальных сетей, такие как Facebook, Twitter и LinkedIn, распознают теги Open Graph. Однако Twitter также использует метатеги, называемые Twitter Cards. Но будет использовать Open Graph, когда нет тегов Twitter Card.
 Вот как выглядит этот пост, если его опубликовать на Facebook с тегами Open Graph:
 Facebook Rich Object с использованием тегов Open Graph
 Open Graph — общепринятый протокол. Обычно это работает с любым веб-сайтом. По этой причине это жизненно важный инструмент для использования!
 Типы тегов Open Graph 
 Теги Open Graph можно использовать для управления отображением контента при публикации в Facebook, Twitter, LinkedIn, Slack и WhatsApp.
 Эти теги Open Graph можно найти в разделе веб-страницы. Они являются мета-свойством «og:» в HTML.
 Посетите веб-сайт протокола Open Graph, чтобы увидеть все типы тегов Open Graph.
 Существует множество тегов Open Graph. Основные теги Open Graph включают:
 og:type   
 Метатег типа объекта определяет тип контента. Например, типы объектов, которые вы можете использовать, включают веб-сайт, статью, музыку, видео и многое другое. Тип объекта, который вы используете, изменит способ отображения содержимого.
 См. полный список типов объектов на веб-сайте протокола Open Graph.
  Пример HTML  :
  Рекомендации  : Для некоторых типов объектов требуется дополнительное свойство. Например, используйте «music.song» для определения отдельной песни или «music:album» для определения альбома. Если вы не укажете тип, по умолчанию используется «веб-сайт».
 og:url   
 Метатег URL определяет URL-адрес страницы. Это постоянный идентификатор контента. Изменение URL-адреса приведет к разрыву ссылки, опубликованной в социальных сетях.
  Пример HTML  :
  Рекомендации  : URL-адреса должны быть простыми, краткими и использовать канонический URL-адрес . Канонический URL-адрес объединяет метрики и метаданные для всех сообщений, опубликованных с одним и тем же URL-адресом.
 og:title   
 Метатег title определяет заголовок веб-страницы. Например, заголовок вашего сообщения в блоге.
  Пример HTML  :
  Передовой опыт  : Убедитесь, что ваш заголовок привлекает клики, лаконичен, привлекателен и не содержит длиннее 60 символов. Эта длина оптимальна, чтобы избежать усечения.
 og:описание   
 Метатег description кратко описывает ваш контент. Например, точно опишите страницу 1-2 предложениями.
  Пример HTML  :
  Передовой опыт  : Убедитесь, что ваше описание убедительно привлекает клики, лаконично и содержит не более 200 символов. Эта длина оптимальна, чтобы избежать усечения.
 og:image   
 Метатег изображения определяет изображение, которое вы хотите отобразить. Этот тег Open Graph является наиболее важным. Это помогает вашему контенту выделяться, привлекать клики и поощрять взаимодействие.
  Пример HTML  :
  Рекомендации  : Разрешение изображения, размер файла и тип имеют значение. Например, 1200 x 628 пикселей — оптимальный размер изображения для публикации в социальных сетях. Минимальный размер 200 х 200 пикселей. Допустимыми типами изображений являются форматы JPEG, GIF или PNG. Также убедитесь, что размер файла изображения не превышает 5 МБ.
 og:site_name   
 Метатег имени сайта определяет название вашего веб-сайта. Название сайта отображается под заголовком страницы.
  Пример HTML  :
  Передовой опыт  : Имя сайта не является важным свойством, но не помешает включить его. Он показывает, что ваш контент является частью более крупного веб-сайта или поддомена.
 og:video  
 Метатег видео предоставляет URL видео в вашем контенте. Например, это свойство будет отображать видео YouTube на платформах социальных сетей.
  Пример HTML  :
  Рекомендации  : Используйте дополнительные теги для оптимизации внешнего вида ваших видео. Например, «og:video:width» и «og:video:height». Эти теги определяют ширину и высоту видео в пикселях.
 og:locale 
 Метатег locale определяет язык содержимого. По умолчанию en_US.
  Пример HTML  :
  Передовой опыт  : Используйте этот тег, если ваш контент написан не на американском английском (en_US). Например, используйте этот тег, если у вас многоязычный веб-сайт.
  SIDENOTE  : Теги Open Graph также создают фрагмент при обмене ссылками с помощью приложений, поддерживающих протокол Open Graph. Например, Facebook Messenger, WhatsApp, iMessage и Slack.
 Twitter Cards: метатеги Open Graph для Twitter 
 Twitter создал свою версию Open Graph под названием Twitter Cards. Он работает аналогично протоколу Open Graph.
 Пользователи, которые твитят ссылки на ваш контент, будут иметь "карточку", добавленную к твиту. Однако, если Twitter Cards отсутствуют, платформа будет использовать Open Graph для создания фрагментов URL-адресов.
 Существует четыре типа карточек Twitter для привлечения внимания: 
  Сводная карточка  : отображает заголовок, описание и миниатюру.
  Сводная карта с большим изображением  : Аналогична сводной карте, но с увеличенным изображением.
  Карта приложения  : Отображает прямую загрузку в мобильное приложение.
  Карточка игрока  : Отображает видео, аудио или другие медиафайлы.
 Основные метатеги Twitter включают:
 twitter:card
 twitter:site
 twitter:creator
 twitter:title
 twitter:description
 092age
  Пример HTML  : < meta name="twitter:card" content="summary">
 Вот как выглядит этот пост, если его опубликовать в Twitter. В твите отображается сводная карта с большим изображением:
 Сводная карта Twitter с большим изображением
 Чтобы узнать больше о Twitter Cards, ознакомьтесь с их официальным руководством.
 Почему протокол Open Graph важен для вашего веб-сайта 
 Протокол Open Graph оптимизирует ваш общий контент и обеспечивает лучший пользовательский интерфейс. Это улучшает видимость вашего контента, делает его более привлекательным и помогает привлекать клики.
 Например, привлечение мультимедийных объектов:
 Привлечение трафика на ваш веб-сайт
 Повышение рейтинга страниц в результатах поиска
 Увеличение количества конверсий
 Создание репутации и доверия к бренду
 Получение качественных обратных ссылок 
 Увеличение вовлеченности
 Увеличение числа репостов в социальных сетях
 Увеличение числа подписчиков в социальных сетях
 Помощь 902 Увеличьте рейтинг кликов вашего веб-сайта 902 (200TR) 902
 платформы социальных сетей понимают ваш контент 
 Теги OG сообщают социальным сетям, какой контент отображать, когда кто-то делится вашей страницей. Плохо выглядит, если вы делитесь ссылкой на Facebook, а изображение отсутствует или заголовок неправильный.
 Вы также можете использовать теги OG для группового и географического таргетинга. Например, вы можете контролировать, какая информация отображается для пользователей в определенной области.
 Как добавить теги Open Graph на свой веб-сайт 
 Добавьте теги Open Graph в раздел HTML-кода вашей страницы. Вы можете вручную добавить соответствующие теги в файл  header.php  .
 Четыре обязательных свойства Open Graph:
 og:url
 og:title
 og:description
 og:image
 Вот пример разметки Open Graph для этого сообщения:
 Теги Open Graph и разметка Twitter Cards в браузере Chrome
 Также рассмотрите возможность использования генератора разметки, такого как Mega Tags или Web Инструменты для работы с кодом, помогающие уменьшить количество синтаксических ошибок.
 Используете ли вы CMS, например WordPress, Wix, Shopify или Squarespace? Эти платформы имеют либо встроенные функции, либо плагины для автоматического добавления тегов Open Graph.
 Например, плагины WordPress, такие как Yoast SEO или Rank Math, — отличные варианты.
 Как тестировать и отлаживать теги Open Graph 
 После добавления метатегов OG убедитесь, что они работают и готовы к публикации. Для этого используйте инструмент отладки для каждой платформы:
 Facebook Sharing Debugger
 Twitter Card Validator
 LinkedIn Post Inspector
 Эти инструменты отладчика Open Graph работают аналогично. Они показывают метатеги, извлеченные сканером, а также любые ошибки или предупреждения. Тестирование также помогает вам увидеть, как выглядит ваш контент при публикации на платформе.
 Кроме того, отладка помогает устранять неполадки, связанные с неправильным отображением содержимого.
 Например, если отображается неправильное изображение или заголовок, используйте отладчик Facebook для обновления кеша. Делайте это каждый раз, когда редактируете изображение, заголовок, URL-адрес или описание.
 Open Graph и Schema Markup: в чем разница? 
 Существует несколько микроформатов, и они могут запутать. Вы можете спросить: «Я уже использую Open Graph. Должен ли я также использовать Schema?»
  Простой ответ  : Да, внедрите и то, и другое, чтобы увеличить вовлеченность.
  Open Graph — это HTML-разметка, используемая социальными сетями  для отображения общего контента. Социальные сети используют теги OG для создания богатых объектов в социальном графе.
 Однако Open Graph не предоставляет поисковым системам подробную информацию о вашей странице. Например, теги OG не могут описывать информацию о людях, местах, продуктах, обзорах, ценах, событиях и многом другом.
  Schema – это разметка HTML, используемая  поисковыми системами, такими как Google или Bing. Это помогает поисковым системам понять ваш контент и лучше представить его в результатах поиска.
 Разметка Schema улучшает отображение вашей страницы в результатах поиска за счет создания расширенных фрагментов. Например, вы можете отобразить расширенный фрагмент со звездным рейтингом для продукта в результатах поиска.
 Google Review Snippet
 Посетите Schema.org, чтобы узнать больше.
  Разница между Schema.org и Open Graph: 
  Разметка схемы  : Используется поисковыми системами, чтобы помочь им понять содержание и создать расширенные фрагменты в результатах поиска.
  Разметка Open Graph  : используется социальными сетями для управления отображением общего контента в ленте.
 Резюме 
 Крайне важно контролировать внешний вид своих фрагментов в социальных сетях. Настройка Open Graph для отображения расширенных объектов может принести вам более ценный трафик и потенциально более высокие коэффициенты конверсии.
 Помните об этих рекомендациях при работе с Open Graph:
 Определите все необходимые свойства Open Graph. Еще лучше, включите дополнительные теги, чтобы иметь еще больший контроль.
This entry was posted in Популярное