Краткое руководство по внедрению разметки Schema в WordPress
Опубликовано: 2020-05-13Вы запустили веб-сайт с красивым внешним видом и отличными функциями. Так что же дальше? Сделайте его оптимизированным для SEO, чтобы ранжировать его контент в поисковой системе, чтобы привлечь органический трафик. Это может показаться немного сложной задачей, так как есть много технических элементов, которые вы должны понимать, хотя их и нелегко усвоить. Но если вы серьезно относитесь к SEO своего веб-сайта, вам необходимо иметь целостное представление обо всех темах, связанных с SEO. Одной из таких тем является реализация разметки схемы.
Scheme Markup и структурированные данные уже много лет играют важную роль в SEO, и кажется, что основные поисковые системы, такие как Google, Bing, Yahoo и т. д., рекомендуют их. Но что такое разметка схемы и как она влияет на процесс SEO вашего сайта? Прочитав эту статью, вы точно будете знать, что это такое, как это влияет на SEO и поисковые системы, как правильно это реализовать, чтобы получить лучший рейтинг.
Что такое структурированные данные и разметка схемы?
Структурированные данные — это информационный формат, понятный всем. Он содержит различные элементы, которые позволяют поисковым системам легко определить, о чем страница.
В то время как Schema Markup — это, по сути, код, который помещает ваш сайт в поисковую систему. Его основная цель — сделать поисковую систему более информативной для пользователей.
Его можно добавить на вашу веб-страницу в виде кода для определения различных элементов, таких как даты, изображения, часы работы и многое другое.
Преимущества Schema Markup в SEO
Когда дело доходит до SEO, структурированные данные, представленные в разметке схемы, отображают результаты поисковой системы более подробно и информативно. Это не только делает веб-сайт более удобным для SEO, но также может отображать расширенные результаты для привлечения большего трафика на веб-сайт.
Различные типы расширенных результатов, отображаемых в поисковой системе
Ранее мы обсуждали преимущества разметки схемы для отображения расширенных результатов в поисковой системе. Вот некоторые из расширенных результатов, которые будут отображаться в поисковой системе, если на вашем веб-сайте реализована разметка схемы.
Расширенные фрагменты
Расширенные сниппеты — это те результаты, которые содержат дополнительную информацию, такую как рейтинги, обзоры, изображения и многое другое, при отображении в результатах поиска. Это поможет пользователям узнать больше о странице/публикации и даст больше шансов на переход по ссылке.
Богатые карты
Рич-карты — это новый формат отображения результата в поисковых системах. Как и в расширенных сниппетах, в расширенных карточках используется разметка схемы для отображения результатов поиска в более привлекательном и визуально привлекательном формате. Он ориентирован на обеспечение лучшего мобильного поиска и предлагает сенсорные возможности прокрутки.
График знаний
Граф знаний — это база знаний, используемая в поисковых системах для еще более подробной информации за счет отображения изображений, местоположения, контактной информации, описания, профилей в социальных сетях.
Избранный фрагмент
Featured Snippets — это формат поисковой системы, предоставляющий пользователям прямые ответы на их вопросы. Они не содержат никакой дополнительной информации, такой как расширенные фрагменты, но предоставляют краткий ответ пользователю без необходимости нажимать на конкретные результаты.
Как я могу начать применять разметку Schema на своей веб-странице?
Вы можете реализовать Schema Markup различными способами. Вот некоторые из них ниже:
Добавить схему с использованием микроданных:
Микроданные — это набор тегов, введенных в HTML5 с целью предоставить простой способ аннотирования HTML-элементов с помощью машиночитаемых тегов. Разметку довольно легко использовать для новичков. Но недостатком является то, что вам нужно будет размечать каждый элемент отдельно в теле веб-страницы, что может привести к беспорядку.
Но прежде чем мы начнем, вам нужно выяснить, какой тип элемента определяет ваша веб-страница. Это поможет вам определить, какой тип тегов вам нужно использовать.
Здесь мы предположим, что у вас есть интернет-магазин под названием HashThemes, и его домашняя страница может выглядеть так:
<дел> <h1>HashThemes</h1> <h2>Лучший продавец тем WordPress!</h2> <p>Адрес:</p> <p>Дхобигхат</p> <p>Лалитпур, Непал</p> <p>Электронная почта: [email protected]</p> <p><a href="https://hashthemes.com/wordpress-theme/">Нажмите здесь, чтобы просмотреть наши лучшие темы WordPress!</a></p> <p>Мы открыты: </p> <p>Пн-Пт с 10:00 до 18:00</p> </div>
Во-первых, вам нужно будет определить разделы веб-страницы. Это все, что находится между тегами <div>. Итак, добавляем
<область элемента div>
Добавляя тег области элемента, мы можем указать HTML, содержащийся в блоке между тегами <div>, для ссылки на определенные элементы.
Теперь мы будем использовать атрибут типа элемента, чтобы указать тип элементов на вашей странице.
<div itemscope itemtype = "http://schema.org/wordpressthemes">
Теперь перейдите на домашнюю страницу и пометьте ту часть веб-страницы, которая имеет название вашего веб-сайта. Здесь мы добавим тег реквизита элемента, который помечает свойства элементов.
<h1 itemprop="name">HashThemes</h1>
Идите вперед и добавьте теги на остальные страницы.
Иногда вам может понадобиться пометить не всю строку, а часть строки, где свойство упоминается, как в строке адреса электронной почты.
<h2 itemprop="description">Лучший продавец тем WordPress!</h2> <p>Адрес:</p> <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <p itemprop="streetAddress">Дхобигхат</p> <p itemprop="addressLocality">Лалитпур, Непал</p></span> <p>Электронная почта: <span itemprop="email">[email protected]</span></p> <p><a itemprop="store" href="https://hashthemes.com/wordpress-theme/">Нажмите здесь, чтобы просмотреть наши лучшие темы WordPress!</a></p> <p>Мы открыты:</p> <p itemprop="openingHours">пн-пт с 10:00 до 18:00</p> </div>
Вы также можете использовать Помощник по разметке структурированных данных Google, чтобы упростить разметку веб-страниц.
Добавление разметки с помощью RDFa
Структура описания ресурсов в атрибутах (RDFa) — это расширение HTML5, предназначенное для помощи в разметке структурированных данных. Это рекомендация W3C, и ее можно использовать для объединения нескольких словарей структурированных данных для добавления структурированных данных, выходящих за рамки Schema.org.
Если вы знаете, как использовать разметку микроданных с Schema.org, RDFa ничем не будет отличаться. Он интегрирует существующий HTML в тело контента.
Давайте используем приведенный выше сайт электронной коммерции в качестве примера:
<дел> <h1>HashThemes</h1> <h2>Лучший продавец тем WordPress!</h2> <p>Адрес:</p> <p>Дхобигхат</p> <p>Лалитпур, Непал</p> <p>Электронная почта: [email protected]</p> <p><a href="https://hashthemes.com/wordpress-theme/">Нажмите здесь, чтобы просмотреть наши лучшие темы WordPress!</a></p> <p>Мы открыты: </p> <p>Пн-Пт с 10:00 до 18:00</p> </div>
Здесь мы укажем словарь тегов вместе с URL-адресом http://schema.org/. Тип страницы определяется типом тега.
<div vocab="http://schema.org/" typeof="store">
Теперь мы сообщили поисковым системам, о чем страница. Теперь пришло время определить свойства с помощью атрибутов свойств.
<h1 property="name">HashThemes</h1>
Тип атрибута также можно использовать для определения свойства, например, для определения PostalAddress.
<div property="address" typeof="Почтовый адрес">
Тип атрибута эквивалентен типу элемента в микроданных, а свойство эквивалентно атрибуту реквизита элемента.
<h2 property="description">Лучший продавец тем WordPress!</h2> <p>Адрес:</p> <div property="address" typeof="Почтовый адрес"> <p property="streetAddress">Дхобигхат</p> <p property="addressLocality">Лалитпур, Непал</p> </div> <p>Электронная почта: <span property="email">[email protected]</span></p> <p><a property="store" href="https://hashthemes.com/wordpress-theme/">Нажмите здесь, чтобы просмотреть наши лучшие темы WordPress!</a></p> <p>Мы открыты:</p> <p property="openingHours">Пн-Пт с 10:00 до 18:00</p> </div>
Разметка веб-страницы с использованием JSON-LD
Нотация объектов JavaScript для связанных данных (JSON-LD) — это кодирование связанных данных с использованием JSON. Это рекомендация W3C, которая была добавлена в качестве рекомендуемого формата для Schema.org в 2013 году.
Основное преимущество использования JSON-LD для разметки схемы заключается в том, что он ограничивает наиболее релевантные коды заголовком страницы и удерживает дополнительный тег за пределами основной части вашего контента. Это делает коды чище и легче для чтения.
Нотация JSON – LD содержится внутри блока скрипта. Итак, чтобы начать процесс, мы вводим строку сценария, чтобы показать, что мы используем формат JSON-LD:
<script type="application/ld+json">
Код JSON-LD также должен быть заключен в фигурные скобки (фигурные скобки), иначе он не будет применяться к странице или анализироваться поисковыми системами. Это известно как структура объекта в Javascript. Итак, схема кода будет выглядеть так:
<script type="application/ld+json"> код идет сюда </скрипт>
Теперь вам нужно будет использовать контекст, определенный словарем, для данных, связанных с Schema.org.
Запятая также должна идти для каждой строки кода.
"@context": "http://schema.org",
Для других типов формата schema.org вам нужно будет определить тип контента, который вы собираетесь размечать. Это эквивалентно атрибуту типа изображения Microdata и типу атрибута RDFa.
Мы будем использовать простой веб-сайт, который мы упомянули выше в качестве примера:
"@type": "Магазин",
Теперь определяем название магазина и его описание. Если вы используете микроданные или RDFa для определения этих элементов, они должны быть представлены на самой домашней странице веб-сайта. Но в случае JSON-LD вы можете определять элементы без необходимости присутствия на странице.
"имя": "HashThemes", "description": "Лучший продавец тем WordPress!",
Теперь пришло время определить адрес. Адрес будет иметь дополнительное, но более точное свойство, такое как почтовый адрес и местонахождение. Итак, мы собираемся поместить их в фигурную скобку.
"адрес": {
"@type": "Почтовый адрес",
"addressLocality": "Лалитпур, Непал",
"streetAddress": "Дхобигхат",
},Теперь разместим часы работы магазина. Часы работы будем хранить в массиве, а дни указывать двухбуквенными комбинациями. Кроме того, время должно быть 24-часовым.
"часы работы": [ "Пн-Пт 10:00-18:00" ],
Наконец, мы собираемся добавить адрес электронной почты и URL-адрес темы. Оба довольно прямолинейны.
"электронная почта": "[email protected]" "магазин": "https://hashthemes.com/wordpress-theme/" И в итоге наша разметка будет выглядеть так: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Магазин", "имя": "HashThemes", "description": "Лучший продавец тем WordPress!", "адрес": { "@type": "Почтовый адрес", "addressLocality": "Лалитпур, Непал", "streetAddress": "Дхобигхат", }, "часы работы": [ "Пн-Пт 10:00-18:00" ], "электронная почта": "[email protected]" "магазин": "https://hashthemes.com/wordpress-theme/" } </скрипт>
Вы можете использовать Инструмент проверки структурированных данных Google, чтобы проверить синтаксис на наличие ошибок.
Как реализовать разметку Schema на вашем сайте WordPress?
Реализация Schema Markup может быть выполнена по-разному. Вы можете следовать им, чтобы сделать свой сайт SEO-дружественным и улучшить рейтинг вашего контента в поисковой системе. Вот некоторые из них:
Выбор темы WordPress со встроенной интеграцией с разметкой схемы:
Как вы знаете, WordPress — самая популярная платформа, состоящая из большого количества шаблонов для быстрого создания привлекательных веб-сайтов. Однако есть лишь несколько тем, которые интегрированы с кодами Schema Mark Up. Итак, если вы выбираете тему WordPress для запуска своего веб-сайта или изменения существующего веб-сайта, обязательно проверьте, содержит ли тема хотя бы общие функции схемы. Общая схема включает в себя верхний и нижний колонтитулы и параметры навигации, позволяющие поисковым системам понять структуру вашего веб-сайта.
Разметка других данных схемы с помощью плагинов WordPress
Как упоминалось выше, вам может быть трудно найти тему WordPress с полной интеграцией с кодами Schema MarkUp. Таким образом, в качестве альтернативы вы можете выбрать плагины WordPress, доступные для добавления функции схемы на ваш сайт. Yoast SEO и Schema Pro — это несколько плагинов, которые помогут реализовать Schema MarkUp на вашем сайте.
Что нужно помнить при внедрении Schema MarkUps
Теперь, когда вы знаете, как реализовать разметку схемы на своем веб-сайте WordPress, вот несколько вещей, которые вы, возможно, захотите запомнить при внедрении разметки схемы:
Интеграция разметки Schema не может гарантировать хороший рейтинг
Сама по себе схема разметки не гарантирует хорошего ранжирования вашего веб-контента. Есть много других факторов, таких как авторитет контента, качество контента, анализ ключевых слов, релевантность и т. д., которые влияют на ранжирование. Итак, имейте в виду, что разметка схемы — это лишь один из факторов, который может помочь вам повысить рейтинг вашего контента.
Разметка схемы требует времени, чтобы вступить в силу
Если вы думаете, что разметка схемы вступит в силу немедленно, то вы ошибаетесь. Потребуются месяцы, чтобы увидеть расширенный фрагмент в результатах поиска.
Проверьте разметку схемы, заданную темой WordPress, и используйте плагин для соответствующего улучшения функциональности.
Большинство тем WordPress используют только общие схемы, такие как верхний и нижний колонтитулы, навигация. Хотя может быть какой-то шаблон с другими функциями реализации, связанными со схемой. Вы можете перейти к инструменту тестирования структурированных данных Google, чтобы проанализировать реализацию схемы вашего веб-сайта и выбрать соответствующий плагин.