Verification: a143cc29221c9be0

Open graph в wordpress без плагина

Open graph в wordpress без плагина

Содержание

Плагины SEO полезны

Плагины SEO - это рекомендованные решения для издателей, которые не умеют кодировать PHP, теряются с файлами HTACCESS и для которых файлы robots.txt являются загадкой. Техническая сторона SEO имеет относительно высокую планку с точки зрения кодирования. Плагины SEO демократизируют веб-публикации.

Основная жалоба на плагины SEO заключается в том, насколько они наполнены ненужными функциями. Но это не повсеместно.

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

Реклама

Продолжить чтение ниже

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

WordPress SEO без плагина SEO

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

Эта статья предназначена для издателей, заинтересованных в изучении того, как делать SEO без плагина SEO.

Почему я не использую плагины для SEO

В этом году из-за головной боли, вызванной ошибкой плагина SEO, я запустил сайт без каких-либо плагинов SEO. Я был доволен своими результатами и отказался от плагинов SEO на других сайтах.

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

Реклама

Продолжить чтение ниже

Причины, по которым я не использую плагин SEO

Есть четыре причины, по которым я не использую плагин для SEO.

  1. Функции, которые дублируют то, что уже есть в WordPress или в теме
  2. Ненужные функции, решающие предполагаемые проблемы
  3. Сложность плагинов SEO привносит множество ошибок
    Не верьте мне, что плагины SEO содержат ошибки? Посетите журнал изменений вашего любимого плагина SEO и читайте обо всех ошибках, которые исправляются неделя за неделей, месяц за месяцем. Некоторые (не все) из этих плагинов для SEO содержат ошибки.
  4. Большой контроль над SEO

Причины, по которым я предпочитаю автономные решения

1. Проще написать решение, которое решает одну проблему.

2. Для некоторых функций SEO не нужен плагин.

3. Автономные решения легче поддерживать.

4. Более простая установка WordPress без лишних функций.

Функции SEO, необходимые для WordPress

В настоящее время WordPress имеет довольно надежное ядро. Такие вещи, как канонические, выполняются автоматически. Многие темы WordPress содержат функции SEO, такие как разметка схемы, навигация по хлебным крошкам, метаданные Open Graph и так далее.

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

Необходимые функции WordPress для SEO

  • Панировочные сухари со структурированными данными Schema.org
  • Мета-описания
  • Метаданные Open Graph
  • Удаление базы категорий
  • Метаданные схемы
  • Способ легко добавить атрибут nofollow к выбранным ссылкам.

Плагины WordPress для SEO

Панировочные сухари NavXT

Мета-описание Easy WP

Open Graph для тегов карточек Facebook, Google+ и Twitter

Удалить категорию из URL

Плагин Schema WordPress

Плагин Ultimate Nofollow для WordPress

Дополнительные функции WordPress SEO

  • Перенаправление страниц вложений
  • Плагин Redirection WordPress Redirect - более 1 миллиона установок
  • Карта сайта XML Более 2 миллионов установок

Панировочные сухари

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

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

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

Реклама

Продолжить чтение ниже

Я обнаружил, что использование плагина BreadCrumbs NavXT WordPress является подходящим решением. Он обрабатывает хлебные крошки и данные схемы.

Плагин NavXT имел уязвимость среднего уровня, но был быстро исправлен. Это было необычно для этого плагина, и в отличие от более серьезных событий, связанных с выделенными плагинами SEO, эта проблема не вызывала проблем у пользователей.

Мета Описание

Я считаю, что Easy WP Meta Description является подходящим решением для метаописаний. Мета-описания не являются фактором ранжирования. Но они действительно отображаются в поисковой выдаче, если вы занимаетесь рейтингом.

Google перепишет ваше метаописание, если фраза с вашей веб-страницы подходит лучше. Тем не менее, Google отлично справляется (на мой взгляд), предоставляя соответствующий фрагмент с вашей страницы.

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

Тег заголовка

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

Реклама

Продолжить чтение ниже

Метаданные Open Graph

Строго говоря, это не функция SEO. Это функция, которая может повлиять на объем трафика, поступающего на ваш сайт. Это позволяет вам указать изображение и текст, которые будут отображаться, когда ваш URL-адрес публикуется в Facebook и Twitter. Плагин Open Graph Meta Data поможет вам создать профессиональный вид, который понравится потенциальным посетителям сайта.

