- Почему был открыт Open Graph?
- Почему маркетологи должны знать об Open Graph
- Теги Facebook
- Расширенные теги Open Graph
- Реализуйте теги Open Graph
- Карты Твиттера
- Запросить одобрение в Твиттере
- Плагины Twitter Card
- Заключение
Маркетологи создают много контента. Да, контент - это король, но король бессилен без последователей. Итак, что первое, что приходит на ум, когда вы хотите охватить более широкую аудиторию с помощью вашего нового удивительного поста?
Поделиться в социальных сетях, конечно. Огромная аудитория Facebook и Twitter делает их лучшими платформами для обмена, но знаете ли вы, как оптимизировать этот потенциал?
Почему был открыт Open Graph?
Facebook представил Open Graph в 2010 году. Он способствует интеграции между Facebook и другими веб-сайтами, позволяя им превращаться в богатые «графические» объекты с той же функциональностью, что и другие объекты Facebook.
Проще говоря, возможен некоторый контроль над тем, как информация перемещается со стороннего веб-сайта на Facebook, когда страница публикуется (или нравится, и т. Д.). Чтобы сделать это возможным, информация отправляется через метатеги Open Graph в <head> части кода веб-сайта.
Теперь другие сайты социальных сетей также используют социальные мета-теги. Все остальные основные платформы, щебет , LinkedIn , а также Google+ распознавать теги Open Graph. У Twitter на самом деле есть свои мета-теги для Twitter-карт, но если роботы Twitter не могут их найти, вместо этого Twitter использует теги Open Graph.
Почему маркетологи должны знать об Open Graph
Сайты социальных сетей являются основными драйверами большей части интернет-трафика. Следовательно, способность использовать силу социальных метатегов является жизненно важным навыком для современных маркетологов. Теги могут сильно повлиять на конверсии и рейтинг кликов.
Например, вы когда-нибудь делились ссылкой на Facebook только для того, чтобы обнаружить, что миниатюра отсутствует, или изображение было совершенно другим, чем вы ожидали? Знание немного о тегах Open Graph может помочь вам решить эти проблемы.
Добавление тегов Open Graph на ваш веб-сайт не повлияет напрямую на SEO на вашей странице, но повлияет на эффективность ваших ссылок в социальных сетях, так что это стоит того, чтобы на них посмотреть. Давайте посмотрим на самые важные мета-теги для Facebook и как их оптимизировать для лучшего обмена.
Теги Facebook
ог: название
Как вы можете догадаться, именно так вы определяете заголовок вашего контента. Он выполняет те же функции, что и традиционный мета-тег заголовка в вашем коде. Фактически, если Facebook не находит тег og: title на вашей странице, он использует мета-заголовок.
Имейте в виду, что текст, отображаемый в ленте Facebook, выделен жирным шрифтом и чрезвычайно привлекателен. Это должно быть убедительно, как хороший заголовок поста.
Количество символов не ограничено, но лучше оставить число от 60 до 90. Если ваш заголовок длиннее 100 символов, Facebook урезает его до 88!
Пример:
<meta property = ”og: title” content = ”Ваш привлекательный заголовок здесь” />
OG: URL
Вот как вы устанавливаете канонический URL для страницы, которой вы делитесь. Это означает, что вы определяете одну страницу, на которую будут переходить все ваши ресурсы. Это полезно, если у вас есть несколько URL для одного и того же контента (например, с использованием параметров). Важное примечание: указанный URL не отображается в новостной ленте Facebook, виден только домен.
Пример:
<meta property = ”og: url” content = ”http://www.yourdomain.com” />
ог: Тип
Вот как вы описываете объект, которым вы делитесь: пост в блоге, видео, изображение или что-то еще. Список на выбор длинный. Вот некоторые примеры:
Интернет на основе:
Развлекательная программа:
Место:
Люди:
Бизнес:
Вы можете увидеть полный список типов Вот ,
Этот тег важен, если ваша страница имеет кнопку «Нравится» и представляет собой реальный объект (например, книгу или фильм). Он определяет, будет ли ваш контент отображаться в разделе интересов пользователя в его профиле, если ему «нравится».
В большинстве случаев вы будете использовать значение «веб-сайт», так как вы делитесь ссылкой на веб-сайт. Фактически, если вы не определили тип, Facebook по умолчанию будет читать его как «веб-сайт».
Пример:
<meta property = ”og: type” content = ”website” />
OG: описание
Этот дескриптор метаданных очень похож на мета-тег описания в HTML. Здесь вы описываете свой контент, но вместо того, чтобы показываться на странице результатов поисковой системы, он отображается под заголовком ссылки на Facebook.
В отличие от обычного мета-тега описания, это не повлияет на ваш SEO. (Так что не тратьте слишком много времени на выяснение того, как подкрадываться к ключевым словам.) Однако, это хорошая идея, чтобы сделать его неотразимым, потому что вы хотите, чтобы люди нажимали на него.
Вы не ограничены количеством символов, но лучше использовать около 200 букв. В некоторых случаях, в зависимости от ссылки / заголовка / домена, Facebook может отображать до 300 символов, но я рекомендую рассматривать что-либо выше 200 как нечто дополнительное.
Пример:
<meta property = ”og: description” content = ”Ваша развлекательная и описательная копия здесь, если ваше мета-описание хорошо, используйте его.” />
OG: изображение
Это самый интересный тег Open Graph для многих маркетологов, потому что картинка всегда помогает выделить контент. Таким образом, вы гарантируете, что определенный эскиз будет отображаться при публикации вашей страницы. Это может быть очень полезно для ваших показателей конверсии.
Убедитесь, что вы установили og: изображение, которое выберете, иначе Facebook покажет что-то глупое, например, нежелательный рекламный баннер, вырезанный со страницы, или ничего вообще (как показано ниже). Мы определенно не хотим этого!
Важно помнить, что если ваша страница статична и вы не используете какую-либо систему управления контентом (CMS) (например, WordPress), вам нужно вручную изменить og: image для каждой из ваших страниц. Если ваш сайт управляется с помощью CMS и вы установили соответствующий плагин, теги og: image назначаются автоматически для каждой страницы. Ищите список плагинов ниже.
Наиболее часто рекомендуемое разрешение для изображения OG составляет 1200 пикселей x 627 пикселей (соотношение 1,91 / 1). При таком размере ваш эскиз будет большим и выделяется из толпы. Только не превышайте ограничение размера 5 МБ.
Если вы используете изображение размером менее 400 x 209 пикселей, оно будет отображаться как уменьшенный эскиз. Это нигде не так привлекательно.
Имейте в виду, что изображение, которое вы используете в качестве изображения Open Graph, может отличаться от того, что есть на вашей странице. Почему бы вам не воспользоваться этой возможностью, чтобы выделиться еще больше? Например, если у вас хороший заголовок, но изображение, которое вы используете, не очень захватывающее (не инфографика или хорошо выглядящий человек и т. Д.), Попробуйте вместо этого использовать изображение с хорошей строкой или двумя копиями (см. Пример ниже). ).
Если вы сделаете это, вам нужно помнить одну вещь: зашнуруйте текст или его самую значительную часть в середине изображения. Это важно, потому что Facebook обрезает стороны миниатюр.
Пример:
<meta property = ”og: image” content = ”http://www.yourdomain.com/image-name.jpg” />
Расширенные теги Open Graph
Приведенные выше теги Open Graph - это те, которые вам действительно нужно знать (например, описание не так много, но полезно). Существуют и другие, более продвинутые теги, которые можно использовать для предоставления еще более подробных спецификаций.
- og: locale - определяет язык, по умолчанию используется американский английский
- og: site_name - если страница (объект), которой вы делитесь, является частью большой сети
- og: audio или og: video - для добавления дополнительных аудио или видео файлов к вашему объекту
- fb: app_id - для связи с приложением Facebook (например, FB Comments) с объектом
Проверьте теги Open Graph
Чтобы облегчить жизнь, Facebook создал инструмент под названием Общий отладчик , Он имеет две очень полезные функции.
Во-первых, когда вы набираете ссылку, которую хотите проверить, она возвращает любые ошибки и предложения для тегов OG, если они есть. Вы также можете проверить, как выглядит og: image, каково ваше описание и так далее.
Во-вторых, он очищает кеш Facebook. Представьте себе: вы публикуете ссылку на Facebook, но затем вы видите ошибку в миниатюре, поэтому вы возвращаетесь на свой сайт и корректируете теги OG, а затем снова публикуете его на Facebook.
Вероятно, ничего не произойдет. Миниатюра останется прежней. Это из-за кеша. Отладчик общего доступа к Facebook обновит кэш ваших ссылок после любых настроек, поэтому не забывайте использовать его каждый раз.
Реализуйте теги Open Graph
Но как вы реализуете теги OG? По сути, они принадлежат <head> части HTML вашей страницы. Если вы не управляете кодом, вам нужно обратиться за помощью к веб-разработчику. Вы можете подготовить весь пакет самостоятельно, используя советы выше, чтобы сэкономить свое драгоценное время.
Если вы используете WordPress, просто установите один из плагинов, который аккуратно реализует код для вас. Я люблю использовать WordPress SEO от Yoast , но есть официальный Плагин Facebook и другие на выбор.
Вот другие OG плагины / расширения / дополнения для:
Карты Твиттера
Как и теги Open Graph в Facebook, Twitter Cards позволяют выделиться из толпы твитов. Они позволяют генерировать дополнительный контент из вашего твита из 140 символов. Это не отображается в лентах людей автоматически, но добавляет небольшую кнопку «Просмотреть сводку» под твитом.
И когда вы нажимаете на него:
Это заманчивая вещь, которую можно щелкнуть, и она предоставляет удобную сводку общей страницы - карты Twitter. Удивительно, но не многие сайты используют эти теги. Это отличная возможность выделить твиты в переполненных твиттер-лентах.
Лучший способ получить их - установить один из плагинов WordPress. WordPress SEO от Yoast, упомянутый выше, делает свою работу. Если это не вариант, спросите своего веб-разработчика и предоставьте ему готовые теги Twitter Card для внедрения. Вот как ты их сделаешь.
твиттер: карта
Этот обязательный тег работает аналогично og: type. Он описывает тип контента, которым вы делитесь. Существует 7 вариантов выбора: сводка, фото, видео, продукт, приложение, галерея и сводка «большой версии».
В зависимости от типа контента, который вы выбираете, меняется ссылка внизу вашего твита. Вы можете получить «Просмотреть сводку» для сводок, «Просмотреть фотографию» для фотографий и т. Д. Если этот тег не установлен, по умолчанию Твиттер читает вашу ссылку как «Обзор».
Пример:
<meta name = ”twitter: card” content = ”summary” />
твиттер: название
Это в основном то же самое, что и его аналог OG. Вы указываете название для своей статьи, которое будет выделено жирным шрифтом. Разумно избегать повторения того же текста, который есть в вашем твите. Сделайте большую часть предоставленного места и позвольте двум частям копии играть друг на друга, чтобы усилить сообщение. Используйте до 70 символов.
Пример:
<meta name = ”twitter: title” content = ”Ваш заголовок здесь” />
твиттер: описание
Используйте этот тег, чтобы написать описание на странице, которой вы делитесь. Как и в случае с тегами Open Graph, не сосредотачивайтесь на ключевых словах, поскольку они не будут иметь значения для вашего SEO. Создайте убедительную копию, которая прекрасно дополнит ваш твит и заголовок. Twitter ограничивает эту часть до 200 символов.
Пример:
<meta name = ”twitter: description” content = ”Ваше 200-символьное описание здесь” />
твиттер: URL
Это устанавливает канонический URL для контента, которым вы делитесь. (Для получения дополнительной информации, пожалуйста, просмотрите описание эквивалентного тега Facebook Open Graph выше.)
Пример:
<meta name = ”twitter: url” content = ”http://www.yourdomain.com” />
твиттер: Изображение
Да, вы догадались. Вот как вы устанавливаете картинку для своего твита. Твиттер допускает два варианта, карточку с уменьшенной или увеличенной картинкой. Вы решаете, какой из них вы хотите в теге типа. Если вы выберете большой вариант, убедитесь, что он имеет разрешение не менее 280x150 пикселей и размер файла не превышает 1 МБ. Вы можете использовать тот же трюк, что и с миниатюрой Facebook: добавить текст к изображению, чтобы ускорить сообщение.
Пример:
<meta name = ”twitter: image” content = ”http://www.yourdomain.com /image-name.jpg” />
Запросить одобрение в Твиттере
Имейте в виду, что прежде чем вы сможете в полной мере воспользоваться картами Twitter, вам необходимо запросить одобрение своей страницы в Twitter. К счастью, это не занимает много времени и может быть легко сделано с помощью их Валидатор карты , Получив одобрение, Card Validator выполняет те же функции, что и отладчик общего доступа Facebook, позволяя проверять ссылки перед фиксацией.
Плагины Twitter Card
Как и в случае с Facebook, существует множество плагинов для реализации Twitter-карт. Вот несколько из них:
Заключение
Окончательный код для Facebook и Twitter должен выглядеть примерно так:
Удивительно, как мало людей оптимизируют эти теги. Это стоит сделать, потому что это помогает вам выделяться и привлекать больше кликов и просмотров, а также оказывает косвенное положительное влияние на ваш авторитет SEO - все вещи, которые в конечном итоге приводят к увеличению прибыли.
Описанные здесь функции не охватывают всего, что вы можете сделать с помощью Open Graph. Ознакомьтесь с некоторыми более продвинутыми интеграциями OG с Facebook и некоторыми новыми функциями из Twitter (например, Lead Generation Cards).
Об авторе: Яцек Блаут (Jacek Blaut) является ведущим хакером роста и маркетологом на входе в Growth Republic Ltd, где он помогает онлайн-бизнесам в их усилиях по цифровому маркетингу и оптимизирует их воронки конверсии. Следуйте за ним на щебет ,
Почему был открыт Open Graph?Итак, что первое, что приходит на ум, когда вы хотите охватить более широкую аудиторию с помощью вашего нового удивительного поста?
Огромная аудитория Facebook и Twitter делает их лучшими платформами для обмена, но знаете ли вы, как оптимизировать этот потенциал?
Почему был открыт Open Graph?
Например, вы когда-нибудь делились ссылкой на Facebook только для того, чтобы обнаружить, что миниатюра отсутствует, или изображение было совершенно другим, чем вы ожидали?
Почему бы вам не воспользоваться этой возможностью, чтобы выделиться еще больше?
