Как сделать микроразметку на сайте на вордпресс
Обновлено: 07.07.2024
Структурированные данные (Schema) — мощный инструмент, который оптимизаторы поисковых систем могут использовать для эффективного представления наиболее важной информации на наших веб-страницах поисковым системам. При эффективном применении ко всем релевантным объектам Schema-разметка предоставляет значительные возможности для повышения эффективности SEO веб-сайта, помогая поисковым системам лучше понимать его содержание.
В этом руководстве мы шаг за шагом разберем как добавить такую же разметку, которая показана на превью-изображении к этой статье.
Шаг 1: Создать FAQ Schema
Google использует структурированные данные в формате JSON-LD для отображения специальных функций в результатах поиска, поэтому мы будем использовать этот формат структурированных данных JSON-LD, чтобы создать разметку для часто задаваемых вопросов на нашей странице. Для этого нам потребуется сгенерировать код JSON-LD разметки. Я буду использовать этот инструмент для создания кода.
FAQ schema JSON-LD Generator
Все, что вам нужно сделать, это создать вопросы и ответы. Google отображает только 3 вопроса в схеме часто задаваемых вопросов и дает пользователям возможность расширять это количество, поэтому в идеале у вас должно быть до 7 вопросов.
Шаг 2: Добавить FAQ Schema на страницу в WordPress
Чтобы вставить сформированный код JSON-LD в заголовок конкретной страницы мы будем использовать плагин Header and Footer Scripts.
Плагин Header and Footer Scripts для WordPress
Теперь в это поле вам нужно будет вставить код JSON-LD, созданный инструментом, разобранным в предыдущем шаге.
Вставка JSON-LD кода в WordPress Запись
Готово! Мы успешно добавили код JSON-LD, который отображает схему часто задаваемых вопросов на нашей странице / публикации. Теперь следующий шаг — проверить код.
Шаг 3: Валидация FAQ Schema разметки
Шаг 4: Сообщите поисковикам об изменении на странице
Последнее, что вам нужно сделать — уведомить Google и Яндекс об изменениях на стрнаице.
Как добавить, настроить и эффективно пользоваться микроразметкой Open Graph на сайте ВордПресс? Об этом мой сегодняшний пост. Протокол Open Graph в WordPress позволит вашей веб-странице красиво отображаться в социальных сетях. Протокол позволяет контролировать и указывать какие данные (заголовок, описание и изображение) будут взяты при расшаривании ссылок в социальных сетях.
Всем известно, что основная часть материалов, которыми делятся люди в соцсетях, представлена в виде URL-адресов. И поэтому для разметки своего веб - ресурса важно использовать теги Open Graph. Они отвечают за то, как ваши материалы будут отображаться в социальных сетях.
Для начала, давайте посмотрим, как будет выглядеть опубликованная ссылка в соцсетях без микроразметки и с подключенным протоколом. Как говорится почувствуйте разницу.
Вот так например, поделились ссылкой на статью в Твиттер без Open Graph. Выглядит не очень. Мало кто кликнет по ссылке:
А здесь, вообще, соцсеть подтянула вместо изображения кнопку вверх. Иногда может подхватить рекламный баннер с боковой панели:
Ниже, как должен выглядеть репост в соцсетях.
Красивый репост в Facebook, статья с внедрённой разметкой Open Graph. Теги объясняют социальным сетям, какая информация содержится на странице. Правильно заполненные поля позволят сформировать привлекательный вид поста в ленте FB:
В Twitter поделились моей статьёй с микроразметкой для социальных сетей:
Управляйте просмотром вашего контента в социальных сетях. Кстати, для блогохостинга Google Blogger вот инструкция. Давайте постить в соцсети правильно и красиво.
Как подключить Open Graph в WordPress
В наши дни хорошее присутствие в социальных сетях так же важно, как и присутствие в поисковых системах. Хорошая новость заключается в том, что вы можете контролировать внешний вид своего сайта в социальных сетях с помощью SEO плагинов.
Давайте посмотрим подключение микроразметки соцсетей к WordPress с помощью плагина. Функция Open Graph реализована во всех популярных SEO-плагинах. Её надо только активировать и настроить.
Open Graph разработан Facebook для контроля текстово-графического анонса, который формируется при добавлении ссылки на ресурс в социальную сеть. С его помощью можно настроить изображение, которое должно появляться в превью, правильный заголовок, описание и ссылку.
Протокол Open Graph увеличивает привлекательность и видимость веб-страницы, размещенной в социальных сетях.
Интернет
Включить разметку Twitter Card и Open Graph на сайте WordPress можно с помощью известных SEO плагинов например, All in One SEO Pack, Yoast SEO или Rank Math.
Метаданные OpenGraph в Yoast SEO
Добавить метаданные OpenGraph в plagine Yoast SEO. Раздел - Социальные сети, вкладка Facebook. Активируйте, если вы хотите, чтобы FB и другие социальные сети отображали изображения и отрывок текста в предпросмотре, если кто-то поделится ссылкой на ваш сайт:
Включили и настройте главную страницу сайта/блога. Впишите Заголовок, описание и загрузите изображение, используемые в мета-тегах Open Graph на главной странице сайта. А также, настройте URL-адрес изображения по умолчанию. Если страницей или записью поделятся (shared) и они не содержат изображений, то тогда будет использоваться эта картинка. Например, в FB у меня главная страница нового блога выглядит так:
Далее, настройте Твиттер. Вкладка Twitter. Активируйте, если вы хотите, чтобы Twitter отображал изображения и отрывок текста в предпросмотре, если кто-то поделится ссылкой на ваш сайт:
Twitter использует метаданные OpenGraph как и Facebook, так что Заголовок, описание и изображение, будут браться из настроек FB. А для Pinterest также достаточно включить OpenGraph на вкладке Facebook. Здесь пока всё.
Микроразметка для социальных сетей в Rank Math SEO
Я использую этот многофункциональный плагин в блоге WordPress Mania и поэтому приведу его также в примере. В меню Rank Math - Заголовки и метаданные. OpenGraph миниатюра этот параметр позволяет установить картинку OpenGraph по умолчанию.
Если изображение для записи не установлено, то оно будет использоваться в качестве миниатюры по-умолчанию, при публикации на Facebook. Рекомендуемый размер изображения 1200 х 630 пикселей. Я использовал меньший размер:
Если вы захотите изменить эскиз OpenGraph в будущем, наведите указатель мыши на загруженную картинку. Вы заметите наложение на изображении букву X в углу. Щелкните X, чтобы удалить изображение, а затем выберите новое.
Идём дальше. Стоит также упомянуть All in One SEO Pack. Многие используют его для SEO оптимизации сайта WP.
Внедрение разметки Open Graph плагин All in One SEO Pack
All in One SEO Pack включает специальный модуль Social Meta (Социальные мета) который вы можете активировать.
В плагине All in One SEO Pack - раздел "Модули" активируйте модуль "Социальные мета". Модуль "Социальные мета" добавит социальные метаданные к вашему сайту WP для лучшей интеграции его с социальными сетями:
Затем надо настроить основные параметры, которые можно найти на странице Социальные мета. Заполните поля в разделах: настройки OpenGraph для главной страницы, изображений, а также используйте отдельные настройки для Facebook и Twitter. В данном плагине настроек поболее:
Используйте для подсказок вопросительный знак ?. Подведите курсор мышки к нему и получите помощь. Всё легко.
Коллеги, а теперь давайте перейдём к следующему полезному уроку. Как использовать/управлять OpenGraph для отдельной записи или страницы. Можно полностью контролировать публикацию в соцсети вашей статьи. В каждом приведённом плагине есть вкладка социальных настроек. Можно заполнить мета теги для Facebook и Twitter (заголовок, описание и установить любое изображение) в соответствии с содержанием материала.
Например, в Rank Math есть вкладка Соцсети. Предварительный просмотр в социальных сетях (Preview Snippet Editor). Здесь вы можете просматривать и редактировать миниатюру, заголовок и описание, которые будут отображаться, когда ваша статья будет опубликована в социальных сетях Твиттер и Facebook. Вот, так всё это выглядит в новом блочном редакторе Гутенберг для этого поста. Вкладка FB:
По умолчанию отображается установленное изображение записи, заголовок и описание для поисковых систем. Но я хочу использовать другую картинку для соцсетей. А также впишу новый заголовок и описание:
Загрузил новую картинку, нажав кнопку Add Image. В итоге: для FB другая картинка, заголовок и описание публикации:
Такую же операцию можно проделать и для Твиттер. Вкладка Twitter. Или использовать данные из вкладки Facebook.
Вкладки соцсетей для индивидуальных настроек метаданных, есть во всех рассмотренных плагинах. Действие одинаковые. В Yoast SEO, вкладка Социальные сети:
С микроданными для соцсетей вы можете полностью контролировать внешний вид публикации - заголовок, изображение, описание. И это круто! Конечно, не все готовы возиться с данным инструментом, как и я, тратить время на настройку социальных мета-тегов, но оно того стоит. Запись одна, а выглядит она в разных соцсетях по разному и это хорошо.
Дамы и господа, а вдруг вы не используете на своём сайте SEO плагины. Тогда читайте ниже:
Open Graph плагин WordPress
Использование Open Graph плагина WordPress, чтобы добавить микроданные для социальных сетей на сайт, самый безопасный и правильный метод. Установка без плагина - только для опытных пользователей. Поэтому, друзья, я не советую начинающим использовать различные коды разметки соцсетей найденные в интернете. Не рискуйте.
В заключение
Добавление метаданных Facebook Open Graph в WordPress - один из хороших способов привлечь больше посетителей/читателей на ваш веб-ресурс.
Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте микроданные для социальных сетей и будьте уверены, что ссылки на ваш сайт будут выглядеть супер привлекательно в любой social networks.
Расшаривание записью в социальные сети (ваши или пользовательские) могут дать дополнительный трафик на сайт WP. Главное: в соц-сетях важна визуальная привлекательность контента. И только так можно привлечь внимание пользователей при просмотре ленты новостей.
Надеюсь материал был полезен для вас. До новых встреч на страницах моего блога. Если, что то пропустил или где то есть ошибки, дайте знать в комментариях. Спасибо за внимание! Поделитесь постом и как раз проверьте мою разметку. Пока, пока!
Хотите знать, как добавить богатые фрагменты в WordPress, чтобы вы могли выделить свой сайт в Google и других поисковых системах?
Вы знаете, эти привлекательные детали, такие как звездочки обзора и изображения рецептов, которые действительно делают сайт великолепным в поисковой выдаче.
Больше не удивляйтесь – потому что в этом посте я собираюсь поделиться лучшими плагинами с расширенными фрагментами, которые вы можете использовать, чтобы добавить разметку схемы в WordPress и сделать ваш сайт попавшим в поисковую систему.
Хотя большинство людей говорят, что хотят добавить в WordPress расширенные фрагменты, расширенные фрагменты фактически являются результатом добавления чего-то еще, называемого структурированными данными или разметкой схемы. Эти два термина не на 100% одинаковы, но функционально они одинаковы для обычных пользователей, поэтому сейчас я буду называть все разметкой схемы.
Схема разметки – это скрытый язык кодирования, который сообщает поисковым системам дополнительный контекст о вашем контенте.
Как только Google получает эту информацию из разметки схемы, он использует ее, чтобы добавить расширенные фрагменты к содержанию вашего сайта WordPress в списках органического поиска – например, звездочки обзора.
Это, вероятно, ваш следующий вопрос:
Как добавить правильную разметку схемы в WordPress?
Легко – вы используете плагин разметки схемы / rich snippets, который является темой этого поста.
Все плагины с расширенными фрагментами ниже помогут вам легко добавить разметку схемы в WordPress. Однако они делают это по-разному, поэтому убедитесь, что вы выбрали тот вариант, который лучше всего соответствует вашим потребностям.
6 лучших плагинов для WordPress Schema / Rich Snippets
Schema Pro – это премиальный плагин для разметки схемы от Brainstorm Force, той же команды, которая стоит за популярной темой Astra, которую Daan использует для EasyThemePacks.
Лично это мой любимый плагин rich snippets, потому что он позволяет легко использовать разметку JSON-LD, которая является методом реализации, который рекомендует Google:
Используя разметку схемы JSON-LD, Schema Pro может помочь вам получить расширенные фрагменты, не требуя добавления какого-либо нового содержимого на ваш сайт. Как вы увидите в некоторых других плагинах с расширенными фрагментами, плагины довольно часто заставляют вас добавлять новый блок контента в интерфейс вашего сайта.
Помимо этого, Schema Pro также обычно имеет действительно гибкую реализацию, особенно если вы используете настраиваемые поля на своем сайте.
Хотя это не бесплатно, если вы серьезно относитесь к богатым фрагментам и разметке схемы, Schema Pro предоставляет вам максимальную гибкость, а также может автоматизировать разметку схемы на уровне, недоступном другим плагинам.
Цена: $ 59 или часть комплекта агентства Astra
2. WP Review Pro
Не позволяйте названию обмануть вас – WP Review Pro – это не просто плагин для обзора продуктов, хотя он, безусловно, позволяет вам делать это хорошо.
WP Review Pro на самом деле поддерживает 14 различных типов расширенных фрагментов, что позволяет получать расширенные фрагменты для таких вещей, как рестораны, рецепты, программные приложения и, о, да, обзоры продуктов.
Этот подход не обязательно лучше или хуже, чем Schema Pro – это просто то, что вы должны рассмотреть.
Чтобы контролировать внешний вид этого окна, вы можете выбрать один из 16 предопределенных дизайнов, которые выглядят довольно хорошо.
Помимо этой расширенной функциональности фрагментов, WP Review Pro также предлагает некоторые другие функции, более сфокусированные на рассмотрении, такие как:
Цена: $ 67
- Поддерживает 8 различных типов схем, включая обзоры, рецепты, продукты и многое другое.
- Позволяет настраивать типы схем для каждого поста
Если вам нужен бесплатный плагин, это лучший вариант, который я нашел.
Цена: бесплатно
4. Rich Snippets WordPress Плагин
Rich Snippets WordPress Plugin – самый популярный плагин разметки схемы на CodeCanyon, где он имеет более 1500 продаж.
После выбора типа разметки схемы, который вы хотите добавить, плагин Rich Snippets WordPress попытается связать часть вашего существующего контента с информацией о схеме. Для всего остального вам нужно будет ввести его вручную.
Хотя широта охвата велика, лично я нахожу интерфейс немного более трудоемким, чем большинство других плагинов, поэтому есть компромисс.
Цена: $ 67
5. WP Rich Snippets
Включает поддержку большинства популярных типов, включая обзоры, рецепты, организации и многое другое.
Помимо базовой премиум-версии, есть и другие премиум-надстройки, которые добавляют больше типов схем, а также обзоры пользователей и таблицы сравнения.
Несмотря на то, что WP Rich Snippets – хороший выбор, я думаю, что новые версии Schema Pro или WP Review Pro теперь предлагают более выгодную цену, поэтому WP Rich Snippets уже не так высоко в моем списке, как это было раньше.
Цена: $ 69
6. WordProof
WordProof помогает вам добавлять очень специфический вид структурированных данных на ваш сайт WordPress, и вы можете комбинировать их со всеми другими плагинами схемы выше.
В частности, это помогает вам добавлять временные метки блокчейна к структурированным данным, чтобы подтвердить право собственности на ваш контент и доказать, что он не был подделан.
Если вы хотите узнать больше об этой теме, посмотрите наш полный обзор WordProof. Разработчик WordProof также подробно расскажет о преимуществах использования меток времени в ваших структурированных данных.
Какой плагин разметки схемы / Rich Snippets следует использовать?
Для лучшего общего плагина разметки схемы / фрагментов кода я рекомендую Schema Pro, поскольку он использует рекомендованную Google разметку JSON-LD. Это также самый гибкий плагин, и вам не нужно добавлять новый контент в интерфейс вашего сайта.
Наконец, если вы хотите добавить метки времени блокчейна к вашим структурированным данным, проверьте плагин WordProof. Это может помочь вам в этом плюс намного больше, и вы можете комбинировать его со всеми другими плагинами в этом списке.
Есть еще вопросы о том, как добавить богатые фрагменты в WordPress? Дайте нам знать в комментариях, и мы постараемся помочь!
Все, кто пытался сделать микроразметку комментариев для своего сайта или блога, сталкивались с предупреждением vcard.
При этом в валидаторе микроразметки Google таких предупреждений нет.
В чём причина предупреждения vcard?
Связано это с тем, что vcard относится к микроформату hCard, который широко используется во всём мире, и предназначен для структурной микроразмкети контактной информации.
А так как почти все шаблоны, которые мы используем для своих сайтов WordPress созданы иностранными разработчиками, то и этот микроформат встречается в каждой теме.
Только вот Яндекс, пока, частично поддерживает этот формат. И в результате комментарии, размеченные по умолчанию микроформатом hCard, выдают предупреждение. Что мол, этот формат предназначен для контактных данных организаций, а не людей.
Как создать автоматическую микроразметку комментариев и избавится от предупреждения vcard.
О том, как создать микроразметку комментариев я уже рассказывал и показывал. Для того чтобы понять общие принципы построения разметки, где и как размечаются структурные элементы, советую её прочесть.
В качестве примера рассмотрим разметку на моём тестовом блоге. Итак, внешне комментарии выглядят так:
Обращаю ваше внимание на дату и время комментария. Для корректной микроразметки походит только формат типа (Y-m-d). Поэтому дата после добавления разметки примет вид 2015-04-10. Все остальные структурные элементы комментария, внешне не изменятся.
Шаг 1. Вставка функции в файл functions.php.
Предупреждение: перед началом работ, сделайте резервные копии файлов functions.php и comments.php.
Подсказка: Как не ошибиться с местом вставки, смотрите в видеоуроке.
Сохраняете файл. Сейчас внешне комментарии изменились только датой.
Шаг 2. Вызов функции в файле comments.php.
Теперь открываете файл comments.php и используя поиск (CTRL+F), ищите вот этот фрагмент кода:
Выглядеть этот код может и по-иному:
В первом, варианте делаете так: в скобках, в одинарных кавычках вставляете вызов функции.
Во втором, варианте делаете так: добавляете по образцу предыдущих строк вызов функции, как показано в примере.
Сохраняете изменения в файле и можно идти проверять работу в валидаторе микроразметки.
Ваши комментарии в валидаторе Яндекса должны выглядеть подобным образом.
И никаких предупреждений vcard. Одним действием вы решаете две задачи.
На этом автоматическая микроразметка комментариев окончена. Но, для наглядности я предлагаю посмотреть видеоурок с примерами вставки кода и пошаговой инструкцией.
Друзья, у меня сегодня всё. Желаю вам успехов и хорошего настроения. И конечно, жду ваших комментариев.
от Наталья Мамбетова 20.08.2018 Обновлено 13.08.2021
Чтобы помочь поисковикам верно понять содержание сайта, необходимо внедрить в HTML-код разметку Schema. Разметить данные желательно в самом начале создания сайта, прежде чем поисковики проиндексируют ваш контент и создадут сниппеты так, как они поняли содержимое.
Микроразметка Schema совсем не микро
Прежде всего стало понятно, что совсем необязательно исправлять абсолютно все предупреждения поисковиков. Например, когда мы размечаем статью схемой BlogPosting или Article, у нас потребуют указать свойство publisher (издатель). Если мы посмотрим инструкцию то увидим, что этот атрибут мы можем указать или в схеме Organization или в схеме Person, что было бы логично, так как не всякий издатель может быть организацией.
Если вас все-таки раздражают ошибки и предупреждения в кабинете вебмастера, постараемся выполнить все условия.
Структурируем блог пошагово
1. WebPage — разметка тела сайта
Первым делом размечаем всё тело нашего сайта указывая его как веб-страницу. Для этого в тег добавьте следующие значения:
Чтобы то же самое сделать на сайте WordPress откройте файл header.php и под закрывающим тегом найдите тег >, добавьте значения Schema таким образом:
2. Organization — разметка данных компании и логотип
Следующим шагом необходимо разметить логотип, указать ссылки на ваши социальные сети, город и номер телефона — данные заполняем в том случае, если ваш блог принадлежит вашей компании.
Вот пример микроразметки Organization для организаций.
Если необходимо указать адрес организации полностью, то внутри Organization создайте схему PostalAddress. Если адрес будет отображаться для посетителей, то оборачивайте блок в ul li или в span, если разметка нужна только для поисковиков, то используйте тег meta. Пример:
Реализация микроразметки Organization на WordPress:
Как разметить структурированные данные в логотипе и убрать циклические ссылки на сайте WordPress читаем на странице Добавляем логотип и убираем ссылку на главную.
3. WPHeader — разметка названия, описания сайта и изображения в header.
Теперь необходимо разметить название, описание сайта и изображение header сайта.
На главной странице оборачиваем заголовок сайта в тег
4. SiteNavigationElement — разметка меню сайта.
Размечая меню сайта мы выделяем весь блок меню и задаем свойства Schema ссылкам.
Микроразметка меню в WordPress. В тег nav добавляем тип схемы SiteNavigationElement.
Обновлённый код для микроразметки меню WordPress смотрите в этом комментарии.
5. Blog — разметка главной страницы блога
Чаще всего главной страницей блога является страница всех анонсов статей. На ней необходимо разметить: описание блога, заголовки анонсов, ссылки и краткое содержимое статей. Часто на главной странице отсутствует блок с описанием сайта, тогда в сниппет попадает лишь краткое содержание первого анонса. Будет намного лучше, если мы добавим описание сайта.
Теперь посмотрим пример разметки главной страницы блога WordPress. В файле, который отвечает за вывод всех записей блога, обычно это index.php, добавляем следующие свойства.
За содержимое анонса записи в обычно отвечает файл content-excerpt.php или content.php, открываем его и указываем, где у вас располагается изображение, заголовок, дата и краткое содержание записей.
6. BlogPosting, Person и Organization — разметка статьи блога
Статья блога размечается схемой BlogPosting, кроме всех прочих свойств задаваемых содержимому, проверка структурированных данных потребует указать схему Person, а также свойство publisher (издатель). В том случае если у нас блог частного лица, то мы бы хотели добавить это свойство в схему Person, но publisher поисковики (на момент написания статьи) относят к схеме Organization, несмотря на то, что данное свойство есть в спецификации обеих схем. Поэтому в разметке статьи блога обычно указывают обе схемы. (Но совсем необязательно указывать данные, которые вы не хотите показывать в сниппете.)
В Wordpres за вывод содержимого статьи отвечает файл content.php. Открываем его и размечаем таким образом:
ImageObject — разметка изображений
С разметкой изображений на HTML сайте нет никаких затруднений.
Что касается разметки изображений на сайте WordPress, то здесь нам на помощь приходят парочка функций для разметки изображений (thumbnails) блога на главной и архивных страницах и для разметки изображений в содержимом статей. Выбирайте более удобный для вас вариант.
Первый вариант разметки миниатюры поста добавляем content.php, в то место, где у вас выводится миниатюра поста.
Второй код вставляется в файл functions.php. Он также хорошо работает и размечает миниатюру поста. Но если в теме или в самом WP изменится порядок вывода атрибутов изображения, то регулярные выражения указанные в строке $pattern необходимо будет изменить.
Разметить сразу все изображения опубликованные в статье можно при помощью этого кода, вставлять его надо в файл functions.php.
WPSideBar — разметка сайдбара
HTML микроразметка для сайдбара.
В WordPress найдите файл отвечающий за вывод сайдбаров, обычно это файл sidebar.php. Добавьте разметку во все сайдбары.
WPFooter — разметка футера
Добавьте в тег footer соответствующую схему, как в примере ниже. Если у вас в подвале добавлено много различной информации, свойства к ним можно найти на сайте Schema.
Читайте также: