Ультимативное руководство по социальным метатегам: Open Graph и Twitter-карты

  1. Открыть График
  2. Карты Твиттера
  3. Открыть График
  4. Карты Твиттера
  5. Открыть График
  6. Карты Твиттера
  7. В заключение

Добавив несколько простых социальных мета-тегов на ваш сайт или блог, вы можете улучшить отображение своего контента в социальных сетях, таких как Facebook, Twitter, LinkedIn и Google+. Это улучшает видимость и увеличивает трафик, делая ваши обновления более привлекательными как для кликов, так и для общего доступа.

В конце концов, когда вы используете правильное изображение, описательный текст и т. Д. Для спонсируемого обновления в социальных сетях, вы можете улучшить взаимодействие (включая переходы по ссылкам) часто на 100 процентов.

Тот же принцип применяется к обычным обновлениям - обычные, ежедневные, обычные обновления социальных сетей - и социальные мета-теги - это то, как вы контролируете именно то, что отображается, включая:

  • Название
  • Описание
  • Изображение
Получить шпаргалку

вам нужно добавить социальные мета-теги.

В качестве быстрого примера того, как это может измениться, вот что будет показано в Twitter для кого-то, кто поделился URL-адресом блога (http://blog.vwriter.com), прежде чем я использовал правильные теги:

Добавив несколько простых социальных мета-тегов на ваш сайт или блог, вы можете улучшить отображение своего контента в социальных сетях, таких как Facebook, Twitter, LinkedIn и Google+

Без правильных социальных метатегов вот так будет выглядеть блог в Twitter

(Обратите внимание, я использую Twitter Валидатор карт инструмент для этих примеров - больше информации об использовании этого ниже).

Как видите, не слишком привлекательно для тех, кто хочет поделиться или щелкнуть, верно?

И вот как это выглядит после того, как я добавил несколько специальных метатегов:

Как только правильные теги были добавлены, происходит значительное улучшение

Как вы можете видеть, есть большая, большая разница. Это привлечет больше акций, больше кликов, больше вовлеченности в целом.

Стоит делать? Абсолютно. И хорошая новость заключается в том, что это основополагающий шаг для вашего сайта и / или блога (оба мы рассмотрим в этом окончательном руководстве). Позаботьтесь об этом один раз, и тогда вам действительно не придется думать об этом снова.

Как я покажу вам ниже, это также относительно быстро и просто сделать.

И да и нет.

Там нет прямой выгоды для вашего рейтинга в поиске.

Но есть косвенное преимущество, которым можно пользоваться.

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

Например:

  • Больше людей увидят и узнают о вашем контенте.
  • В вашем списке будет больше людей для общения и информирования о вашем контенте (т.е. через преобразование доли вашего трафика в электронную почту ).
  • Повышенный уровень обмена информацией укрепит авторитет и доверие к вашему контенту и будет стимулировать создание ссылок.

Эти естественные ссылки на ваш контент укрепляют ваш авторитет и повышают рейтинг.

Существует два основных типа тегов, которые необходимы для максимизации результатов в социальных сетях:

  • Открытые графические теги
  • Теги Twitter-карты

Я расскажу оба из них ниже с точки зрения того, как на самом деле установить и использовать их, но вот краткий обзор того, что эти теги на самом деле и как они работают.

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

Возможно, вы более знакомы с тем, как мета-описание и ключевые слова на вашем сайте помогают поисковым системам понять, о чем идет речь на конкретной странице (хотя и с гораздо меньшей важностью, чем в прошлые времена).

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

Пример, показывающий, как мета-тег описания помогает определить, что отображается для веб-страницы в поисковых системах

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

Если они найдут метатеги социальных сетей, они будут использовать содержащуюся в них информацию, как показано ниже. В противном случае, они делают лучшее предположение о том, что отображать, что обычно не оптимально.

В противном случае, они делают лучшее предположение о том, что отображать, что обычно не оптимально

Социальные мета-теги на вашей странице точно определяют, как будет выглядеть социальное обновление. В этом примере показаны теги Open Graph, используемые Facebook и другими социальными сайтами, которые дополнительно рассматриваются ниже.

Открыть График

Протокол Open Graph был создан Facebook и определяет теги, которые вы можете использовать на веб-странице, которые затем могут быть прочитаны социальными платформами. Теги определяют, что будет показано пользователям в соответствующем социальном обновлении.

Открытые графические теги распознаются facebook , а также большинство других социальных сетей, таких как LinkedIn и Google+. Twitter также использует теги Open Graph, если нет эквивалентных тегов Twitter Card (см. Ниже).

Типичный тег Open Graph выглядит следующим образом:

<meta property = "og: title" content = "Общее руководство по мета-тегам в социальных сетях: открытые графики и твиттер-карты" />

Это тег og: title , определяющий, что будет отображаться как заголовок в социальном обновлении.

Полный список тегов Open Graph, которые вы можете использовать, выглядит следующим образом (если вы думаете, что это начинает выглядеть сложным, проще, чем вы думаете, добавить эти теги, как я покажу вам ниже - просто придерживайтесь его сейчас !):

  • og: locale Необязательно, по умолчанию используется en_US, что подходит для большинства английских веб-сайтов, будь то внутри или за пределами США.
  • og: type Это необязательно - если он не указан, по умолчанию используется веб-сайт. Другой вариант - статья , которую вы должны использовать, например, для сообщений в блоге (см. Раздел ниже о добавлении таких тегов в блог).
  • og: title Заголовок страницы или статьи.
  • og: description Описание страницы или статьи, должно отличаться от og: title
  • og: image Полный URL для изображения, которое вы хотите показать. Так что http://yoursite.com/image.jpg , а не /image.jpg.
  • og: url Полный URL-адрес веб-страницы, к которой вы добавили тег, без каких-либо параметров после ссылки. Так что http://yoursite.com/page.html , а не /page.html или, например, с отображением параметров, http://yoursite.com/page.html?category=2
  • og: site_name Название вашего сайта. Это не означает, что ваше доменное имя, хотя оба могут быть одинаковыми. Как пример, Facebook, а не facebook.com.

Ниже приведены подробные инструкции по их добавлению на ваш сайт, а также пример для подражания.

Карты Твиттера

Карты Твиттера означают, что когда кто-то пишет в Твиттере ссылку на ваш контент, другой контент автоматически присоединяется к твиту (например, фотографии, видео и другие медиа). Это делает твит гораздо более увлекательным, чем могло бы быть в противном случае.

Как владелец контента, вы имеете полный контроль над тем, что Твиттер-карта на самом деле показывает.

В качестве примера того, как это работает на практике, SlideShare внедряет карты Twitter на своем сайте. Итак, когда вы создать SlideShare и Tweet об этом, а не основной Tweet, как это:

Итак, когда вы   создать SlideShare   и Tweet об этом, а не основной Tweet, как это:

Это то, что вы бы увидели в твиттере, ссылающемся на SlideShare, если бы они не использовали карты Twitter

Вы действительно видите медиа - то есть презентацию SlideShare - прикрепленную к самому твиту:

[SlideShare] Интернет-контент работает круглосуточно, чтобы привлечь людей в ваш бизнес: о чем писать. https://t.co/SIlJOPH2IP

- vWriter.com (@vwriterit) 29 января 2016 г.

(Если в нечетном случае SlideShare не появляется, попробуйте перезагрузить эту страницу).

Это не отличается на вашем собственном сайте. Например, вот твит предыдущий пост в блоге к нему прикреплена карточка Twitter с изображением избранного сообщения и резюме:

Легко начать пользоваться SlideShare на регулярной основе. #Онлайн маркетинг https://t.co/7MpGN0JNgY

- vWriter.com (@vwriterit) 27 января 2016 г.

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

<meta name = "twitter: title" content = "Как использовать ваше сообщение в блоге в качестве презентации SlideShare (и получить больше видимости, авторитета и трафика в Интернете!) - Блог vWriter" />

Это, конечно, тег twitter: title , похожий на тег Open Graph og: title выше.

Вот полный список тегов Twitter Card, которые вам нужно использовать:

  • twitter: card Определяет тип карты использовать. Вот варианты выбора (фактическое значение для установки в метатеге выделено курсивом, хотя дополнительная информация приведена ниже):
    • Сводная карта ( контент ) - показывает маленькое изображение с кратким текстом
    • Сводная карта с большим изображением ( summary_large_image ) - как в примере Tweet выше, показывает увеличенное, более заметное изображение вместе с текстом резюме
    • Карта приложения ( приложение ) - актуально только если вы разработчик мобильных приложений
    • Карта игрока ( проигрыватель ) - разрешает видеоклипы, аудиопотоки и другие медиафайлы, как в примере с SlideShare выше
  • twitter: title Название страницы или статьи, как в og: title выше.
  • twitter: description Описание страницы или статьи, эквивалентно og: описание выше.
  • twitter: site Ваше имя пользователя в Twitter, например, для этого сайта это @vwriterit
  • twitter: image Полная ссылка на изображение, которое вы хотите использовать для страницы, эквивалентно og: image . Не должно быть общего или обще-сайтного изображения, но должно относиться к рассматриваемой странице.
  • twitter: creator При желании вы можете установить это как имя пользователя Твиттера создателя контента. Относится только к твиттеру : карта имеет значение summary_large_image.

Так как же вы на самом деле добавляете все эти теги на свой сайт для реализации карт Open Graph и Twitter?

Это то, что я расскажу дальше:

  • Сначала я покажу вам, как добавить социальные метатеги на сайт, отличный от Wordpress.
  • Затем я расскажу о добавлении их в ваш блог WordPress с помощью специальных плагинов.
  • В последнем разделе я покажу вам, как использовать специальные инструменты онлайн-проверки для проверки правильности установки тегов.

Добавление тегов к сайтам, отличным от Wordpress, означает простую ручную настройку кода на ваших страницах. По этой причине это более техническая и трудоемкая работа, чем для сайтов, работающих на WordPress.

Прежде чем продолжить, проверьте, какие теги у вас уже могут быть, посмотрев исходный код вашего сайта и выполнив поиск, например, og: type и twitter: card. Если у вас уже есть некоторые или все из них, проверьте, появляется ли информация для социальных обновлений, как вы этого хотите (см. Последний раздел ниже о проверке тегов).

Открыть График

Следующие теги Open Graph необходимо добавить в раздел <head> каждой страницы вашего сайта. Это шаблон, из которого вы можете скопировать, а затем настроить его с вашей собственной информацией.

См. Выше для получения дополнительной информации об информации, которую должен содержать каждый тег.

<meta property = "og: locale" content = "en_US" />

<meta property = "og: type" content = "article" />

<meta property = "og: title" content = "Название вашего контента здесь" />

<meta property = "og: description" content = "Описание вашего контента здесь" />

<meta property = "og: url" content = "http://www.yoursite.com/yourcontent.html" />

<meta property = "og: site_name" content = "Название вашего сайта" />

<meta property = "og: image" content = "http://www.yoursite.com/yourimage.jpg" />

После добавления на страницу см. Раздел ниже о том, как проверить правильность добавления тегов.

Карты Твиттера

Аналогичным образом, вот шаблон, который вы можете использовать для тегов Twitter Card. Опять же, то, что установить в качестве значения каждого тега (т. Е. Бит контента ), описано выше.

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

<meta name = "twitter: title" content = "Название вашего контента здесь" />

<meta name = "twitter: description" content = "Описание вашего контента здесь" />

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

<meta name = "twitter: image" content = "http://www.yoursite.com/yourimage.jpg" />

<meta name = "twitter: creator" content = "@yourusername" />

Обратите внимание, что последний тег имеет значение только в том случае, если для twitter: card установлено значение summary_large_image, как указано выше.

См. Последний раздел ниже, чтобы проверить, правильно ли реализованы карты Twitter.

Благодаря определенным плагинам WordPress добавление социальных мета-тегов в блог становится намного проще и в значительной степени позаботится о вас.

Тем не менее, это все еще требует осторожности. Разные плагины могут создавать теги, и даже ваша тема WordPress может делать это, поэтому первым шагом должна быть проверка исходного кода вашего блога, чтобы точно узнать, что отображается. Например, вы не хотите, чтобы теги Open Graph добавлялись несколько раз.

Хотя таких плагинов много, я считаю, что лучшим плагином для добавления метатегов в социальные сети является Yoast ,

После того, как вы установили плагин - или, возможно, он у вас уже есть - вот как вы его настроили для создания тегов:

После того, как вы установили плагин - или, возможно, он у вас уже есть - вот как вы его настроили для создания тегов:

Перейдите в социальные настройки для плагина.

  • Нажмите на вкладку Facebook
  • Нажмите, чтобы добавить метаданные Open Graph - это автоматически создаст теги Open Graph, необходимые для всех ваших сообщений и страниц.

Отметьте опцию, чтобы добавить метаданные Open Graph

  • При желании установите заголовок, описание и изображение для главной страницы вашего блога с помощью настроек Frontpage:
    • URL-адрес изображения: установите этот параметр, чтобы избежать использования изображения из недавнего сообщения в блоге при публикации ссылки на ваш блог. Например, это изображение, которое я использую:

      Изображение, которое я установил в тегах Open Graph на главной странице этого блога

    • Название и описание : установите их, только если вы хотите, чтобы информация отличалась от той, которую вы уже указали в качестве Название блога и мета-описание ( Титулы и Метас в Йоасте )
  • В разделе « Настройки по умолчанию» установите URL-адрес изображения таким же, как и URL-адрес изображения выше - это означает, что будет использоваться подходящее изображение, даже если конкретный пост или страница не содержит изображений
  • Нажмите Сохранить изменения
  • Настройка вашего блога для использования тегов Twitter Card еще проще:
    • Нажмите вкладку Twitter
    • Установите флажок « Добавить метаданные карты Twitter» и выберите тип карты, которую вы хотите использовать.
    • Нажмите Сохранить изменения

      Добавить Twitter-карты в свой блог легко с помощью плагина Yoast

Получить шпаргалку

вам нужно добавить социальные мета-теги.

Дважды проверьте, что ваши социальные мета-теги отображаются именно так, как вы хотите. Для этого доступны следующие инструменты проверки и для Open Graph, и для карт Twitter.

Не забудьте проверить больше, чем просто одну страницу. Например, проверьте домашнюю страницу вашего блога вместе с отдельным постом.

Открыть График

Инструмент проверки открытого графика Facebook позволяет вам увидеть, как будет выглядеть страница при публикации на основе предоставленных вами тегов.

  • Проверьте наличие ошибок и исправьте их. Например, при проверке тегов в этом блоге я обнаружил, что в моих сообщениях было установлено более одного og: url , что было вызвано тем, что Yoast и моя тема создавали теги Open Graph.

Примите к сведению любые ошибки, чтобы вы могли затем пойти и исправить их

Карты Твиттера

Используйте инструмент проверки карт Twitter, чтобы проверить, правильно ли вы внедрили карты Twitter.

  • Обратите внимание, что это говорит о белых списках, но это автоматически. Если вы видите какие-либо ошибки, связанные с белым списком, внимательно проверьте свои теги, чтобы убедиться, что они правильные и что данная страница полностью доступна для просмотра в Твиттере.

Если вы видите какие-либо ошибки, связанные с белым списком, внимательно проверьте свои теги, чтобы убедиться, что они правильные и что данная страница полностью доступна для просмотра в Твиттере

В заключение

Теперь у вас есть все, что вам нужно знать, чтобы использовать все преимущества социальных метатегов для своего сайта, оптимизировать общие ресурсы, переходы по ссылкам и многое другое.

Сделать это очень просто и получить шпаргалку для добавления социальных метатегов - это дает вам:

  • Все нужные вам теги готовы скопировать и вставить.
  • Простые определения каждого тега, чтобы вы точно знали, как настроить свой собственный сайт.
  • Ссылки на нужные вам инструменты проверки.

ГОРЯЧАЯ ЛИНИЯ

(062) 348 60 00
(095) 210 57 42

Дед Мороз в офис Донецк

Дед Мороз на детском утреннике Донецк

Дед Мороз на дом Донецк

Новости

Телеканал Юнион в гостях у Морозко

Последние записи