Удалить Category Base из WordPress

Слово «категория» не обязательно в вашей структуре URL. Сокращение URL-адреса до имени домена, фактического имени категории и имени страницы - лучшая практика. Более короткий URL-адрес легче запомнить, с меньшей вероятностью будет введена ошибка, и он может сообщить пользователям и поисковым системам, о чем страница, используя наименьшее количество слов. Подробнее о плагине Remove Category Base здесь.

Плагин WordPress для структурированных данных схемы

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

Реклама

Продолжить чтение ниже

Разметку схемы также можно закодировать вручную. Например, вы можете взять сценарий JSON-LD для обзоров и вставить его в нижнюю часть своего обзора прямо в редактор WordPress в текстовом режиме. Затем вручную настройте описательные поля для рейтинга, названия продукта и т. Д.

Шаблон обзора JSON-LD с автором

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

Вам не обязательно использовать плагин, но он, безусловно, является лучшим способом масштабировать этот процесс и обновлять его независимо от того, как часто обновляется WordPress.

Реклама

Продолжить чтение ниже

Плагин Ultimate Nofollow

Плагин Ultimate Nofollow добавляет возможность сделать определенный URL-адрес nofollow в момент создания этого URL-адреса. Если вам понадобятся дополнительные параметры для nofollow по всему сайту. Но я ими не пользуюсь.

Дополнительные функции SEO для WordPress

Перенаправление страниц вложений

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

Плагин Attachment Pages Redirect восстановит правильное поведение ваших отдельных вложений. Просто установите и активируйте его, и все, ваша проблема решена.

Плагин Attachment Pages Redirect не требует настройки. Просто активируйте его и забудьте. Исправить несанкционированные страницы вложений не может быть проще.

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

Менеджер перенаправления

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

Реклама

Продолжить чтение ниже

404 ответа не являются нездоровыми

Не используйте диспетчер перенаправления для перенаправления удаленной страницы на домашнюю страницу. Некоторые плагины SEO пытаются напугать вас, заставляя поверить в то, что коды ошибок 404 влияют на «здоровье» вашего сайта. Но это неверно. Коды ответов 404 по своей сути не вредны для «здоровья» вашего сайта.

  • Некоторые ответы 404 связаны с тем, что спамеры ссылаются на ваш сайт с частичным URL. Это нормально, и волноваться не о чем. Ответ 404 - идеальный ответ.
  • Некоторые ответы 404 связаны с внутренней ошибкой ссылки издателя. Это ваша ошибка (вы неправильно ввели URL). Это нужно исправить, обновив URL-адрес на правильный URL-адрес.

Правда о кодах ответа 404 заключается в том, что они совершенно естественны и не делают ваш сайт менее здоровым.

Джон Мюллер из Google заявляет, что код ответа 404 не требует исправления. Он также утверждает, что код ответа 404 является естественным:

«Нет необходимости« исправлять »ошибки сканирования на вашем веб-сайте. Обнаружение 404-х - это нормально и ожидается от здорового, хорошо настроенного веб-сайта.

Если у вас есть эквивалентный новый URL-адрес, рекомендуется выполнить перенаправление на него. В противном случае вам не следует создавать фальшивый контент, вы не должны перенаправлять на свою домашнюю страницу, вы не должны запрещать robots.txt эти URL-адреса - все это затрудняет нам распознавание структуры вашего сайта и ее правильную обработку. Мы называем эти ошибки «мягкими 404».

Изображение из сообщения Джона Мюллера из Google в Google PlusДжон Мюллер из Google объясняет, что код ответа 404 не повредит рейтингу вашего сайта.

Дополнительная информация от Google о кодах ответа 404 здесь:
http://support.google.com/webmasters/bin/answer.py?answer=181708

Реклама

Продолжить чтение ниже

XML карта сайта

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

«Используйте Pubsubhubbub, если вы используете Atom / RSS для своей карты сайта и хотите транслировать свои изменения в другие поисковые системы, помимо Google».

Google также может обнаруживать веб-страницу с помощью обычного процесса сканирования от ссылки к ссылке.

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

Если ваш сайт не обновляется часто, вы можете сканировать свой сайт с помощью такого приложения, как Xenu Link Sleuth, и выбрать вариант создания карты сайта XML. Затем вы просто загружаете его на свой сервер, никаких ресурсов веб-хостинга для создания карты не требуется, кроме разрешения Link Sleuth сканировать ваш сайт.

