Улучшение SEO и взаимодействия с помощью метатегов HTML
Твиты с изображениями получают на 150% больше ретвитов, на 89% больше лайков и на 18% больше кликов. То же самое и на других платформах социальных сетей.
Если вы поделитесь ссылкой на свой веб-сайт или блог в социальных сетях без каких-либо специальных метатегов, она будет отображаться как простая текстовая ссылка, например:
Это связано с тем, что Twitter и другие платформы социальных сетей не знают, как интерпретировать ваш контент. К счастью, есть способ предоставить дополнительную информацию с помощью метатегов, которые сообщают платформам, как анализировать ваш веб-сайт. Они могут автоматически создать красивый предварительный просмотр и встроить его в ваш пост. С этими метатегами акции вашего контента будут выглядеть примерно так:
Карты Open Graph и Twitter
Есть две важные категории метатегов социальных сетей: Протокол Open Graph и Карты Twitter. Протокол Open Graph был представлен Facebook в 2010 году как способ обогащения внешнего контента, которым делятся его пользователи. В 2012 году Twitter расширил эту идею и добавил дополнительные теги, специфичные для Twitter.
Наиболее важными метатегами социальных сетей являются title, description и image. Если вы знакомы с SEO, вы, возможно, знаете о важности обычных тегов title и description. Версии Open Graph и Twitter Card выполняют ту же роль, и вы обычно можете копировать значения из тегов SEO. Однако поисковые системы не используют теги социальных сетей для своего ранжирования, поэтому вам понадобятся и то, и другое.
Как уже упоминалось, сообщения в социальных сетях, содержащие изображения и другие мультимедийные ресурсы, работают лучше в каждой категории по сравнению с сообщениями без изображений. Следовательно, тег изображения может быть самым важным из трех. Когда вы пишете сообщение в блоге, вы, вероятно, в любом случае собираетесь создать изображение заголовка, и ваш веб-сайт будет иметь как минимум логотип. Таким образом, у вас всегда есть изображение, которое вы можете использовать для тега изображения в социальных сетях, и вы обязательно должны это сделать.
Добавление тегов социальных сетей
Добавить метатеги в социальные сети очень просто и займет всего несколько минут. Большинство систем управления контентом поддерживают их либо изначально, либо через плагин, и если вы предпочитаете разрабатывать свои собственные веб-сайты, их также легко добавить. Они очень похожи на другие метатеги и могут быть вставлены рядом с ними в разделе заголовка исходного кода.
Общие теги
Протокол Open Graph и Twitter Cards включают в себя множество метатегов для самых разных целей. Однако большинство из них не требуются, и вам, как правило, понадобится лишь несколько (полный список можно найти на веб-сайте протокола Open Graph и в документации для разработчиков Twitter). Вот самые важные теги, которые вы должны включить на свой сайт:
og: title
Вы можете использовать тег og:title, чтобы указать заголовок вашего веб-сайта или публикации. Как правило, это будет то же самое, что и основной тег заголовка веб-сайта.
<meta property=”og:title” content=”How To Earn 1 Million Dollars | website.com”>
og: image
Тег og:image можно использовать для указания изображения, которое будет включено в предварительный просмотр вашего контента в социальных сетях. Поскольку мультимедийные ресурсы увеличивают вовлеченность ваших постов, это будет иметь самое большое значение. Рекомендуемый размер - 1200 на 630 пикселей (соотношение сторон 1,91: 1), но на разных платформах размеры могут немного отличаться.
<meta property=”og:image” content=”https://website.com/img/1_million_dollars.png">
og: description
Тег og:description похож на обычный тег описания SEO и суммирует содержание вашей страницы в 1-2 предложения.
<meta property=”og:description” content=”Let me tell you about the 100% guaranteed way to earn 1 million dollars in just 3 months!”>
og: type
Тег og:type сообщает синтаксическому анализатору социальных сетей тип контента на вашем веб-сайте. Общие значения: website, article, video.movie или music.song (все типы перечислены на веб-сайте Open Graph protocol).
<meta property=”og:type” content=”article”>
og: url
Чтобы правильно ссылаться на исходный источник вашего контента, вы также можете указать канонический URL с помощью тега og:url.
<meta property=”og:url” content=”https://website.com/1-million-dollars">
Карты Twitter
В дополнение к тегам Open Graph, которые используются на многих различных веб-сайтах, Twitter добавил свои собственные метатеги. К счастью, Twitter использует теги Open Graph как запасной вариант, поэтому нам не нужно добавлять их дважды. Например, если тег twitter:title не найден, Twitter будет использовать тег og:title.
twitter: карточка
Тег twitter:card описывает форматирование содержимого твита. Допустимы четыре значения: summary, summary_large_image, player и app. Для большинства веб-материалов, таких как веб-сайты, статьи, сообщения и т. Д., Рекомендуется использовать summary_large_image или summary. player предназначен для мультимедийного контента, например видео, а app может использоваться для прямой ссылки на приложение.
<meta name=”twitter:card” content=”summary_large_image”>
twitter: создатель
Тег twitter:creator - это способ ссылки на аккаунт автора в Twitter.
<meta name=”twitter:creator” content=”@pingpoli”>
twitter: сайт
Подобно тегу создателя, тег twitter:site может использоваться для ссылки на аккаунт Twitter веб-сайта.
<meta name=”twitter:site” content=”@websitecom”>
Заключение
В наши дни репосты в социальных сетях составляют значительную часть трафика на веб-сайт или блог. Чтобы максимизировать вовлеченность при публикации вашего контента, вам следует использовать теги Open Graph и Twitter Card. Они представляют собой небольшой набор метатегов HTML, которые сообщают синтаксическому анализатору социальных сетей, как интерпретировать веб-сайт, чтобы они могли автоматически создавать хорошо отформатированный предварительный просмотр.
Чтобы добавить их на свой веб-сайт, требуется всего несколько минут, и когда вы в любом случае создаете заголовки, описания и красивое изображение заголовка для SEO, вы также можете использовать эти значения для тегов социальных сетей.
Когда вы или другие пользователи регулярно публикуете свой веб-сайт или блог в социальных сетях, вам следует подумать о добавлении метатегов, если вы еще этого не сделали.
