Как теги Open Graph могут оптимизировать работу с социальными сетями
- Что такое теги Open Graph?
- Как Shopify работает с тегами Open Graph
- Открыть графические теги и Slate
- Ограничения тегов Open Graph и Shopify
- Откройте графические теги для победы!
Вы когда-нибудь делились веб-страницей в Facebook или Twitter и заметили, что отсутствует эскиз предварительного просмотра, появляется несвязанное изображение или отображается неправильное описание?
Если это так, вы столкнулись с ошибкой Open Graph, которая вызвала неверные данные с веб-сайта в социальные сети. Когда ваши клиенты обмениваются контентом в Интернете, важно, чтобы отображались правильные изображения и описания, иначе потенциальные клиенты могут отговорить от перехода по ссылке.
В этом сообщении будет рассказано о том, как работают теги Open Graph, и как вы можете оптимизировать их для своих клиентов при создании пользовательских тем.
Вам также может понравиться: Как социальные медиа могут помочь вам в развитии бизнеса фрилансеров или агентств ,
Что такое теги Open Graph?
Теги Open Graph были введены Facebook в 2010 году, чтобы позволить сторонним веб-сайтам быть «читаемыми» Facebook. Это происходит путем назначения богатых «графических» объектов веб-сайтам с информацией, которая затем отправляется в Facebook, когда страница добавляется в избранное или публикуется.
Многие другие платформы социальных сетей, такие как LinkedIn и Google+, также распознают те же теги Open Graph. Твиттер имеет свои собственные метатеги для обмена, но по умолчанию будет использовать теги Open Graph, если их собственные метатеги не обнаружены на веб-сайте. Вы можете узнать больше о фоне тегов Open Graph из официальный сайт протокола Open Graph.
Facebook выбирает, какой контент будет отображаться в вашей ленте новостей, когда вы публикуете веб-страницу, в зависимости от того, как теги Open Graph калибруются на веб-сайте. Эти теги могут оказать огромное влияние на конверсии и рейтинг кликов. потому что, если они настроены неправильно, неточный контент появится, когда страницы будут опубликованы в социальных сетях.
Эти теги могут оказать огромное влияние на конверсии и рейтинг кликов, потому что, если они настроены неправильно, при публикации страниц в социальных сетях появится неточный контент.
Важно, чтобы правильные описания и соответствующие изображения появлялись, когда продавцы делятся своим контентом, поскольку неожиданный контент может подорвать доверие клиентов за считанные секунды. Если несвязанный текст или неправильные изображения просматриваются, когда продавец публикует страницу продукта, клиенты будут реже переходить по ссылке, чтобы прочитать больше. Изучение работы тегов Open Graph поможет вам избежать этих ловушек.
Как Shopify работает с тегами Open Graph
Как и другие метатеги, теги Open Graph добавляются в <head> веб-сайта. У Shopify есть особый способ форматирования тегов Open Graph: оборачивая их в теги Liquid. Примером того, как это выглядит, будет:
{% - назначить og_title = product.title | strip_html -%}
С Shopify многие темы компилируют эти теги в отдельный фрагмент, который затем включается в заголовок файла theme.liquid.
Есть несколько различных переменных, которые мы рассмотрим:
og_title: Этот тег позволяет вам определить заголовок контента, которым вы делитесь. Большинство тем Shopify будут настроены так, чтобы og_title автоматически вытягивал название продукта или заголовок статьи.
og_url: в этом теге вы устанавливаете канонический (или «предпочтительный») URL для общей страницы.
og_type: тэг Type будет «сообщать» Facebook, каким типом контента вы делитесь . Это может быть видео, сайт, блог, товар и т. Д. Полный список типов можно найти на официальном сайте Open Graph. Если вы делитесь страницей продукта, этот тип, скорее всего, будет установлен на продукт.
og_description: Этот тег позволит вам описать объект, которым вы делитесь , аналогично мета-тегу описания, который вы бы добавили для целей SEO. После публикации страницы это описание появится под заголовком страницы в Facebook. С большинством тем Shopify содержимое, которое появляется здесь, зависит от того, какой тип страницы является общим. Например, если вы публикуете сообщение в блоге, Facebook извлечет информацию из выдержки из статьи. Если отрывка нет, описание будет извлечено из основного контента. Когда мы посмотрим на Slate social-meta-tags.liquid, мы увидим другие примеры условных правил og_description.
og_image: Как и следовало ожидать, тег изображения будет извлекать изображение с вашего сайта, которое будет отображаться, когда вы публикуете страницу. Как мы видели с другими тегами Open Graph, многие темы Shopify автоматически извлекают изображения в зависимости от того, как установлены теги.
Переменные выше являются примерами метаданных. Метаданные - это информация, которая может распознаваться браузерами, ссылающимися на определенные свойства. В этом случае на свойства, такие как «title» и «images», ссылаются. Существует также ряд дополнительных и дополнительных метаданных, которые вы можете включить: вы можете узнать больше об этом на домашняя страница протокола Open Graph.
Открыть графические теги и Slate
Как мы только что видели, большинство тем Shopify имеют предопределенные теги Open Graph, обычно внутри фрагмента, который добавляется в <head> в файле theme.liquid. Одним из огромных преимуществ использования платформы Slate для создания собственной темы является то, что теги Open Graph уже включены в оболочку темы. Все необходимые мета-теги социальных сетей для Facebook и Twitter можно найти во фрагменте социальных мета-тегов.
{% - назначить og_title = page_title -%} {% - назначить og_url = canonical_url -%} {% - назначить og_type = 'website' -%} {% - назначить og_description = page_description | по умолчанию: shop.description | по умолчанию: shop.name -%}
В самом верху файла social-meta-tags мы видим базовые теги Open Graph, которые применяются к веб-сайту. Эти правила будут применяться ко всем страницам Shopify, кроме тех страниц, для которых настроено переопределение.
Здесь мы можем увидеть, какой заголовок, URL, тип и описание определяются. Og_title извлекает из фактического заголовка, уже определенного на странице. Это может быть страница «Домашняя страница» или страница «О нас».
Og_url извлекает канонический URL-адрес этой страницы, а og_type - веб-сайт, поскольку с этого сайта будут доступны только веб-страницы. Og_description сначала ищет описание страницы для этой конкретной страницы. Если ничего не найдено, описание магазина или название магазина будут опубликованы в виде описания на Facebook.
Хотя это базовые теги Open Graph, которые применяются к страницам Shopify, для некоторых страниц установлены переопределения. Если страница использует шаблон для продукта, статьи блога или страницы с паролем, то используются их собственные специальные теги Open Graph. Вы можете увидеть это где теги управления потоком используются для создания отдельных условий, когда страница использует определенный шаблон, например:
Например, теги Open Graph для страницы продукта показаны выше.
Мы можем видеть, что og_title берет название продукта и использует Фильтр для удаления заголовка HTML. При отправке изображения продукта на Facebook выбирается до трех изображений, и Facebook решает, какое изображение лучше всего подходит - как правило, в зависимости от размера и соотношения изображений.
Например, при совместном использовании страницы продукта продавцу может быть предоставлен выбор между тремя изображениями разного размера с различными соотношениями сторон. Если Facebook особенно важен для бизнеса продавца, он может подумать о том, чтобы его изображения были максимально квадратными. Это гарантирует, что изображения не выглядят обрезанными, когда они отображаются на Facebook. Вы также можете определить размеры изображения, и по умолчанию Slate будет отображать изображения с разрешением 1024 x 1024 пикселей.
Собственные специальные теги Twitter также включены для определения сайта, типа карты Twitter, заголовка и описания:
<meta name = "twitter: site" content = "{{settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@'}}"> <meta name = "twitter: card" content = " summary_large_image "> <meta name =" twitter: title "content =" {{og_title}} "> <meta name =" twitter: description "content =" {{og_description}} ">>
Наконец, этот фрагмент включен в раздел <head> страницы theme.liquid, поэтому он применяется к каждой странице сайта:
Вы можете просмотреть полный фрагмент социальной-meta-tags.liquid Slate из нашего репозитория GitHub и используйте его как пример того, как вы можете настроить свои собственные теги Open Graph.
Вам также может понравиться: Начало работы со Slate за 4 простых шага ,
Ограничения тегов Open Graph и Shopify
Поскольку в темах Shopify появились разделы, эта новая структура означает, что фрагменты больше не могут получить доступ к логотипу магазина. В базовых тегах Open Graph в самой верхней части фрагмента социальных мета-тегов Slate отсутствует переменная og_image , поскольку нет данных, которые можно найти для изображения магазина по умолчанию.
Это означает, что когда обычная страница, такая как страница «О нас», публикуется в Facebook, изображение может не просматриваться. Одним из способов решения этой проблемы является жесткое кодирование тега og_image во фрагмент кода социальных мета-тегов, который ссылается на изображение. Это изображение может быть логотипом вашего клиента, который вы вручную загрузили в раздел «Файлы» администратора.
Добавив тег og_image, ссылающийся на определенное изображение, вы можете убедиться, что логотип вашего клиента появляется на страницах, которые обычно не могут получить доступ к изображению. На скриншоте ниже показано, как это может выглядеть:
Если у вас возникли проблемы при работе с тегами Open Graph, Facebook Open Graph Object Debugger Это очень полезный инструмент, который может дать вам информацию о любых ошибках, а также отобразить текущую конфигурацию Open Graph. Вы можете использовать это, чтобы протестировать различные теги Open Graph и изменить структуру вашего сайта, чтобы Facebook получал самые свежие данные.
Вам также может понравиться: Руководство для начинающих по созданию Shopify темы с разделами ,
Откройте графические теги для победы!
Хотите узнать больше? Вот некоторые дополнительные ресурсы для вас, чтобы проверить:
Не секрет, что обмен в социальных сетях - это огромная часть того, как продавцы связываются с клиентами, что означает Торговцы ожидают, что точный контент появится в Facebook и Twitter , Независимо от того, создаете ли вы тему с нуля или используете фреймворк, такой как Slate, важно убедиться, что магазины вашего клиента правильно используют теги Open Graph.
Вы встроили теги Open Graph в свои собственные темы? Расскажите нам об этом в разделе комментариев ниже!
Что такое теги Open Graph?Вы когда-нибудь делились веб-страницей в Facebook или Twitter и заметили, что отсутствует эскиз предварительного просмотра, появляется несвязанное изображение или отображается неправильное описание?
Хотите узнать больше?
Вы встроили теги Open Graph в свои собственные темы?