Реклама

Продолжить чтение ниже

Или вы можете использовать плагин, такой как плагин Google XML Sitemap Generator.

Резервные возможности плагина SEO

В плагины SEO включены функции, которые, на мой взгляд, избыточны или не нужны.

Канонические URL

Канонические URL-адреса встроены в WordPress. Для этого вам не нужен плагин SEO.

Редакторы файлов robots.txt и htaccess

Если у вас есть текстовый редактор или редактор HTML, то у вас есть все необходимое для редактирования файла robots.txt или обновления файла htaccess. Кроме того, вам следует связываться с этими файлами, только если вы знаете, что делаете.

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

Перенаправление кода состояния 404

Плагины SEO предоставляют это, ошибочно полагая, что код статуса 404 вреден. Как отмечал выше Джон Мюллер из Google, 404 кода ответа вполне подойдут. Просто исправьте те, которые вызваны фактическими ошибками, например опечаткой в ​​URL.

Реклама

Продолжить чтение ниже

Генераторы Sitemap

Как отмечалось выше, карта сайта не является строго необходимой, поскольку Google сканирует URL-адреса через RSS-каналы и ссылки.

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

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

Рекламные ссылки в файлах Sitemap

Рекламные ссылки распространены в бесплатных программах. Однако многие издатели не знают, что некоторые плагины SEO создают рекламную ссылку на автора плагина из создаваемой им карты сайта XML.

Многие оптимизаторы поисковых систем предпочитают контролировать, на кого ссылаются их сайты. Рекламная ссылка с XML-карты сайта - это ваш выбор и небольшая плата за бесплатное программное обеспечение.

Реклама

Продолжить чтение ниже

Это пример рекламной ссылки на плагин SEO, созданной из карты сайта, созданной плагином SEO.

WordPress SEO без плагина SEOИздатели иногда удивляются, узнав, что некоторые плагины SEO генерируют рекламную ссылку из своей XML-карты сайта.

Исследование ключевых слов и обработка текста

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

Реклама

Продолжить чтение ниже

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

Зачем использовать шесть плагинов вместо одного?

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

Так что вопрос не должен заключаться в том, нужно ли вам шесть плагинов или один. Вопрос должен заключаться в том, сколько функций вам нужно? Для меня ясный ответ - гораздо меньше функций, которые предлагаются всеми в одном плагине WordPress для SEO.

Исключением является плагин WordPress SEO Framework, поскольку он модульный. Вы можете выбрать, какие компоненты вам нужны.

Реклама

Продолжить чтение ниже

Зачем внедрять Open Graph

Сейчас Open Graph поддерживают большинство популярных соцсетей и мессенджеров:

  • Facebook;
  • Twitter;
  • Pinterest;
  • Viber;
  • Telegram;
  • WhatsApp.

Протокол также используется для передачи данных в Яндекс.Видео и помогает качественнее работать функции «Блоки рекомендуемого контента» в AdSense.

Давайте подробнее рассмотрим, что произойдет, если не внедрить Open Graph на своем сайте.

Вот некоторые образцы предпросмотра в Facebook веб-страниц без разметки:

Образец предпросмотра веб-страницы афишы без разметки

Образец предпросмотра веб-страницы строительства и дизайна без разметки

Образец предпросмотра веб-страницы сайта магазина сантехники без разметки

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

Теперь примеры страниц с разметкой:

Пример страницы с разметкой портала Информбюро

Пример страницы с разметкой сайта Странаюа

Пример страницы с разметкой сайта Project liga

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

Важно: заголовок и описание, по желанию, могут отличаться от title и description веб-страницы.

Open Graph позволяет собственноручно сформировать желаемый сниппет для превью страницы в соцсетях.

Истории бизнеса и полезные фишки

Основные теги протокола Open Graph

Разметкой предусмотрено много свойств (тегов). Основные:

  1. og:title — заголовок, который характеризует страницу и отображается внешне.

Здесь title

  1. og:type — тип основного содержимого страницы. Например:
  • видео: ;
  • музыка: ;
  • статья: .
  1. og:image — URL изображения, которое отобразится в предпоказе.

Здесь image

og:url — канонический URL веб-страницы. Он используется как идентификатор объекта (веб-страницы). Например:

