Как создать Rich Snippets для Shopify, Woocommerce и Bigcommerce

1. Понимание поисковых систем и богатых фрагментов
2. Shopify - Создание Rich Snippets
3. Как вручную ввести богатый фрагмент кода
4. WooCommerce как плагин электронной коммерции
5. WooCommerce Создание Rich Snippets
6. Magento SEO и богатые фрагменты кода
7. Назад к вам

Есть много вариантов электронной коммерции, если вы хотите создать личный интернет-магазин. На самом деле их так много, что может быть трудно выбрать один; Ниже приводится список наиболее часто используемых и рекомендуемых платформ на рынке.

Однако более важным, чем фактическая платформа, является то, как вы используете доступные веб-инструменты при настройке своего сайта. Мы рассмотрим полезность богатых фрагментов и их важность для поисковых систем.

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

Здесь вы ознакомитесь с важной техникой, которая поможет вам получить видимость в Интернете на любой из 4 лучших платформ электронной коммерции, доступных сегодня:

1. 1. 1. Shopify
      2. WooCommerce
      3. BigCommerce
      4. Magento

В чем же секрет? Как вы настраиваете сайт с помощью этих инструментов и заставляете людей выбирать ваш сайт среди всех других доступных вариантов? Для этого мы возьмем очень короткий побочный квест в поисковик.

Понимание поисковых систем и богатых фрагментов

Поисковые системы, для которых Google является практически единственной игрой в городе, ищут неограниченные данные, которые населяют киберпространство для определенных атрибутов. Затем сайты, которые он находит, упорядочены по качеству и количеству этих атрибутов. Все это описано общий термин поисковой оптимизации (SEO).

Подумайте об этом: этот порядок входит в страницы; Разве не разумно, чтобы веб-сайты на первых нескольких страницах получали больше всего трафика? Оказывается, вы правы - сайты, которые появляются на первой странице и в первых нескольких местах, получают наибольшее количество трафика от FAR.

Rich Snippets - это просто мощный атрибут, который помогает поисковым системам выгодно смотреть на ваш сайт. Они представляют собой фрагменты информации о выборе того, что предлагает ваш магазин, написаны и правильно структурированы, чтобы поисковая система могла их найти и оценить. Это также привлекает внимание читателей-людей, которые видят ваш фрагмент и нажимают на него больше, чем на других сайтах; это действие поднимает вас еще больше в рейтинге. Смотрите здесь для более широкого обзор добавления богатых фрагментов в WordPress.

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

Shopify - Создание Rich Snippets

Shopify это один из самых популярных магазинов электронной коммерции, с полмиллиона претендентов, которые генерируют внушительные 152 миллиона долларов в год, с общим доходом с 2004 по 2017 год в размере 40 миллиардов долларов. Штаб-квартира компании находится в Канаде и известна простотой ее интерфейса, что делает ее отличным стартовым программным обеспечением для новых владельцев интернет-магазинов.

Чтобы создать многофункциональные фрагменты, которые так функциональны для SEO, вы должны сначала убедиться, что вы используете поддерживаемую тему для своего магазина Shopify. В частности, ваша тема должна использовать «разметку структурированных данных». Если ваша тема не имеет этой функции, вы можете найти похожую тему с этим атрибутом - есть тысячи вариантов. Быть уверенным:

1. 1. Проверьте описание темы, используя «CTRL + F» на вашем компьютере. Введите «разметку структурированных данных» в поле запроса - если она существует, она будет выделена желтым цветом.
   2. Скопируйте и вставьте URL-адрес страницы вашего продукта Shopify в Инструмент тестирования структурированных данных Google здесь , Если есть проблема, вы получите ошибки и предупреждения, а это значит, что вы можете либо исправить их самостоятельно, нанять разработчика, знакомого с платформой Shopify, либо получить другой готовый шаблон с нужными вам разметками.

Как вручную ввести богатый фрагмент кода

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

Вы можете скопировать и вставить это в любом месте шаблона страницы продукта:

{% assign current_variant = product.selected_or_first_available_variant%}

<div id = ”richsnippet”>

<div itemscope itemtype = ”http://schema.org/Product”>

<meta itemprop = ”url” content = ”{{shop.url}} {{product.url}}»>

