Verification: a143cc29221c9be0

Open graph разметка в wordpress

Open graph разметка в wordpress

Настройки сайта на WordPress

Основная информация

Проверьте общие настройки — наличие названия сайта, заполненного естественного описания с основными ключевыми словами, адреса и выбранного языка.

Структура ссылок

Проверьте, как WordPress формирует URL ваших постов. По умолчанию система добавляет к записям в конец конструкцию /?p=12345, но лучше, если ссылка будет выглядеть естественно, к примеру, как название статьи на латинице.

Не советуем использовать кириллицу, при копировании и вставке она будет отображаться набором символов. Переводить кириллицу в латиницу можно с помощью плагина для транслитерации, например, WP Translitera.

Изменить способ оформления оформлять URL можно в настройках раздела «Постоянные ссылки», нужно выбрать «Произвольно».

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Доступность сайта для ПС

Проверьте, доступен ли сайт ботам поисковых систем. Если они не смогут сканировать и индексировать страницы сайта, он не появится в выдаче.

Проверить нужно пункт «Попросить поисковые системы не индексировать сайт» в Настройках.

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Администраторы

Проверьте список пользователей в разделе администраторов. Для безопасности нужно сменить стандартные логин и пароль, удалить стандартного пользователя admin и создать нужные учетки для себя и коллег, которые будут заниматься администрированием сайта.

Бэкапы

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

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

Взаимодействие с пользователями

Удобство

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

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

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

Если вы собираете контакты пользователей для рассылки, оцените, есть ли у них стимул оставлять контактные данные, заметен ли лид магнит, не назойливо ли окно для сбора e-mail.

Проверьте, чтобы все формы имели автоответчик.

Если сайт ориентирован на возрастную аудиторию, оцените размер текстов и кнопок. Проверьте работу версии для слабовидящих.

Комментарии

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

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Для борьбе со спамом лучше поставить капчу или подключить быструю регистрацию через почту или соцсети. Для регистрации и комментирования есть плагины AnyComment, Disqus, HyperComments, Tolstoy Comments и другие.

Политика обработки персональных данных

Наличие на сайте регистрации, анкет, профиля пользователя, содержащего личную информацию, обязывает уведомить посетителей о сборе персональных данных. Это регулирует закон «О персональных данных» 152-ФЗ Российской Федерации.

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

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

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

Также пользователей нужно оповестить о том, что страницы используют файлы cookie. Оповещение на сайте shashlyknn.ru:

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Оформление

Навигация

Ссылка с логотипа компании должна вести на главную страницу.

Оцените, насколько легко ориентироваться на сайте, за сколько кликов пользователь может добраться до нужного ему раздела. Чем меньше, тем лучше. Для примера меню сайта kant.ru:

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Проверьте контактные данные, они должны быть верны и одинаковы на всем сайте.

Дизайн

Просмотрите тексты и надписи: стили шрифтов, межстрочные интервалы, цвета и навигация на всех страницах должны быть выдержаны в одном шаблоне оформления.

Все тексты разделены по абзацам, колонка текста занимает не больше двух третей ширины экрана, цвет контрастный — черный на белом или темно-серый на очень светлом сером.

Проверьте, есть ли фавикон, он должен отображаться на всех страницах.

Если делали сайт для иностранного заказчика, проверьте отображение шрифтов. Обычно бывают проблемы с языками, имеющими специальные символы, к примеру, как у шведского. Текст на шведском на сайте flytt-stad.se:

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Контент

Текст

Проверьте, чтобы на сайте не осталось рыбы «Lorem Ipsum», которую обычно используют в дизайне, пока текст не готов.

На каждой странице должны быть оформлены метатеги: один заголовок Title, один заголовок H1 и заголовки других уровней, обычно хватает H2-H5, а также description.

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

Изображения

Изображения, аудио и видео должны открываться и воспроизводятся на всех устройствах.

Проверьте изображения: их нужно сжать для быстрой загрузки и облегчения страниц, но они не должны сильно терять в качестве.

Проверьте баннеры: если картинка отображается в формате 300×600px и не приближается по клику, не нужно загружать изображение большего размера.

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

Другие файлы

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

SEO

Метатеги

О проверке метатегов было в других пунктах. Используйте плагины, чтобы автоматизировать часть работ по оптимизации страниц: заполнению метатегов, alt изображений и прочего. В технической оптимизации помогут плагины YOAST SEO, All in One SEO Pack, Rank Math, Platinum SEO Pack и другие из каталога плагинов WP.

Разметка

Проанализируйте, как реализована микроразметка Schema.org для создания красочных сниппетов в выдаче, и Open Graph для настройки превью в социальных сетях.