Пример кода, если задействовать только основные свойства:





......

Рассмотрим не основные, но важные и полезные теги при продвижении:

  1. og:site_name — задает имя сайта, которое отображается в предпоказе.

Здесь site name

  1. og:description — описание страницы (элемент подгружается не всегда. Иногда, к примеру, Facebook может не показывать описание в превью).

Здесь description

Вот все теги, которые влияют на внешний вид предпросмотра:

Еще раз внимательно смотрим на все теги, которые влияют на внешний вид предпросмотра

Дополнительные необязательные теги

  1. og:locale — задает язык и регион в формате «язык_РЕГИОН». Например:

Если свойство не задано, по умолчанию язык и регион «en_US».

Код языка нужно указывать по ISO 639.2, а страны по ISO 3166-1.

  • og:audio – указывает URL аудиофайла;
  • og:video – указывает URL видеофайла.

Например:

Как использовать дополнительные свойства тегов

Теги могут содержать дополнительные свойства. Например, у og:image такие:

  • og:image:secure_url — задает URL картинки, который работает на HTTPS;
  • og:image:width — число пикселей в ширину;
  • og:image:height — число пикселей в высоту;
  • og:image:type — задает MIME тип изображения (список существующих MIME-типов).

В коде это выглядит так:





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

Например, есть три картинки с разным разрешением image1, image2, image3. Код будет выглядеть следующим образом:






То есть, у image1 размер 800х600, у image2 500 пикселей в высоту, а ширина не указана,

у image3 размеры не указаны,

Разметка позволяет подстраховаться, указав, например, альтернативную картинку. Если первый URL будет недоступен, то в предпросмотр подгрузится вторая картинка. Очередь (приоритет) — сверху вниз.

Например:


Если картинка http://site.com/example.jpg недоступна, подгрузится следующая http://site.com/example1.jpg.

Как внедрять Open Graph

Существуют несколько способов внедрения протокола Open Graph на сайте.

Первый и легкий — использовать плагины для CMS (если сайт сделан на CMS, для которой существуют такого рода плагины). Например, для WordPress и Для Joomla!.

Второй вариант посложнее — внедрить протокол напрямую в код страниц.

Сначала нужно обозначить, что страница использует протокол Open Graph. Для этого в открывающем теге указать атрибут prefix со значением my_namespace: http://example.com/ns#

Выглядит это так:

Сами же свойства (теги) нужно располагать между открывающим

и закрывающим , то есть внутри элемента .

Способ подойдет сайтам, которые не используют CMS или же используют, но нет подходящего плагина.

Чтобы проверить правильность внедрения разметки можно воспользоваться специальным инструментом от Facebook или сервисом Open Graph Check.


Ещё больше тонкостей при продвижении в социалках — опыт наших экспертов в услуге SMM:

Хочу SMM и рекламу в соцсетях

Оптимизация сайта под социальные сети

Оптимизация сайта под социальные сети (англ. Social media optimization, SMO) — комплекс мер, направленных на привлечение на сайт посетителей из социальных медиа: блогов, социальных сетей и т. п.

Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:

  1. Повышение ссылочной популярности;
  2. Упрощение добавления контента с сайта в социальные сети;
  3. Привлечение входящих ссылок;
  4. Обеспечение экспорта и распространения контента;
  5. Поощрение создания сервисов, использующих наш контент.

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

Вопросы, связанные непосредственно с генерацией контента рассматривать не будем. О написании сильных текстов лучше всего расскажет недавно вышедшая книга Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай. Как создавать сильный текст».

Пиши, сокращай. Как создавать сильный текст

Настоятельно рекомендую всем кто хотя бы иногда что-то пишет.

Как я уже говорил выше, социальная оптимизация большинства сайтов обычно ограничивается установкой виджетов «Поделиться» Фейсбука, ВКонтакте и Твиттера — это верный ход, но этого часто мало. Появилось много сторонних сервисов, которые существенно упростили эту процедуру. Например, блок «Поделиться» Яндекса и многие другие. К сожалению, социальные сети не всегда корректно распознают расшариваемый контент. И очень часто необходимо программно уточнять его тип и характеристики. Чтобы после репоста, публикация в социальных сетях выглядела интересно.

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

Сначала как должен.

В Фейсбуке.

Как должен выглядеть репост в Фейсбуке

