Здравствуйте. Данный материал познакомит Вас с протоколом Open Graph и ответит на все интересующиеся вопросы, которые крутятся около этого ключевого слова.
Итак, начнем. И для начала выясним предназначение протокола.
Open graph что это? Из названия статьи вы уже прояснили для себя, что это какой-то протокол. Не будем углубляться в правильность формулирования ответа и попробую на простом языке. Итак, это удобный случай связывать материал на странице сайта с социальными сетями и правильная его презентация читателям. Уловили суть. Нет?
Попробую еще раз, данная разметка преобразует внешний вид анонса в социальной сети, который был отправлен пользователем на его страницу соц.сети через ваш сайт. Для примера смотрите скриншот и все поймете.
Как вы заметили это open graph facebook.
А вот пример как выглядит уже опубликованный в соц. сети вконтакте open graph.
Согласитесь, кликабельно выглядит, а по сути это просто линка, которой поделился читатель с вашего сайта благодаря установленным кнопкам. Лично для меня facebook open graph лучше всего импонирует.
Мета-теги Open Graph
Сразу покажу вам как мета-теги выглядят в коде страницы сайта, если open graph реализован. Дабы увидеть реализацию данного протока, откройте любую страницу сайта через Ctrl+U, а зачем через поиск отыщите. Кстати, в обязательном порядке они должны располагаться в разделе <head>…</head>, смотрите скриншот.
В пример не привожу адреса своего блога, так как данный протокол не реализован. Возьмем любой сайт из интернета.
Теперь подробнее о каждом мета-теге:
- «og:locale» — указывает (место расположение) или более мелькающими словами в этой теме: локализацию (язык сайта), рекомендуется использовать значение «ru_RU» для жителей России по умолчанию именно.
- «og:type» — указывает предназначение страницы (постовой, новость, изображение, видео, разделы, категория и т. д.), рекомендуют использовать по умолчанию «article». Но в данном случае это content="website"
- «og:title» — дазаем заголовок статьи. content="Купить органайзер, органайзеры и так далее..." В общем, здесь выносится название страницы.
- «og:description» — задаем оптимизированное краткое описание страницы, которое выводится при формировании превью ссылки. content="Желаете купить качественный органайзер и так далее..." Что является описанием просматриваемой страницы.
- «og:url» — линк на страницу сайта. В данном примере ссылкой выступает главный адрес главной страницы приведенного сайта.
- «og:image» — линк на картинку, которая будет показываться, отображаться в посте. Пример попался не совсем удачным, так как этого тега мы не наблюдаем.
- «og:site_name» — название сайта. Здесь очень просто.
Наконец, хочется дать небольшой совет, хотя кто я такой, чтобы советовать Вам. Читайте, изучайте и делайте выводы, а если уж надумали внедрять проток Open Graph, тогда в добавок создайте кнопки, которые будут призывать Ваших читателей поделится материалом в социальных сетях.
(Пока оценок нет)
Загрузка...