Для разметки есть плагины. Для Schema.org Schema, Schema — All In One Schema Rich Snippets, Schema JSON-LD Markup, Schema & Structured Data for WP, для Open Graph OG, WP Open Graph, WPSSO Core, Open Graph for Facebook и другие.

Технические характеристики

Мобилопригодность, кроссбраузерность

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

Пройдите путь клиента до заказа товара или звонка на мобильном устройстве: удобно ли смотреть товары, заполнять личные данные и регистрироваться с телефона.

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Проверьте отображение и работу сайта во всех популярных браузерах.

Файл robots.txt

Проверьте корректность заполнения файла с рекомендациями для поисковых ботов robots.txt. Он должен:

  • называться строго robots.txt;

  • иметь расширение txt;

  • весить до 32 КБ;

  • отдавать HTTP-код со статусом 200 ОК;

  • содержать только латиницу;

  • содержать каждый префикс URL на отдельной строке;

  • располагаться в корневом каталоге https://site.com/robots.txt в единственном экземпляре.

Карта сайта

Проверьте доступность Карты сайта — файла с перечнем всем URL: она должна находиться в корневой директории. Ссылку на карту нужно поставить в robots.txt:

Sitemap: www.site.ru/sitemap.xml

HTTPS

Если на сайте производятся операции с финансами, используются личные данные пользователей, SSL-сертификат нужен в первую очередь. Хотя и остальным сайтам сейчас рекомендуется использовать только безопасное подключение. К примеру, в версии бразуера Chrome 86 если на сайте есть формы с HTTP, пользователю выйдет предупреждение о том, что вводить туда данные небезопасно.

Проверьте, доступен ли сайт по по HTTP-протоколу и по HTTPS.если сертификат установлен успешно, страницы будут открываться с учетом нового протокола, проверить это можно, к примеру, на русскоязычном сервисе PR-CY или зарубежном Ssllabs.

И не забудьте рассказать Яндексу о смене протокола и оповестить Google.

Скорость загрузки

Проверьте скорость загрузки сайта на десктопе и мобильных устройствах. Сделать это можно в PageSpeed Insights от Google, этот инструмент покажет, где проблемы. Доводить до 100 баллов не нужно, достаточно выйти в зеленую зону.

Для ускорения есть множество способов, может помочь сжатие gzip или brotli, минификация кода, кэширование контента, оптимизация изображений, асинхронная загрузка, для WP есть много плагинов для ускорения.

Редиректы и страницы ошибки

Проверьте страницы, которые не нужно индексировать, на них должен быть установлен тег rel = «nofollow» . Если страницы перестали быть актуальны, поставьте 301 редирект на дружественные по теме.

Настройке страницу 404, она должна предлагать пользователю другие разделы, чтобы он остался на сайте.

Аналитика

Сервисы Яндекса и Google

Сайт нужно добавить в Яндекс.Вебмастер и Google Search Console, если вы планируете запускать рекламу, то синхронизировать учетные записи Google AdWords и Google Analytics.

Проверьте, у вас должен быть полный доступ к учетной записи Google Analytics для вашего сайта. Если вы не владелец сайта, попросите, чтобы он дал вам доступ к кабинету.

Отслеживание взаимодействия

Проверьте настройки Google Analytics, код должен быть корректно добавлен на сайт. Если сайт доступен по HTTPS, для учетных записей Google Analytics должно быть выбрано значение «https» для полей «Ресурс» и «Представление».

Посмотрите на фильтры, должны быть настроены те, что исключают трафик с ваших IP-адресов.

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

Проконтролируете, чтобы Аналитика фиксировала конверсии.

Интеграция с сервисами для бизнеса

Проверьте, как работает интеграция с CRM, программным обеспечением для электронной коммерции и другими сервисами, нужными для компании.

Для проверки технических параметров сайта, оптимизации, юзабилити и других аспектов есть много сервисов онлайн-аудита. Один из таких — Анализ сайта от PR-CY, проверяет ресурс по 70+ тестам, дает советы и сравнивает с конкурентами, умеет проверять внутренние страницы и следить за позициями сайта в выдаче. Фрагмент проверки внутренних страниц:

Сделали сайт на WordPress? Не забудьте проверить его перед запуском

Протокол Open Graph как инструмент продвижения в соц. сетях

Все еще удивляетесь, почему SEO не приносит Вашему сайту ожидаемых результатов? А Вы точно используете все возможности? 

Возьмем самое элементарное – кнопки социальных сетей на сайте. Их Вы хотя бы установили? Когда посетители веб-сайта получат привычные для них инструменты взаимодействия с понравившимся контентом и его распространения, дела с привлечением трафика и его рейтингом в глазах поисковиков пойдут куда лучше. Поэтому все эти «Лайки», «Поделиться» и им подобные на сайте быть должны. Будем считать, что с этим мы разобрались. 