ВКонтакте.

Как должен выглядеть репост ВКонтакте

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

А вот как не должен расшариваться контент.

В Фейсбуке.

Как не должен расшариваться контент на Фейсбуке

ВКонтакте.

Как не должен расшариваться контент ВКонтакте

Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.

Такой шаринг никуда не годится.

Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.

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

Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph.

Протокол Open Graph

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

Протокол Open Graph хоть и является разработкой Facebook, однако, поддерживается всеми популярными соцсетями. На данный момент Open Graph поддерживают: Твиттер, ВКонтакте, Google+, LinkedIn, Pinterest и многие другие.

Основные метаданные Open Graph

  • og:title — название объекта, заголовок;
  • og:type — тип объекта, в зависимости от которого задаются другие свойства;
  • og:image — URL-адрес изображения;
  • og:url — канонический URL-адрес объекта.

Дополнительные метаданные Open Graph

  • og:audio;
  • og:description;
  • og:determiner;
  • og:locale;
  • og:locale:alternate;
  • og:site_name;
  • og:video.

Структурированные свойства

Ряд свойств имеют дополнительные метаданные, которые определяются как и обычные метаданные.

С полным описанием протокола Open Graph можно ознакомиться на сайте Ruogp.me.

Подключение Open Graph

Open Graph подключается к HTML-страницам так же как и любые другие метатеги.

Для статичных страниц так, например:





Как подключить Open Graph к WordPress

Для WordPress традиционно существует два способа подключения: с помощью плагина и ручное подключение с помощью фильтров и экшенов.

Подключение Open Graph к WordPress с помощью плагина

Для подключения Open Graph к WordPress существуют специальные плагины:

  • WP Facebook Open Graph protocol;
  • Open Graph.

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

Самые популярные:

  • Yoast SEO — рекомендую;
  • All in One SEO Pack.

Иногда поддержка Open Graph имеется прямо в теме WordPress, особенно это касается премиум-тем. Поэтому, перед стартом работ по SMO, нужно открыть HTML-код сайта и проверить его на наличие метатегов Open Graph. Их можно определить по характерному свойству (property) — «OG:».

Подключение Open Graph к WordPress без плагинов

Код размещаем в файле функций активной темы (functions.php) или в функциональном плагине, в который вы выносите весь функционал, чтобы не потерять его при смене темы.

// Поддержка Open Graph в WordPress

