Пуленепробиваемая разметка open graph
Содержание:
- Правила записи музыки на USB-носители
- Проверка микроразметки Open Graph
- Как составить хороший Description
- Определения месторасположения
- Открытые и закрытые порты
- Возможные проблемы при склейке видео
- Как использовать Open Graph разметку?
- Информация об авторе статьи
- Основные
- Сервисы для работы и плагины Open Graph
- Публикуете много видео? Используйте Open Graph
- Types
- Аналитика социальных сетей
- оптимизация сайта под социальные сети — Open Graph
- С каких площадок идет трафик
- Команды для поисковых роботов (мeta теги)
- Социальная сеть ВКонтакте не берет краткое описание (description)
- Используйте качественные изображения
- Микроразметка хлебных крошек
- Как внедрить OG на сайт?
- Добавляем разметку с помощью плагинов
- Способы микроразметки
- Заключение
Правила записи музыки на USB-носители
Для того чтобы не возникло перечисленных ранее сложностей, при записи музыки стоит придерживаться следующих несложных правил:
- Лучше всего пользоваться USB-носителем с небольшим объёмом до 8 ГБ.
- При записи в формате FAT32 чаще всего проблем с прочтением не возникает.
- Все файлы желательно размещать в корневом каталоге, или же в папки, расположенные в самом корневом каталоге.
- Выбирайте формат для файлов mp3 или wav.
- Перед записью USB-накопитель необходимо проверить на отсутствие вирусов.
- Не стоит производить зарядку других устройств через гнездо для USB.
Учтя все перечисленные нами проблемы, вы без особого труда сможете подобрать подходящие под вашу аудиосистему современные накопители данных. И это позволит во время поездок получать удовольствие не только от вождения, но и от любимой музыки.
Проверка микроразметки Open Graph
Начнем с «книгоморды», вставляем в соответствующее поле адрес страницы сайта, которую хотим проверить и жмем на кнопку «Отладка». Если все сделано правильно, ошибок быть не должно, а результат должен быть примерно таким:
Теперь проделаем то же самое в валидаторе микроразметки от Яндекса, но тут оказалось не все так замечательно, и я получил ошибку, которая гласит:
ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix
Выглядит это дело следующим образом:
Что это за атрибут такой и почему он не известен валидатору? Оказалось все просто, чтобы избавиться от подобной ошибки всего на всего необходимо явно указать Яндексу, что мы используем микроразметку (протокол) Open Graph. Для этого в индексном файле нашего шаблона необходимо найти открывающийся тег HTML:
<html lang="en">
И заменить его следующей строкой:
<html lang="en" prefix="article: http://ogp.me/ns/article#">
После этого ошибка в валидаторе Яндекса исчезнет. Кстати возможны случаи, когда вместо article Яндексу не нравится префикс fb, в таком случае в теге html необходимо дописать дополнительную строку fb: http://ogp.me/ns/fb# и так далее:
<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
Как составить хороший Description
В сети огромное количество материала на эту тему, но в этой статье объединены лучшие практики по составлению этого мета-тега.
1. Соответствие содержанию
Это очень важно, т.к. поисковики всегда узнают о том, что мета-данные на странице не честным путём заставляют посетителей переходить по ссылкам и могут даже наложить фильтры на такие сайты – это плохой пример «чёрного SEO»
Но кроме этого, вводящие в заблуждение описания, обязательно, увеличат показатель отказов – что уже плохо само по себе. Обязательно делайте так, чтобы мета-описание действительно соответствовало содержанию контента на странице.
3. Ключевой запрос
Если ключевое словосочетание поискового запроса совпадает с частью текста в мета-описании, поисковики будут более склонны использовать именно этот фрагмент и выделять его в результатах поисковой выдачи. Этот фактор сделает вашу ссылку на сайт еще более эффективной, а у вас появится косвенная возможность формировать содержание сниппета таким образом, как вы хотите.
4. Стиль изложения
Текст описания должен быть составлен простым и лёгким языком, понятным каждому. Отнеситесь к этому, как к приглашению на вашу страницу. Не рекомендуется использовать сухие фразы на подобии: «Очень скучная фраза, описывающая несуществующий, но очень нужный продукт в определённой мега-сложной сфере». Это описание не будет уникальным и интересным по посетителей, и люди не будут знать, что именно они получат в результате просмотра страницы.
5. Призыв к действию
«Посмотрите какое чудесное средство против пятен. Узнайте как оно за 5 минут удаляет пятна жира!» Это пункт сопоставим с предыдущим пунктом о стиле изложения, но его стоит выделить. Это ваш продающий текст, где промежуточный продукт — это связанная страница, а не сам товар на этой странице. Фразы-мотиваторы, такие как: «Успей купить», «Проверь себя», «Получи бесплатно» будут здесь очень кстати.
6. Использование спецификаций
Например, если у вас есть товар для технически подкованных пользователей, то стоит акцентировать особое внимание на индивидуальные технические характеристики продвигаемого продукта: марка, модель, цена и тому подобное. Если человек целенаправленно ищет данный товар или услугу, то вам не нужно будет его лишний раз убеждать, что бы перейти на вашу страницу, а присутствие такого параметра как цена, почти гарантированно приведёт к клику
7. Оптимальная длина
По большому счету, оптимальной длины для description в SEO не существует. Здесь всё больше зависит от смысла, который вы хотите передать. Стоит написать достаточно текста, чтобы донести сообщение, но в то же время сделать его коротким и ёмким. В настоящее время поисковики в большинстве случаев выдают описания длиной до 200 символов, с редкими модификациями до 300 печатных знаков. Помня это, попытайтесь вложить важную информацию в первых 150 символов описания.
Определения месторасположения
<meta property="place:location:latitude" content="13.062616"/> <meta property="place:location:longitude" content="80.229508"/> <meta property="business:contact_data:street_address" content="Название улицы"/> <meta property="business:contact_data:locality" content="Город"/> <meta property="business:contact_data:postal_code" content="Индекс"/> <meta property="business:contact_data:country_name" content="Страна"/> <meta property="business:contact_data:email" content="cotact@mail.com"/> <meta property="business:contact_data:phone_number" content="+91 1234567890"/> <meta property="business:contact_data:website" content="http://www.website.com"/>
Помогаем Google определить месторасположение вашего магазина или офиса, а так же другую контактную информацию.
Открытые и закрытые порты
Возможные проблемы при склейке видео
Как уже было упомянуто, для успешной склейки видео необходимо, чтобы файлы были закодированы с одинаковыми настройками. Если какие-то из ключевых параметров видео или аудио будут различаться, то склейка не сможет
завершиться успешно. Помимо этого следует иметь в виду, что при наличии большого количества файлов может накапливаться рассинхронизация видео и аудио. Т.е. звук может начаться на доли секунды раньше и не будет совпадать с видео. Это происходит из-за того, что у каждого из файлов длина видео и аудиотреков не совпадают идеально, а при склейке эти несовпадения накапливаются, что приводит к небольшому смещению звукового ряда относительно видео. Поэтому после получения выходного файла следует убедиться, что со звуком все нормально. Если это не так, то возможно потребуется производить склейку звука в полноценном видеоредакторе. Тем не менее при небольшом количестве видеофрагментов эта проблема неощутима, и поэтому можно не обращать на нее внимания.
Как видно из названия программы MKVToolNix, она предназначена для работы с контейнером MKV. Т.е. результирующий файл будет получаться только с таким расширением. Тем не менее это не мешает задавать в качестве исходного материала файлы других типов. Но если Вам нужно получить результирующее видео в формате, отличном от MKV, то следует после склейки файлов воспользоваться сторонними программами для смены контейнера видео. Например это можно сделать с помощью программы .
Как использовать Open Graph разметку?
Причем 5 из них можно назвать обязательными, остальные (полный список можно найти на) – второстепенными, но позволяющими повысить информативность превью ссылки (например, добавить контакты владельца контента, адрес и пр.).
Итак, пример куска кода с обязательными тегами (свойствами) OG выглядит так:
meta property=»og:title» content=»Здесь вы прописываете название, которое хотите видеть в превью ссылки в социальной сети«
meta property=»og:image» content=»Здесь указывается ссылка на картинку, которая будет отображаться в превью«
meta property=»og:type» content=»article»/> — этот параметр определяет тип добавляемого материала (в данном случае — статья).
meta property=»og:url» content= «Ссылка на саму веб-страницу, которая и будет добавляться в соц. сеть«
ВАЖНО. Для популярных CMS существуют даже свои плагины, позволяющие внедрить разметку Open Graph для Facebook, VK и прочих соцсетей самостоятельно, без привлечения специалистов и долгого «рытья» в коде
Это значительно облегчает интеграции OG даже для неопытных пользователей.
Аналоги Open Graph
OG не одинок в мире микроданных. Помимо него используется еще множество различных словарей микроразметки. Наиболее яркими представителями можно назвать следующие:
Как устроен мир семантической разметки
- Микроформаты (Microformats.org). Этот проект можно рассматривать как набор инструментов, заточенных под определённые нужды (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Главная особенность Microformats – более сложное внедрение, поэтому этот словарь применяется сегодня все реже.
- Schema.org – словарь, активно поддерживаемый поисковиками (создавался с целью обеспечения возможности формирования специальных сниппетов в поисковой выдаче). Главная особенность этого инструмента – гибкость, которая достигается за счет обилия свойств, которые можно описать в коде микроразметки. Всего словарь насчитывает более миллиона характеристик и свойств.
- Dublin Core. Этот словарь разрабатывался с прицелом на различного рода электронные библиотеки и базы данных, и активно используется специалистами музейной сферы, библиотечного дела и пр. Он, в отличие от других, даже стандартизирован в РФ ГОСТом Р 7.0.10-2010.
И это лишь малая часть словарей, используемых сегодня для облегчения жизни владельцам сайтов, оптимизаторам и конечным пользователям. Внедрение Open graph разметки гарантированно улучшит превью ссылок Вконтакте, Skype, Facebook, Google+, Twitter, Pinterest, LinkedIn и др.
Обязательно внедряйте микроданные на сайт, чтобы ваши ссылки в соцсетях имели красивый вид с правильным изображением и актуальным содержанием!
Информация об авторе статьи
Увековечить себя в микроразметки поможет следующая строчка в коде:
<meta name="article:author" content="https://www.facebook.com/ivanpupkin">
Если объект страницы — продукт коллективного труда, то авторов можно указать через запятую:
<meta name="article:author" content="https://www.facebook.com/ivanpupkin, https://www.facebook.com/sergeyvolkoff">
Как вы уже успели заметить, указание автора происходит путём указания ссылки на его профиль в Facebook. Но как быть, если авторство застолбить охота, но профиля в FB нет? В таком случае используем следующий тег:
<meta name="author" content="ivanpupkin" />
Да, он уже идёт без пометки og и не очень каноничен, но это вынужденная мера — не заводить же аккаунт в Facebook, в самом деле!
Основные
Определяет кодировку веб-страницы:
Определяет заголовок веб-страницы, который также отображается в результатах поиска Google, Яндекс, Bing и др. Длину заголовка стоит уместить в 70 символов, так как остальное будет отсечено при отображении:
Определяет краткое описание содержания веб-страницы, которое также может быть использовано в выдаче поисковых систем. Длину описания стоит уместить в 150 символов, так как остальное будет отсечено при отображении:
Известен как метатег адаптивного дизайна, потому что описывает, как разметка и контент изменяются в зависимости от размера области просмотра устройства. Атрибут принимает различные значения, однако указанный выше вариант можно назвать стандартным:
Определяет базовый URL-адрес для ссылок на внешние файлы, такие, как CSS, Javascript и изображения. В результате браузер найдёт файл независимо от размещения текущей веб-страницы. Это не самый полезный тег, но если его указать, то объём исходного кода страницы уменьшится, а перенос сайта на другой домен принесёт меньше головной боли разработчику:
Определяет «Имя приложения», которое появляется под иконкой страницы на мобильных устройствах, когда пользователь использует функцию «Добавить на главный экран» в веб-браузере:
Сервисы для работы и плагины Open Graph
Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.
Составить код разметки Open Graph автоматически
Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.
Пример работы сервиса
Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:
Пример работы парсера
Если у владельца сайта нет особого желания разбираться с протоколом Open Graph, самостоятельно разбираясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS:
- «Open Graph» или «Yoast SEO» для WordPress;
- «Phoca Open Graph» для Joomla;
- «Open Graph Meta» для Opencart.
Сервис проверки Open Graph
Контролировать разметку страницы Open Graph можно через специализированный сервис, разработанный Facebook. С его помощью веб-мастер узнает, как социальная сеть будет отображать анонс внешней страницы, и сможет отредактировать мета-тег для лучшего отображения превью в социальных медиа.
Фрагмент работы инструмента
Наличие разметки определяет инструмент для автоматического аудита конкретной страницы «Анализ контента». Если нужно быстро проверить, работает ли разметка, а также оценить контент, юзабилити, технические характеристики и мобильность страницы по многим параметрам, попробуйте сервис.
Фрагмент анализа инструментом
Публикуете много видео? Используйте Open Graph
Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.
Больше информации об этом — в справке Яндекса.
В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:
- og:title — название видео, здесь можно указать до 1000 символов;
- og:url — URL страницы с видео;
- og:video — путь к видеоплееру или файлу;
- og:image — ссылка на картинку, которая должна использоваться как заставка видео;
- og:description — описание ролика (от 150 до 1000 символов);
- ya:ovs:upload_date — дата и время загрузки;
- ya:ovs:adult — в этом мета-теге нужно указать, является ли ваш ролик контентом «для взрослых». Если да, укажите значение «true», если нет — «false»;
- video:duration — длительность видео (указывается в секундах с округлением до целого числа);
- og:type — категория видео;
- og:video:type — доступные кодеки для данного формата видео.
Types
The following is a list of the possible values for og:type
- band
- government
- non_profit
- school
- university
Products and Entertainment
- album
- book
- drink
- food
- game
- movie
- product
- song
- tv_show
For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help to make more concrete connections between graphs.
Websites
- article
- blog
- website
Use article for any URL that represents transient content — such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.
If your object does not fit into one of the types above, you can specify your own type. This will be represented as type other on Facebook. We will monitor the most commonly used types and graduate them to fully supported og:types. If you are specifying your own type we recommend that you use your own namespace. For example if you are moviesite.com, and you want to mark a URL on your site as a director you would do:
<html xmlns:moviesite="http://www.moviesite.com/ns#" >
<head>
....
<meta property="og:type" content="moviesite:director">
Аналитика социальных сетей
Если собираемся использовать аналитику Facebook — Facebook Analytics, мы должны предоставить уникальный идентификационный номер, связанный с учетной записью. Тег будет выглядеть примерно так:
У Twitter есть нечто похожее — Twitter Card Analytics. Чтобы получить максимальную отдачу от этого инструмента, Twitter рекомендует использовать следующий тег , содержащий имя пользователя Twitter, которое хотим связать с общей веб-страницей:
Однако, если у нас нет особого интереса к использованию этих аналитических инструментов, то, пропуск двух вышеуказанных тегов не повлияет на отображение общей веб-страницы на временной шкале Facebook или в фиде Twitter.
оптимизация сайта под социальные сети — Open Graph
Англ. Social media optimization — SMO — и есть оптимизация сайта под социальные сети. (не путать с микроразметкой shema.org)
Комплекс важных мер целиком направленных на привлечение на веб площадку посетителей из социальных медиа: страниц, групп или блогов социальных сетей и прочая…
Если говорить не распыляясь, то техническая составляющая задачи SMO (а по теме этого поста — Open Graph) направлены на то, чтобы:
1 — дать возможность посетителю как можно легче делиться понравившимся контентом (как добавить на сайт кнопки социальных сетей кнопку поделиться
Как установить на страницы сайта кнопки социальных сетей — подробная инструкция)…
2 — сделать так, чтобы анонс публикации был максимально приближен к задумке автора (выгода со всех сторон))
С каких площадок идет трафик
Команды для поисковых роботов (мeta теги)
<meta name="robots" content="all"/>
Команды которые понимают все роботы
- — разрешено индексировать текст и ссылки на странице, аналогично <meta name=»robots» content=»index, follow»/> (по умолчанию)
- — запрещено индексировать текст и переходить по ссылкам на странице, аналогично <meta name=»robots» content=»noindex, nofollow»/>
- — не индексировать текст страницы
- — не переходить по ссылкам на странице
Команды для Yandex
- — не показывать ссылку на сохраненную копию на странице результатов поиска
- — не использовать описание из Яндекс.Каталога для сниппета в результатах поиска
- — не использовать описание из каталога DMOZ для сниппета в результатах поиска
Социальная сеть ВКонтакте не берет краткое описание (description)
После того как Open Graph будет внедрен наверняка каждый заметит одну неприятную особенность при публикации записей в социальную сеть ВКонтакте. Дело в том, что именно эта сеть при формировании превьюшки (сниппета) упорно не желает брать в краткое описание статьи указанное в поле description. Все остальные соц. сети это делают, а вот ВКонтакте отказывается.
Чтоб понять причину подобного явления я решил задать вопрос в службу поддержки, на что получил вполне доходчивый ответ:
Получается ВКонтакте намеренно перестал брать краткое описание в свой сниппет еще с осени 2016 года. Жаль конечно, но что поделаешь. Так что если вы заметили подобную проблему знайте что это не ваша вина, а некие запреты со стороны социальной сети.
В заключение хочу отметить, что кроме протокола Open Graph существует множество других форматов микроразметки, в частности Schema.org, о которой мы говорили в статье «Микроразметка Schema.org для материалов Joomla 3».
Используйте качественные изображения
Всегда лучше использовать оригинальные изображения — те, которые вы сделали сами, — чем стоковые фотографии. Например, странице контактов нужны фотографии настоящих людей, а не белозубых актёров, а в карточку товара лучше поместить реальную фотографию продукта с разных ракурсов и т.п..
Ваша статья нуждается в изображении, соответствующем ее теме. Если вы выбираете случайную фотографию только для того, чтобы получить зеленый маркер в анализе контента, то вы делаете это неправильно. Изображение должно отражать тему поста или иметь иллюстративные цели в рамках статьи, конечно. Обязательно размещайте изображение рядом с соответствующим текстом. Для всего этого есть простая SEO-причина: изображение с соответствующим текстом оценивается выше по ключевому слову, чем без него.
×
Замечание для внимательных читателей
Стоит сразу оговориться, что для этого сайта картинки — не источник трафика, поэтому фотографии взяты с фотостока и могут не в полной мере соответствовать контексту повествования и некоторым рекомендациям в плане именования. Главная их задача здесь — логическая пауза и переключение внимания.
Продолжаем!
Микроразметка хлебных крошек
Главным здесь для нас будет определить основной контейнер и вложенный элемент, который, как правило, будет повторяться в цикле.
- Основному контейнеру мы добавляем атрибут itemscope, объявляя его объектом микроразметки, и указываем его тип через ссылку на schema.org атрибута itemtype.
- Отдельный элемент «крошка» мы размечаем через атрибут itemprop=»itemListElement», указывая, что это элемент списка.
- Добавляем itemscope, так как это тоже объект, и указываем itemtype.
4. Ссылку на пункт крошек мы размечаем через атрибут itemprop=”url”, название пункта — itemprop=»name», если есть картинка — itemprop=»image», а специальное свойство position отвечает за порядковый номер в списке, нумерация начинается с 1.
Разметка хлебных крошек скриптом JSON-LD будет выглядеть следующим образом:
В данном примере @id — это уникальный url для данной страницы, name — название пункта меню, image — картинка, а position — позиция пункта в списке, нумерация также начинается с единицы.
Как внедрить OG на сайт?
Информация для соцсетей передается с помощью специальных тегов ОпенГраф. Они же, в свою очередь, прописываются в блоках html и head.
В теге html объявляем то, что на странице мы используем словарь OG.
<html xmlns:fb=”http://ogp.me/ns/fb#”>
Остальное прописываем в head. Вот основные мета теги Open Graph:
- og:title – аналог обычного title, заголовок страницы или другого объекта, он же текст ссылки;
- og:description – как и стандарный description, описание материала, которое будет выводиться под заголовком;
- og:type – типы объектов, это может быть статья, видео или аудио трек;
- og:image – ссылка на иллюстрацию материала;
- og:url – собственно сама ссылка на материал.
Далее примеры как прописать теги OG.
В примере встретилось еще несколько полезных тегов. Желательно указывать локализацию, можно задать размер изображения.
Вариантов значений тега type достаточно много. Для разных видов контента они свои. Кроме того, с этим связаны атрибуты в теге html. Подробное описание содержится в документации Фейсбук для разработчиков
или на сайте Open Graph.
Для каждой соцсети существуют отдельные теги. Особенно много специализированных тегов у Twitter. Например, у всех сетей разные требования к размерам картинок. И чтобы все это выглядело красиво можно прописать vk:image для VK, fb:image для Фейсбук, twitter:image для Твиттер. Каждая соцсеть будет брать параметры изображения из своего тега.
Добавляем разметку с помощью плагинов
Плагин All in One SEO Pack
Этим плагином пользуюсь я на своем блоге. Его можно скачать здесь. Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.
Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить»
Самое важное для нас — в настройках само́й статьи или страницы блога. Выглядят эти настройки вот так:
Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title»
На сколько хорошо работает этот плагин, вы можете проверить, нажав на кнопку «Мне нравится» под этой статьёй. После этого на вашей стене Facebook появится первая картинка статьи и заголовок + описание, которые вы видели чуть выше на скриншоте. Переходим ко второму варианту.
Плагин Facebook Open Graph Meta
Этот вариант также прост как и предыдущий. Вы скачиваете этот плагин здесь(работу плагина я проверил, и также я знаю, что его автор — опытный разработчик, который ведёт свою страницу на Facebook), также как и в первом варианте загружаете на блог через панель управления и активируете. Я подробно остановлюсь на настройках этого плагина.
В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:
Первое поле «App Id» можете пропустить. Во второе поле «Admins» вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:
на
Скопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).
После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.
Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу . Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней».
Последний важный шаг. Вам необходимо вручную заменить тег <html> в файле header.php на этот код:
В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег <html> (на скриншоте ниже), который надо заменить и сохранить изменения.
После этих действий плагин полностью готов к работе. Проверьте его действие, зайдя у себя в любую статью и нажав «Мне нравится». Потом посмотрите, какая информация появилась на вашей стене в Facebook.
Способы микроразметки
Есть несколько способов размечать данные на сайте. Рассмотрим их на примере микроразметки карточки организации.
Если перейти на сайт schema.org и пролистать страницу до конца таблиц, можно увидеть список примеров. У каждого из них есть несколько способов отображения — микроданные, RDFa и JSON-LD.
Микроданные
Микроданные позволяют сделать микроразметку прямо в коде, оборачивая нужные данные в теги с определенными атрибутами. Является достаточно простым и хорошо структурированным способом, рекомендуемым к использованию.
У микроданных есть список основных элементов:
- Атрибут itemscope, который показывает, что дальше передаются данные об объекте микроразметки.
- Атрибут itemtype, в котором указывается тип данного объекта ссылкой на него на сайте schema.org.
- Атрибут itemprop для определения конкретного свойства нашего объекта.
RDFa
RDFa (Resource Description Framework) — вид, очень похожий на микроданные, также имеет часть обязательных атрибутов:
- Атрибут typeof — аналог атрибута itemtype, но указывается не ссылкой, а названием самого типа.
- Атрибут property — аналог itemprop.
RDFa считается более мощным, но и более сложным инструментом. Если для ваших целей хватает микроданных, то рекомендуется остановиться на них, и не лезть в дебри RDFa.
JSON-LD
JSON-LD позволяет сделать разметку в виде объекта JSON, оформленного в виде скрипта. Таким образом, необязательно размечать данные в коде сайта, необходимую информацию можно вынести в отдельное представление, видимое только для поисковых систем. Поэтому, если на странице нет отображаемого контента для микроразметки или если проще отдельно вынести информацию, чем добавлять различные атрибуты в контенте, более подходящим вариантом окажется разметка скриптом JSON-LD.
Поисковая система Google рекомендует использовать формат JSON-LD:
- для разметки дат музыкальных концертов;
- для отображения телефонов организаций в поисковой выдаче;
- для разметки страниц, относящихся к различным мероприятиям и событиям — спектаклям, конференциям и т. п.
При такой разметке информация об организаторе, месте и билетах попадает в Knowledge Graph.
Зеленой рамкой на изображении выделены данные, представленные в Knowledge Graph
Рассмотрим микроразметку разных категорий.
Заключение
ВКонтакте нужно просто указать ссылку (в форме внизу страницы) и нажать «Выполнить». На Facebook же функционала немного больше — можно посмотреть текущую информацию о странице и при надобности сбросить её. И заодно посмотреть, правильно ли оформлена разметка (отмечу, что он может ругаться на разметку, но при этом нормально работать).
На этом всё, что я хотел рассказать про разметку Open Graph. В конце добавлю, что её следует использовать в совокупности со Schema.org для поисковых систем.
И конечно же, обязательно использовать кнопки социального шаринга, чтобы посетитель вашего сайта мог легко поделился информацией со своими друзьями.