Если у Вас возник вопрос по поводу того, какое отношение имеет данное вступление к теме в заголовке статьи (протокол Open Graph), предлагаем перейти к следующему моменту: очень частой проблемой для веб-мастеров, которые используют кнопки соц. сетей на своих сайтах, становятся некорректное содержимое и внешний вид анонсов контента, которые автоматически генерируются при нажатии на кнопку расшаривания. 

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

Анонс без Open Graph протокола
 
В примере на скриншоте человек поделится с друзьями постом со ссылкой на статью об AC/DC с «левой» картинкой из раздела «Недавно опубликовано» и описанием, взятым наугад из других материалов оттуда же (о прахе Дэвида Боуи).

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

И тогда на помощь веб-мастеру приходит протокол Open Graph!

Теория по теме: что такое Open Graph и чем он может быть полезен

Протокол Open Graph – это разметка, разработанная Facebook и использующаяся изначально в пределах этой соц. сети с целью установления контроля над процессом создания  превью (анонса) содержимого страниц при публикации ссылок на них.

Со временем стандарт Open Graph разметки начали использовать и другие популярные социальные сети (Вконтакте, Google+, Pinterest, Twitter и др.).

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

Как настроить разметку Open Graph на своем сайте

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

… кода страницы нужные мета-теги Open Graph:
  1. og:image — используется для указания пути к изображению, которое должно быть использовано для создания анонса. Причем это не обязательно должна быть картинка с текущей страницы.
     
  2. og:title — в нем прописывается желаемый заголовок анонса, который вовсе не должен совпадать с заголовком страницы.
     
  3. og:description – тег, в котором содержится описание контента страниц, то есть текст анонса. В отличие от стандартного description страницы, размер которого не должен быть больше 160 знаков, в этом мета-теге Open Graph можно прописывать до 295 символов.Пример внедрения мета-тегов Open Graph
     
  4. og:url – указывается ссылка страницы, анонс которой собственно и будет формироваться. 
     
  5. og:site_name – прописывается имя сайта, которое должно отображаться в будущем посте в соц. сети. Можно указать любое.
     
  6. og:type – указывает на тип основного содержимого веб-страницы (article – статья, movie – фильм и т. д.).Пример отображения тегов Open Graph

Это основные мета-теги Open Graph, которые чаще всего используются и рекомендованы разработчиками разметки. Но кроме них имеются и дополнительные, с помощью которых в анонсах можно указывать второстепенные (необязательные) данные:

  • og:video и og:audio  – в них размещаются URL на прикрепляемые к анонсу видео- и аудиофайлы;
     
  • og:locale – указывается язык, на котором составлено описание объекта.
     

Также og:image и og:video могут содержать дополнительные мета-данные, указываемые после двоеточия:

  • :secure_url — URL на вариант контента, который открывается по защищенному HTTPS;
     
  • :width — ширина картинки (видео) в пикселях;
     
  • :height — высота картинки (видео) в пикселях.Дополнительные мета-теги Open Graph

На самом деле в протоколе Open Graph мета-тегов имеется намного больше, и мы перечислили лишь наиболее часто используемые. С остальными можно ознакомиться на официальном сайте http://ogp.me.

Что такое Open Graph

Open graph – это протокол, который позволяет с помощью добавления в html-код мета-тегов управлять тем, каким образом будет отображен контент в социальных сетях. Без этого пост в социальной сети может выглядеть так.

Пост в Facebook без Open Graph

Согласитесь, выглядит как-то не очень.

Протокол Open Graph в исходном коде:

Протокол Open Graph в исходном коде

Установка разметки Open Graph

В этом нам поможет замечательный плагин для WordPress – All in One SEO Pack. Вообще, я не перестаю удивляться на сколько это полезный и необходимый плагин. Действительно он соответствует своему названию «Все в одном», потому что в нем собрано много полезных штук для блога. Вот, например, я написал недавно статью о том, как сделать карту сайта с помощью этого плагина.

Если плагин All in One SEO еще у Вас не установлен, и Вы не знаете как вообще устанавливаются плагины в WordPress, почитайте эту статью.

После установки плагина надо активировать модуль «Социальные мета». Для этого в главном меню админки сайта щелкаем по пункту “All in One SEO”, далее «Управление модулями».

Управление модулями All in One SEO

В открывшемся окне выбираем нужный модуль и жмем на кнопочку «Activate».

Модуль Социальные мета

Всё, модуль уже работает, осталось только его настроить под себя.

Теперь нам нужно настроить изображение, которое будет появляться, когда кто-нибудь будет делиться вашей статьей в социальных сетях. Переходим в главное меню админки сайта, щелкаем на пункте “All in One SEO», далее «Социальные мета».

Пункт меню Социальные мета