function add_opengraph_doctype( $output ) {
    return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');

function insert_fb_in_head() {
    global $post;
    if ( !is_singular())
        return;
    echo '';
    echo '
';
    echo '
';
    echo '
';
    echo '
';
    if(!has_post_thumbnail( $post->ID )) {
        $default_image = "URL дефолтного изображения";
        echo '
';
    } else {
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '';
    }
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

В результате на страницах всех записей будут выводиться основные метаданные Open Graph:

  • og:title;
  • og:type;
  • og:url;
  • og:site_name;
  • og:image.

А также fb:admins, в котором нужно указать ваш Facebook ID. Есть несколько способов определения своего ID, самый простой — навести курсор мыши на вашу аватарку Facebook, в системной строке браузера увидим fbid. Это и есть Facebook ID.

Отдельно стоит остановиться на og:image. В качестве изображения будет установлена миниатюра текущей записи. В случае ее отсутствия будет выводиться дефолтное изображение, ссылку на которое задается в переменной $default_image.

Оптимизация сайта под социальные сети

Оптимизация сайта под социальные сети (англ. Social media optimization, SMO) — комплекс мер, направленных на привлечение на сайт посетителей из социальных медиа: блогов, социальных сетей и т. п.

Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:

  1. Повышение ссылочной популярности;
  2. Упрощение добавления контента с сайта в социальные сети;
  3. Привлечение входящих ссылок;
  4. Обеспечение экспорта и распространения контента;
  5. Поощрение создания сервисов, использующих наш контент.

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

Вопросы, связанные непосредственно с генерацией контента рассматривать не будем. О написании сильных текстов лучше всего расскажет недавно вышедшая книга Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай. Как создавать сильный текст».

Пиши, сокращай. Как создавать сильный текст

Настоятельно рекомендую всем кто хотя бы иногда что-то пишет.

Как я уже говорил выше, социальная оптимизация большинства сайтов обычно ограничивается установкой виджетов «Поделиться» Фейсбука, ВКонтакте и Твиттера — это верный ход, но этого часто мало. Появилось много сторонних сервисов, которые существенно упростили эту процедуру. Например, блок «Поделиться» Яндекса и многие другие. К сожалению, социальные сети не всегда корректно распознают расшариваемый контент. И очень часто необходимо программно уточнять его тип и характеристики. Чтобы после репоста, публикация в социальных сетях выглядела интересно.

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

Сначала как должен.

В Фейсбуке.

Как должен выглядеть репост в Фейсбуке

ВКонтакте.

Как должен выглядеть репост ВКонтакте

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

А вот как не должен расшариваться контент.

В Фейсбуке.

Как не должен расшариваться контент на Фейсбуке

ВКонтакте.

Как не должен расшариваться контент ВКонтакте

Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.

Такой шаринг никуда не годится.

Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.

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

Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph.

Протокол Open Graph

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

Протокол Open Graph хоть и является разработкой Facebook, однако, поддерживается всеми популярными соцсетями. На данный момент Open Graph поддерживают: Твиттер, ВКонтакте, Google+, LinkedIn, Pinterest и многие другие.

Основные метаданные Open Graph

  • og:title — название объекта, заголовок;
  • og:type — тип объекта, в зависимости от которого задаются другие свойства;
  • og:image — URL-адрес изображения;
  • og:url — канонический URL-адрес объекта.

Дополнительные метаданные Open Graph

  • og:audio;
  • og:description;
  • og:determiner;
  • og:locale;
  • og:locale:alternate;
  • og:site_name;
  • og:video.

Структурированные свойства

Ряд свойств имеют дополнительные метаданные, которые определяются как и обычные метаданные.

С полным описанием протокола Open Graph можно ознакомиться на сайте Ruogp.me.

Подключение Open Graph

Open Graph подключается к HTML-страницам так же как и любые другие метатеги.

Для статичных страниц так, например:





Как подключить Open Graph к WordPress

Для WordPress традиционно существует два способа подключения: с помощью плагина и ручное подключение с помощью фильтров и экшенов.

Подключение Open Graph к WordPress с помощью плагина

Для подключения Open Graph к WordPress существуют специальные плагины:

  • WP Facebook Open Graph protocol;
  • Open Graph.

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

Самые популярные:

  • Yoast SEO — рекомендую;
  • All in One SEO Pack.

Иногда поддержка Open Graph имеется прямо в теме WordPress, особенно это касается премиум-тем. Поэтому, перед стартом работ по SMO, нужно открыть HTML-код сайта и проверить его на наличие метатегов Open Graph. Их можно определить по характерному свойству (property) — «OG:».

Подключение Open Graph к WordPress без плагинов

Код размещаем в файле функций активной темы (functions.php) или в функциональном плагине, в который вы выносите весь функционал, чтобы не потерять его при смене темы.

// Поддержка Open Graph в WordPress

function add_opengraph_doctype( $output ) {
    return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');

function insert_fb_in_head() {
    global $post;
    if ( !is_singular())
        return;
    echo '';
    echo '
';
    echo '
';
    echo '
';
    echo '
';
    if(!has_post_thumbnail( $post->ID )) {
        $default_image = "URL дефолтного изображения";
        echo '
';
    } else {
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '';
    }
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

В результате на страницах всех записей будут выводиться основные метаданные Open Graph:

  • og:title;
  • og:type;
  • og:url;
  • og:site_name;
  • og:image.

А также fb:admins, в котором нужно указать ваш Facebook ID. Есть несколько способов определения своего ID, самый простой — навести курсор мыши на вашу аватарку Facebook, в системной строке браузера увидим fbid. Это и есть Facebook ID.

Отдельно стоит остановиться на og:image. В качестве изображения будет установлена миниатюра текущей записи. В случае ее отсутствия будет выводиться дефолтное изображение, ссылку на которое задается в переменной $default_image.

оптимизация сайта под социальные сети — Open Graph

Англ. Social media optimization — SMO — и есть оптимизация сайта под социальные сети. (не путать с микроразметкой shema.org)

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

Если говорить не распыляясь, то техническая составляющая задачи SMO (а по теме этого поста — Open Graph) направлены на то, чтобы:

1 — дать возможность посетителю как можно легче делиться понравившимся контентом (как добавить на сайт кнопки социальных сетей кнопку поделитьсяКак установить на страницы сайта кнопки социальных сетей
Как установить на страницы сайта кнопки социальных сетей — подробная инструкция
)…

2 — сделать так, чтобы анонс публикации был максимально приближен к задумке автора (выгода со всех сторон))

к оглавлению

как подключить Open Graph к WordPress при помощи плагинов

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

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

конкретные плагины:

WP Facebook Open Graph protocol;

Open Graph.

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

это:

Yoast SEO;

All in One SEO Pack.

Всказываясь прямо, я, на своих сайтах, не использую функции поддержки Open Graph в плагинах Yoast SEO или там в All in One SEO Pack — не очень люблю многофункциональные плагины, использую их только в основном конкретном функционале.

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

Хотя, в общем, ничего против плагинов не имею… и, скорее, ЗА! нежели супротив) — просто, не всё и не всегда целесообразно реализовывать при помощи плагинов.

к оглавлению

как подключить Open Graph к WordPress с помощью кода


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

Важно знать!

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

Откройте исходный код страницы "Ctrl + U" и проверьте на наличие og по характерному тегу property от англ. приоретет.

Дважды добавлять к сайту протокол og не нужно!

Добавьте этот код в файл functions.php активного шаблона (также можно прописать данные строки в какой-то личный плагин, созданный для этих целей — как такой плагин /или добавочный файл функций/ создать, описано в этой статье):

/* добавим Open Graph в WordPress */
add_action('wp_head', 'insert_ss_fb_in_head', 5 );
function insert_ss_fb_in_head() {
global $post;
if (!is_singular())
return;
//echo ''; // это возможно закомментировать
echo '';
echo '';
echo '';
echo '';
if(!has_post_thumbnail( $post->ID )) {
$default_image = "/wp-content/themes/имя_шаблона/images/имя_картинки.jpg"; // путь к картинке Лого
echo '';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '';
}
echo "";
}
/* добавим Open Graph в WordPress */

В результате отработки кода на страницах всех записей будут выводиться основные метаданные Open Graph — и как следствие, например, Фейсбук, теперь будет подцеплять к анонсу соответствующую тексту картинку:

к оглавлению

og:title — заголовок страницы…

og:type — содержимое, контент…

og:url — адрес страницы…

og:site_name — имя сайта.

og:image — картинка страницы.

Пара дополнений относительно og:image.

Код отрабатывает таким образом, что, в качестве изображения поста, будет установлена первая картинка статьи — обычно это миниатюра (thumbnail) текущей записи. Размеры картинки должны быть более 200х на 200px, в противном случае Ф.Б её не распознает!

Что примечательно: если миниатюра записи отсутствует, то будет использовано любое первое изображение текущей записи. А вот коли в посте ни того, ни другого нет — будет выводиться дефолтное изображение, ссылку на которую требуется организовать в переменной $default_image. Обычно указывают путь к изображению логотипа сайта: 250 — 250px.

fb:admins — суда нужно прописать свой юзер ID ФБ. Как его узнать, читайте… Также можно эту строку закомментировать: использование её отработки необязательно.

Всё как бы хорошо! однако, если задуматься и задаться таким резонным вопросом: а если кто-то поделится архивом рубрики или метки моего сайта? или Главной страницей? какая миниатюра прикрепится к анонсу?..

В этом случае социальная сеть возьмёт самое первое изображение на странице; т.е. возьмёт фото (миниатюру) самой последней публикации из архива! — это не очень хорошо, так как публикации время от времени пополняются, а значит и изменяются миниатюры, и более того миниатюра некой статьи может не соответствовать прямой тематике Архива!… а следовательно, в соцсетях возникает каша из изображений…

Чтобы этого избежать, предлагаю, страницы архивов: Главной стр. архивов Рубрик, Тегов и авторов снабдить своим изображением (возможно, с помощью условных тегов, задавать своё изображение для каждого архива. Почитать подробнее о работе с условными тегами WPКак найти и убрать циклические ссылки… Работа с условными тегами Как найти и убрать циклические ссылки… Работа с условными тегами).

к оглавлению

Что такое 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?

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 в выдаче гугла заголовок этой страницы будет выглядеть — «Купить енота — Милые животные». Это вам не только релевантность снизит, так еще и смуту в умы обычных пользователей внесет. В общем ход мыслей, надеюсь, вам стал понятен.