- Что такое теги 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 в свои собственные темы? Расскажите нам об этом в разделе комментариев ниже!
Похожие
Что такое RSS-канал?RSS-канал - это важный термин, который блоггеры должны понимать, и в этом руководстве я объяснил, что такое RSS-канал и как его использовать. Для блоггера это один из способов позволить своим пользователям подписываться на обновления блога. Среди блоггеров и людей, которые любят получать информацию из Интернета, RSS-канал не должен быть новым словом, но для многих это жаргон. Сегодня мы узнаем о RSS-каналах и о том, как полезно всем оставаться в курсе новостей. Что такое SEO
... ит на создание успешной SEO-кампании. Вам нужен профессионал на вашей стороне. В Colorado Internet Solutions мы задаем этот вопрос «что такое SEO» почти каждый день, когда общаемся с владельцами малого бизнеса. Маркетинг вашего бизнеса в Интернете - сложное и чрезвычайно гибкое мероприятие, и попытка поделиться всем на эту тему займет гораздо больше времени, чем вы хотели бы потратить на чтение, поэтому мы поделились с вами лишь несколькими соображениями по этому вопросу. страницу Что такое Google TrustRank?
Вы заметили, что во многих результатах поиска страницы с популярных веб-сайтов часто отображаются выше, хотя есть страницы с большим «PageRank»? Реальность такова, что PageRank больше не влияет на ваше общее положение. Многие поисковые маркетологи приняли тактику, чтобы Что такое SEO - определение SEO
... тегий. Поисковая оптимизация (SEO) - это процесс, влияющий на видимость веб-сайта или веб-страницы в результатах платежной системы, бесплатный, часто называемый их «естественным» или «органическим» позиционированием. , В общем, как можно скорее (или набрав больше баллов на странице результатов поиска), и чаще всего сайт появляется в списке результатов поиска, вы будете получать больше посетителей. SEO может быть ориентирован на различные типы поиска, включая поиск изображений, локальный Как работает алгоритм SEO Google?
SEO алгоритм Google в двух словах Вы когда-нибудь задумывались, как работает алгоритм Google SEO? Я имею в виду, как Google сканирует все веб-сайты в Интернете и индексирует их, позволяя Google показывать вам только ту страницу, которая вам нужна, когда вы ищете изображения маленьких выдр. Если вы не задумывались, почему бы и нет? В конце концов, понимание того, как работает Google, имеет решающее значение для понимания того, как убедиться, что ваша страница занимает максимально высокое Как Open Graph может дать вам увеличение трафика на 250%
... open-graph-last-month-traffic-from-facebook-is-up-2-5x/"> ТЯО в нем говорится, что «с момента интеграции Tumblr с Open Graph в прошлом месяце трафик с Facebook вырос в 2,5 раза». Естественно, я был заинтригован этим, поэтому я решил провести исследование о том, как лучше интегрировать Open Graph в мои веб-сайты. Далее следует тактика, которую я обнаружил. Тактика, подобная той, что использовала Tumblr для увеличения трафика на 250%! Как Open Graph может увеличить Виды SEO оптимизации методами
... инство услуг и продуктов отличаются Типы SEO оптимизации , Речь идет не о разных пакетах услуг, а о вариантах используемых методов оптимизации. Следует отметить, что в зависимости от результатов вы можете использовать каждый из различных типов SEO, но для некоторых типов сайт риска запрещен gagul, то есть он полностью как Теги заголовка и теги alt: почему они имеют значение?
Примечание редактора: этот пост был первоначально опубликован в июле 2013 года и был полностью переработан и обновлен для обеспечения точности и полноты. Если у вас есть веб-сайт для собственного бренда хранения, есть определенные фразы для поисковой оптимизации (SEO), которые становятся частью вашего повседневного словарного запаса. Если вы собираетесь потратить время, силы и деньги на создание и управление веб-сайтом, вы должны предпринять определенные шаги: 1) улучшить пользовательский Что такое SEO-позиционирование и почему это важно?
... тегия SEO позволит вам масштабировать позиции в Интернете по определенным запросам, и чем выше вы, тем больше посетителей у вас будет. Простой. Кроме того, имейте в виду, что если кто-то заходит на вашу страницу с помощью поиска, это потому, что вы действительно заинтересованы в том, что вы предлагаете, которые, скорее всего, являются потенциальными клиентами. SEO поможет вам продать или, по крайней мере, даст вам знать. SEO динамичен , он часто меняется. Поисковые системы Что мне могут сделать Tadis Marketing Services?
Что я могу сделать для вас? Помощь в качестве эксперта по социальным медиа, консультант, эксперт и практический. Тадис активно работает с социальными сетями, Linkedin, Twitter, Facebook и Instagram. Убедитесь, что вы выделяетесь в поисковых системах (SEO) Убедитесь, что вы выделяетесь своей целевой группой (SEO и SEA) Установить и реализовать стратегию социального бизнеса. Управление сообществом Мониторинг ваших социальных сетей Как загрузить SEO вашего интернет магазина за год
Привет множитель! Вы уже знаете, что при разработке веб-страницы вы должны учитывать SEO, чтобы улучшить позиционирование в поисковых системах, и что ваши клиенты находят вас легче. Мы много раз повторяли это, поэтому сегодня приводим практический пример . Что такое SEO?
Комментарии
Но как выглядит конвергенция, и как SEO и маркетологи могут позиционировать себя для того, что будет дальше на рынке?Но как выглядит конвергенция, и как SEO и маркетологи могут позиционировать себя для того, что будет дальше на рынке? Клиентская панель № 1: «Поиск как секретное оружие маркетинга» Поиск везде, поиск - это будущее, а поиск - новое секретное оружие отделов маркетинга. На этом занятии вы узнаете, как поиск, «сердце маркетинга», определяет маркетинговую стратегию, контент-стратегию и даже разработку новых продуктов. Затем мы поговорим о будущем поиска, чтобы Как вы можете не притворяться, что монтадито за 1 евро приносит вам такое же удовольствие, как и еда за 40 или 100 евро?
Как вы можете не притворяться, что монтадито за 1 евро приносит вам такое же удовольствие, как и еда за 40 или 100 евро? В SEO вы играете гораздо больше, чем расстройство желудка: на карту поставлена репутация вашего бизнеса и его возможное наказание в поисковых системах, которое может заставить вас исчезнуть с карты поиска и со всех продаж, которые могут быть генерировать. В этом Что такое SEOBox и как он работает?
Что такое SEOBox и как он работает? Представьте себе, что в вашем распоряжении есть совершенно разные испанские IP-адреса в полной безопасности, своего рода «удаленные рабы» (OMG, ха-ха), для имитации всех видов ситуаций и действий. Чтобы добиться этого, они создали микрокомпьютер, который необходимо подключить к сети и к свету, это так просто! Итак, как нам сообщить роботу Google, что такое наши изображения, чтобы он понимал, что эта страница предназначена для человека?
Итак, как нам сообщить роботу Google, что такое наши изображения, чтобы он понимал, что эта страница предназначена для человека? Три лучшие практики при работе с изображениями для SEO: Назовите файл Присвоение имени файлу изображения чего-то, что описывает то, что изображение, а не просто неясное число или группу букв. Если у вас есть несколько похожих изображений, используйте уникальный номер в конце имени. Некоторые графические программы позволят вам Руководство для начинающих, чтобы узнать о том, что такое SEO и как это работает?
Руководство для начинающих, чтобы узнать о том, что такое SEO и как это работает? Что такое SEO? Все знают, как важен SEO, это так важно для сайта, потому что нам нужна еда. SEO расшифровывается как поисковая оптимизация, с помощью которой вы легко улучшите видимость вашего сайта, не платя ни копейки. SEO - это органический метод, который используется Что такое сниппеты и как их оптимизировать для привлечения кликов?
Что такое сниппеты и как их оптимизировать для привлечения кликов? Какие действия на сайте и за пределами сайта для оптимизации сайта? Вы изучите важность качества контента, актуальность семантики и основные приемы SEO копирайтинга . Вы узнаете, как происходит SEO-активация на 360 °. После этого курса Seo Catania вам больше не нужно будет связываться с дорогими SEO-агентствами, чтобы получить совет о том, как создать сайт и использовать основные Кстати, как вы, блоггеры, знаете, что такое SEO?
Кстати, как вы, блоггеры, знаете, что такое SEO? Ну, SEO расшифровывается как поисковая оптимизация. Где SEO в форме техники, которая делается для создания статей в нашем блоге на первой странице Google с определенными ключевыми словами . Или сравнивать с реальным миром может быть похоже на то, как получить первую позицию в Сердце Адека, хахаха Некоторые блогеры в Medan все еще носят имя SEO, в том числе и я, да, слишком много способов, от простого до сложного, Вы должны думать как ваш клиент и спрашивать, что они будут искать в Интернете и как они это скажут?
Вы должны думать как ваш клиент и спрашивать, что они будут искать в Интернете и как они это скажут? Им понравится то, что они нашли? Приведет ли этот трафик к финансовой выгоде или будет соответствовать вашим другим бизнес-целям? Если ответ да, вы на правильном пути. Поиск по выбранному вами ключевому слову в основных поисковых системах также даст вам представление о том, выбрали ли вы подходящее ключевое слово. Это поможет вам понять, в чем заключается ваша конкуренция, насколько Что такое онлайн-бренд и как он может помочь посетителям целенаправленно и целенаправленно собирать потенциальных клиентов во время поездки к покупателю?
Что такое онлайн-бренд и как он может помочь посетителям целенаправленно и целенаправленно собирать потенциальных клиентов во время поездки к покупателю? Каков наилучший способ создать бренд с помощью современной поисковой оптимизации? Создание бренда или брендинг - это формирование нового бренда с безошибочным характером. Бренд должен иметь свою индивидуальность. Задачи управления брендом, также называемые управлением брендом или бренд-менеджментом, заключаются в представлении бренда на Чувствуете ли вы, что курс принес то, что он заявил, что это будет?
Чувствуете ли вы, что курс принес то, что он заявил, что это будет? Да, это так. Он содержал все, что было указано на странице / статье продаж (эта страница; см. Информацию ниже) для курса. 2) Что тебе понравилось меньше всего? Вероятно, МОДУЛЬ № 2, не из-за качества информации, но из-за КОЛИЧЕСТВА информации. Возможно, его можно разбить на два или три модуля? Просто предложение. 3) Что вам понравилось Хотите узнать, как и как использовать инструмент Majestic Site Explorer и что именно он делает?
Хотите узнать, как и как использовать инструмент Majestic Site Explorer и что именно он делает? Это примерно 5 минут прохождения Site Explorer - одного из основных инструментов Majestic, разработанного с учетом потребностей пользователя. Посмотрев это видео, вы поймете, как можно более подробно проанализировать свой веб-сайт и информацию о его профилях обратных ссылок. Это краткое изложение, и оно дает вам отличный метод анализа ссылок на ваш сайт и с него; и самое главное, как это может быть
Что такое теги Open Graph?
Вы когда-нибудь делились веб-страницей в Facebook или Twitter и заметили, что отсутствует эскиз предварительного просмотра, появляется несвязанное изображение или отображается неправильное описание?
Хотите узнать больше?
Вы встроили теги Open Graph в свои собственные темы?
Вы заметили, что во многих результатах поиска страницы с популярных веб-сайтов часто отображаются выше, хотя есть страницы с большим «PageRank»?
SEO алгоритм Google в двух словах Вы когда-нибудь задумывались, как работает алгоритм Google SEO?
Если вы не задумывались, почему бы и нет?
Что я могу сделать для вас?
Что такое SEO?
Но как выглядит конвергенция, и как SEO и маркетологи могут позиционировать себя для того, что будет дальше на рынке?