<meta itemprop = ”image” content = ”{{product.featured_image.src | img_url: 'grande'}} ”>

<meta itemprop = ”name” content = »{{product.title | бежать}} ”>

<meta itemprop = ”description” content = »{{product.description | strip_html}} ”>

{% if product.vendor%} <meta itemprop = ”brand” content = ”{{product.vendor}}»> {% endif%}

<div itemprop = ”offer” itemscope itemtype = ”http://schema.org/Offer”>

<meta itemprop = ”priceCurrency” content = ”{{shop.currency}}»>

<meta itemprop = ”price” content = ”{{current_variant.price | money_without_currency}} ”>

<link itemprop = ”Availability” href = ”http://schema.org/ndom% if product.available%} InStock {% else%} OutOfStock {% endif%}»>

<meta itemprop = ”seller” content = »{{shop.domain}}»>

</ DIV>

</ DIV>

</ DIV>

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

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

Одним из таких плагинов является YotPo; для получения более подробной информации о правильном рендеринге фрагментов кода в Shopify с помощью этого плагина, посмотреть здесь ,

WooCommerce как плагин электронной коммерции

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

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

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

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

Следующее, что вы можете сделать, чтобы повысить коэффициент конверсии, - это включить в ваш плагин расширенный фрагмент кода - единственное требование - WordPress используемая вами тема совместима с плагином WooCommerce. Даже если у вас уже есть контент, плагин может включить его в свой собственный дизайн.

WooCommerce Создание Rich Snippets

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

Читатель не увидит этот код; это включено в HTML. Однако читатель может увидеть важную дополнительную информацию, которая помогает вашей странице продукта выделиться среди всех других результатов поиска, что приводит к увеличению количества кликов для вас. Далее следует ручной метод создания расширенного фрагмента кода; Вы должны хорошо разбираться в HTML и CSS, чтобы быть уверенным в том, что введете неправильно:

В качестве примера текста HTML перед вводом расширенных микроданных фрагмента рассмотрим следующий код:

Элана Смитсон

<img src = ”elanasmithson.jpg” alt = ”Фотография Эланы Смитсон” />

Сетевой администратор

SERPStar Предприятия

Мейран, 15213

Питтсбург, Пенсильвания, 15213

(402) 123-4567

<a href=velopermailto:[email protected] книг> [email protected] </a>

Веб-сайт:

<a href= договор http://pinstor.us “> http://pinstor.us </a>

Далее вы увидите структуру микроданных так, как их увидит Google. При правильной формулировке он будет учитывать, какую позицию отображает ваш сайт на страницах результатов поиска (SERPS).

Вышеуказанные данные размещены в коде разметки, который предоставляет вложенные данные как жизнеспособные для рассмотрения фрагмента расширенного кода:

<div vocab = ”http://schema.org/” typeof = ”Person”>

<span property = ”name”> Сетевой администратор </ span>

<img src = ”elanasmithson.jpg” property = ”image” alt = ”Фотография Эланы Смитсон” />

<span property = ”jobTitle”> Администратор сети </ span>

<div property = ”address” typeof = ”PostalAddress”>

<span property = ”streetAddress”>

Мейран, 15213

Питтсбург, Пенсильвания, 15213

</ SPAN>

<span property = ”addressLocality”> Питтсбург </ span>,

<span property = ”addressRegion”> PA </ span>

<span property = ”postalCode”> 15213 </ span>

</ DIV>

<span property = ”telephone”> (402) 123-4567 </ span>

<a href=velopermailto:[email protected] двуспальная собственность = реализованная почта> [email protected] </a>

Веб-сайт

<a href= договорhttp://example.com двуспальная собственность=управляемая сложность> testing.com </a>

</ DIV>

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

Эта ведущая торговая платформа для электронной коммерции находится в Остине, штат Техас, и, хотя ее относительно недавнее воплощение (2015 год) является относительно новым, на конец 2017 года она обслуживает более 95 000 интернет-магазинов. Это платный менеджер корзины покупок, хотя есть испытательный срок, который позволяет оценить его успех.

