- Что такое теги 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 в свои собственные темы? Расскажите нам об этом в разделе комментариев ниже!
Похожие
Что такое каталог сайтов?В каталоге веб-сайтов собраны все кампании, связанные со ссылками, зарегистрированными в Как работает релевантность eBay
... исковая система Cassini на eBay? Кассини и актуальность eBay! Вот полное руководство по пониманию того, как работает eBay Relevance и что это такое. У вас проблемы с поисковой системой eBay? Ваши списки не видны в первых местах eBay? Вы когда-нибудь слышали о поисковой системе eBay? Имеет отношение к eBay? или Кассини? Вы один из тех продавцов eBay, которые используют eBay для продажи своих продуктов, но они часто сталкиваются с суровой реальностью Как оптимизировать Flash для SEO
Flash предназначен для привлечения внимания посетителей сайта, и, вероятно, это так. Но настоящий вопрос в том, привлекает ли это внимание поисковых систем? Flash используется для слайд-шоу и flash-фильмов на технологических сайтах; а также для демонстрации мультимедийного контента на художественных и развлекательных сайтах. Веб-сайтам нужна видимость поиска, чтобы быть популярными в Интернете, и флеш-сайты или флеш-элементы на веб-сайте не могли быть прочитаны поисковыми системами, пока Как работает поисковая система?
Хотя вы всегда должны создавать контент сайта, ориентированный на ваших клиентов, а не на поисковые системы, важно понимать, как работает поисковая система. Как только вы это знаете, вы можете перейти к следующему шагу, который включает в себя элементы, которые Как правильно оптимизировать ваш одностраничный сайт?
Одностраничный веб-сайт, также называемый прокручивающимся веб-сайтом Parallax, стал горячей и увлекательной тенденцией веб-дизайна в 2016 году. Сайт состоит из длинной единой страницы для посетителей, где все содержимое существует. Когда вы нажимаете на навигацию по сайту, вы Что такое Google SandBox Effect?
Как вы думаете, вы задаетесь вопросом об этой проблеме: что такое эффект песочницы Yahoo и Google? Вы, наверное, слышали об этом. Эффект «песочницы» часто является ограничением для веб-сайтов. Фактом может быть то, что новые сайты, как правило, не получают рейтинга, даже если они содержат хороший контент и SEO. Это потому, что на эти сайты влияет то, что называется, потому что период времени песочницы Google влияет. Лучшие тренды контент-маркетинга на 2018–2019 гг.
... инг? Топ 10 тенденций контент-маркетинга Если вы новичок в этом, позвольте мне познакомить вас с тем, что на самом деле является рекламой. Это простое решение, потому что, взглянув на сам заголовок, вы могли подумать. Как контент-маркетинг строит ваш бизнес? Показ контента - это всего лишь метод для создания сайтов, который привлекает более час пик. Это движение в долгосрочной перспективе не стесняется использовать перспективы, которые являются SEO для начинающих: как оптимизировать контент для поиска
Если вы новичок в цифровом маркетинге, поисковая оптимизация (SEO) может показаться немного загадочной. Хотя это и правда, есть много правил, многие из которых, кажется, часто меняются и не являются полностью прозрачными, но есть некоторые простые основы SEO, которые каждый может Что такое линкбилдинг?
... тегий или более творческих средств. Почему обратные ссылки важны? Обратные ссылки представляют собой ссылку с одного сайта [A] на другой сайт [B]. Searchengines интерпретирует обратную ссылку как рекомендацию. В этом примере веб-сайт [A] рекомендует веб-сайт [B]. Эта рекомендация является для поисковых систем важным сигналом для оценки релевантности веб-сайта по определенной теме. Популярность домена является сильно взвешенным фактором в факторах Что такое SEO и зачем оно вам?
Поисковая оптимизация (SEO) - это процесс оптимизации сайта, чтобы он хорошо работал в обычном поиске. Высокий рейтинг поисковых запросов, известных как ключевые слова, увеличивает видимость сайта и приводит к увеличению числа посетителей реального сайта. Проще говоря, SEO позволит вам связаться с теми, кто ищет ваш продукт или услугу, и поможет превратить их в клиентов. Как владелец бизнеса, вы должны иметь план для продвижения вашего бизнеса и привлечения новых клиентов. Что такое тег заголовка и как оптимизировать заголовок для SEO
Источник изображения: https://www.flickr.com/photos/manoftaste-de/16210559169/ Тег заголовка чаще всего используется для присвоения имени документу или веб-странице. Мало того, что они дают читателю краткое представление о том, что страница будет содержать, теги заголовка также появляются в поисковых системах, таких как Google, на страницах результатов поиска. Теги заголовков
Комментарии
Что такое доступный контент, что такое статистика GA (Google Analytics), что дает SEO аудит?Что такое доступный контент, что такое статистика GA (Google Analytics), что дает SEO аудит? кто конкуренты ? Что они предлагают, каким образом, по каким ключевым словам они позиционируются, каков имидж их бренда? кто цели ? Кто постоянные читатели, кого вы хотите привлечь, каковы основные / второстепенные / третичные цели? каковы возможности SEO? Это все о восприятии Реализация стратегии, основанной Что это такое, что не так важно, как вы думаете, что вы хотите сделать:?
Что это такое, что не так важно, как вы думаете, что вы хотите сделать:? RjRμSGJSDZHS †? РоРсР-РіРѕРґР °? РР »Рё РіРѕРґС <? Прибалтика, Россия, Россия, Германия, Россия, Германия, Россия, Россия, Россия » Свернуть, Россия, Россия, Россия, Россия, Россия, Германия, Россия, Россия, Россия Роуд, Ро, Рио-де-Рос, РоС <С .... Причал, Россия, Россия, Германия, Франция, Франция, Франция, Франция, Франция, Франция, Германия » <С ... ,Ѓ, Р ,ЃёЃμ, ,μμμμμμμμμμμРРРРРРРРμ »РРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРμμμμμμμμμμμμμμμμμμμμμμμμμμ Например, задайте им следующие вопросы: смогли ли вы увидеть, что такое веб-сайт за пять секунд, вы сразу же смогли найти то, что искали, что вас больше всего беспокоило в нашем веб-сайте?
Например, задайте им следующие вопросы: смогли ли вы увидеть, что такое веб-сайт за пять секунд, вы сразу же смогли найти то, что искали, что вас больше всего беспокоило в нашем веб-сайте? Удачи В конце концов, если они не могут быть обеспокоены перепроверкой своего контента на предмет грамматики, как они могут знать, что компания перепроверяет их продукты?
В конце концов, если они не могут быть обеспокоены перепроверкой своего контента на предмет грамматики, как они могут знать, что компания перепроверяет их продукты? По этой причине проверка грамматики может означать доллары и продажи для любой компании, поэтому каждый фрагмент письменного контента должен тщательно обрабатываться автором. Если вы владелец малого бизнеса, который обеспокоен ранжированием страниц вашего сайта на SEO, грамматика особенно важна. Google фактически накажет Посетители могут быть впечатлены тем, что вы представляете, но могут ли они поверить в то, что читают?
Посетители могут быть впечатлены тем, что вы представляете, но могут ли они поверить в то, что читают? Поэтому при создании контента убедитесь, что вы используете данные из надежных источников. Это поможет вам завоевать доверие посетителей вашего блога. Кроме того, небольшое исследование может также использоваться, чтобы выяснить, какая информация наиболее востребована в теме вашего блога. Например, вы ведете блог здоровья, что такое информация Помните, как мы только что сказали, что для адаптивных сайтов мало что изменилось с технической точки зрения?
Помните, как мы только что сказали, что для адаптивных сайтов мало что изменилось с технической точки зрения? Есть одно серьезное исключение. В рамках отдельной инициативы Google будет увеличивать вес времени загрузки страницы в своих алгоритмах ранжирования. Июльское обновление скорости страницы 2018 года и его значение для SEO Google публично признал, что скорость страницы является фактором ранжирования SEO с 2016 года, по крайней мере, для сканера настольных компьютеров. Сколько из нас задается вопросом, что если SO «нормальный», потому что, как я писал ранее, на самом деле нет ничего, что могло бы помешать этим двоим любить, кроме его инвалидности, верно?
Сколько из нас задается вопросом, что если SO «нормальный», потому что, как я писал ранее, на самом деле нет ничего, что могло бы помешать этим двоим любить, кроме его инвалидности, верно? Писатель также добился того, чтобы дать зрителям романтическую сцену, которую они требуют, не жертвуя при этом логикой. Ближе к концу драмы и когда YS только что смирилась с ее чувствами к SO, мы не можем заставить их внезапно выйти на такие свидания, не так ли? Тем не менее, я надеюсь, что шоу даст нам реальное Итак, в этой статье: что такое видео SEO и как оно работает?
Итак, в этой статье: что такое видео SEO и как оно работает? Если ваша компания активно пытается добиться того, чтобы веб-сайт получил более высокие оценки в Google, то ваше видео, безусловно, не следует упускать из виду. Оптимизация видео способствует этому. Надеюсь, должно быть ясно, что просто загрузить видео недостаточно для лучшего рейтинга в Google. Что такое видео SEO? Начнем с самого начала. SEO - это аббревиатура от английского термина Search Как еще вы узнали бы, что то, что они делают, действительно работает?
Как еще вы узнали бы, что то, что они делают, действительно работает? Даже если трафик и количество конверсий снизятся, хорошее SEO-агентство проинформирует вас и предоставит план игры о том, как они планируют решить эту проблему. Запрос еженедельных обновлений с помощью короткого телефонного звонка или хорошо документированного электронного письма - идеальный вариант. Кроме того, убедитесь, что отчетность на конец месяца является тщательной и выполняется лично или посредством конференц-связи Мы всегда надеемся, что вы, ребята, расскажете нам, как улучшить работу, и дадите нам отзывы о наших инструментах, поэтому расскажите, что вы думаете о новом инструменте ранжирования SEO?
Мы всегда надеемся, что вы, ребята, расскажете нам, как улучшить работу, и дадите нам отзывы о наших инструментах, поэтому расскажите, что вы думаете о новом инструменте ранжирования SEO? Вам нравится новая версия, и как вы относитесь ко всем изменениям, которые мы внесли? Также следите за обновлениями, новая модель ценообразования появится раньше, чем вы думаете. Завтра мы позволим вам прочитать все об этом. Итак, как франшизы могут стать лучше в SEO, и как SEO-консультанты могут лучше обслуживать франшизы?
Итак, как франшизы могут стать лучше в SEO, и как SEO-консультанты могут лучше обслуживать франшизы? Несколько скромных предложений: Начните с обучения корпоративного. Прежде чем вы начнете разговаривать с местными франчайзи, ваши корпоративные клиенты / партнеры должны быть осведомлены о том, как работает SEO, и о типах взаимодействий, которые потребуются им для облегчения общения с франчайзи. Создавайте простые коммуникационные материалы, которыми они могут поделиться
Что такое теги Open Graph?
Вы когда-нибудь делились веб-страницей в Facebook или Twitter и заметили, что отсутствует эскиз предварительного просмотра, появляется несвязанное изображение или отображается неправильное описание?
Хотите узнать больше?
Вы встроили теги Open Graph в свои собственные темы?
Исковая система Cassini на eBay?
У вас проблемы с поисковой системой eBay?
Ваши списки не видны в первых местах eBay?
Вы когда-нибудь слышали о поисковой системе eBay?
Имеет отношение к eBay?
Или Кассини?