В открывшемся окне переходим в секцию «Настройки изображения» и выбираем источник для OG:Image. У меня на блоге выбрано «Миниатюра записи». Также можно настроить изображение по умолчанию. Оно понадобится в том случае если в статье вообще нет картинок.

Настройки изображение в модуле Социальные мета

На этом настройка завершена. Если вы больше ничего не меняли в настройках, то описание статьи (og:description) будет браться из Вашего основного Description, что нам как раз и надо.

Также существуют отдельные плагины WordPress для формирования Open Graph – “Open Graph Protocol Framework”, “Facebook Open Graph, Google+ and Twitter Card Tags” и множество других. Выбирайте по своему усмотрению.

Что такое Open Graph?

Open Graph — разработанный компанией Facebook протокол для того, чтобы правильно адаптировать содержание страницы в социальных сетях. Протокол Open Graph дает возможность присвоить метаданные важным объектам на веб-странице, после чего те воспринимаются социальными сетями как внутренний объект.

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

Open Graph правильное добавление

  1. Превью - изображение которое выводится в качестве превью к записи.
  2. Домен - URL адресс, ссылка, того чем вы делитесь.
  3. Навание - Заголовок той информации, которую вы собираетесь разместить.
  4. Описание - краткое содержание того, о чем информация.

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

В примере я показал Facebook и в начале упомянул тоже его, но Open Graph будет работать и в других социальных сетях аналогично, в том же Вконтакте, Google+, Одноклассниках и тд.

Если же не добавлять метатеги от Open Graph, то при попытке поделится ссылкой вы увидите следующую картину:

Open Graph неправильное добавление

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

Я не зря выбрал свой сайт в качестве примера. На нем не подключен Open Graph, хотя новости часто публикуются в социальных сетях. Тема старая и все нет времени ее обновить, но скоро я это сделаю, установив новую тему. В ней уже будет и Open Graph, и микроразметка и еще много чего, к чему не доходили руки. Ну, а теперь, давайте рассмотрим как добавить Open Graph на свой сайт.

МЕТАтеги Open Graph

Open Graph имеет свои метатеги и как остальные они добавляются в шапку сайта, а именно между

.... Для начала, давайте я покажу как выглядят обычно метатеги Open Graph на сайте:
  1. og:type - указываем тип объекта, от него зависит то, какие дальше будут заданы свойства.
  2. og:image - указываем превью картинку нашей страницы.
  3. og:url - указываем ссылку на текущую страницу (ту где располагаются эти метатеги).
  4. og:title - указываем заголовок страницы.
  5. og:description - указываем краткое содержание страницы, статьи.

Еще часто добавляют тег og:site_name - в нем указывается название сайта.

Первые 4 метатегов являются основными и обязательными. Если вы решили добавлять протокол Open Graph, то они должны быть указанны в любом случаи. Последние og:description и og:site_name не обязателен, но наличие приветствуется, вы сами видели начале статьи примеры. Есть и другие теги которые можно добавлять к страницам сайта, более подробно о них можно узнать на сайте Ruogp.me.

К этой группе тегов можно добавить еще пару специальных метатегов для Facebook:

  1. fb:app_id - указывается айди приложения от Facebook.
  2. fb:admins - указывается айди администратора или администраторов через запятую.

Добавляется любой из этих тегов, нужны они для того чтобы вести статистику по взаимодействию с Facebook. Подробнее об этом можно узнать тут - Facebook developers. Если же это не надо то пропускайте.

Проблема с Open Graph в Wordpress SEO

Open Graph — это своего рода разметка для социальных сетей (в большей степени для Facebook), которая позволяет социалкам понять структуру контента вашего сайта (заголовок, анонс, описание и т.п.).

Open Grpah на WordPressПо умолчанию в плагине Yoast WordPress SEO эта разметка включена, а за счет этого мы получаем слишком большую конструкцию мета-тегов, которая в свою очередь негативно влияет на ранжирование.

Есть два главных минуса от работы этой опции:

  1. дублирование тегов;
  2. тег og:site_name, который добавляет в конце вашего заголовка (Title) название сайта.

Если первое еще можно пережить, то второе прямо влияет на ранжирование. Если вы обратите внимание, то при включенной опции в плагине WordPress SEO, в выдаче Google везде в заголовках ваших проиндексированных страниц добавлено «- Название вашего сайта». А это в свою очередь снижает релевантность страницы.

К примеру, если у вас заголовок страницы — «Купить енота», а название сайта — «Милые животные», то при включенной Open Graph в выдаче гугла заголовок этой страницы будет выглядеть — «Купить енота — Милые животные». Это вам не только релевантность снизит, так еще и смуту в умы обычных пользователей внесет. В общем ход мыслей, надеюсь, вам стал понятен.