Хотя BigCommerce менее устойчив, чем Shopify, он занимает своего рода золотую середину между первым и WordPress Плагин WooCommerce. Вы можете создать магазин продуктов с нуля с помощью BigCommerce. С момента своего создания более 9 миллиардов долларов транзакций, многие владельцы магазинов, как и вы, достигают больших успехов.

Огромное преимущество, которое BigCommerce имеет по сравнению с другими вариантами магазина, - это доступная справка - она ​​очень целенаправленная и не требует от вас поиска множества различных форумов, объединяющих информацию. Там на самом деле Университет BigCommerce; Это означает, что когда вы будете готовы реализовать фрагменты кода, вам будет легче начать работу. Фактически, многие функции, которые вам понадобятся, уже встроены в платформу.

Убедитесь, что у вас есть тема, которая поддерживает размещение расширенного фрагмента кода через структурированные данные. С темами BigCommerce, такими как основанные на трафарете и светокопиях, необходимые микроданные уже запрограммированы для чтения в виде богатых фрагментов; поэтому, для очень легкого времени, выберите один из их многочисленных вариантов, прежде чем строить свой магазин.

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

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

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

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

Magento SEO и богатые фрагменты кода

Magento имеет множество плагинов и приложений, которые могут послужить толчком для дальнейшей оптимизации вашей поисковой системы. Интерфейс также позволяет легко изменять HTML и CSS-код, что важно для ручного ввода фрагментов кода для распознавания поисковыми системами. Это признание приводит к тому, что привлекательная информация, которую вы хотите разместить под списком своей поисковой системы, - включая отмеченные отзывы, рейтинги, стоимость продукта и т. Д. - и, очевидно, приводит к повышению рейтинга кликов.

Если вы хотите вводить фрагменты кода в Magento вручную, это полное руководство из сертифицированного консультанта Magento показывает, как это сделать для всех схем разметки и классов данных.

Прежде чем углубиться в эту длинную статью, ознакомьтесь со следующим основным изменением разметки ранее существовавшего HTML-кода:

<body itemscope itemtype = ”http://schema.org/WebPage”>

...

<div itemprop = ”breadcrumb”>

<a href=velopercategory/books.html книг> Книги </a>>

<a href=velopercategory/books-literature.html книг> Фантастика </a>>

<a href=velopercategory/books-classicsabilities> Classics </a>

</ DIV>

<div itemscope itemtype = ”http://schema.org/Book”>

<img itemprop = ”image” src = ”the-mote-in-god's-eye.jpg” />

<span itemprop = ”name”> Мотыль в глазу Бога </ span> -

<link itemprop = ”bookFormat” href = ”http://schema.org/Paperback”> Книга в мягкой обложке для массового рынка

автор <a itemprop=veloperauthoruous href=veloper/author/robert_heinlein.html книгой> Роберт Хайнлайн </a>

<div itemprop = ”aggregateRating» itemscope itemtype = ”http://schema.org/AggregateRating”>

<span itemprop = ”ratingValue”> 4 </ span> звезды -

<span itemprop = ”reviewCount»> 3077 </ span> отзывов

</ DIV>

<div itemprop = ”offer” itemscope itemtype = ”http://schema.org/Offer”>

Цена: <span itemprop = ”цена”> $ 8.99 </ span>

<meta itemprop = ”priceCurrency” content = ”USD” />

<link itemprop = ”Availability” href = ”http://schema.org/InStock”> В наличии

</ DIV>

Информацию о различных классах можно найти на schema.org, которая является организацией, которая определяет их для веб-пользователей. Ваш начальный код должен быть расположен внутри класса «div», чтобы поисковые системы считывали все внутри как топливо для рендеринга фрагментов кода.

И наконец, если вы не являетесь опытным пользователем платформы электронной коммерции Magento, вы можете просто использовать Rich Snippet Suite для питания своего интернет-магазина Magento. Это расширение, которое содержит несколько разметок, которые облегчают рендеринг расширенного фрагмента кода. После добавления этот пакет будет обрабатывать код для каждого из ваших продуктов. Он постоянно обновляется и совершенствуется, поэтому ожидайте, что будет доступно больше функций, пока он продолжает получать поддержку от пользователей Magento.

Назад к вам

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

Чтобы подвести итог тому, что мы рассмотрели в этой статье, вот оглавление:

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

Похожие

Комментарии