{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Размещаете интересные статьи на своем блоге и хотите поведать об этом в соцсетях Вконтакте, Facebook, Одноклассниках и Twitter. А, правильно ли настроен ваш сайт для этого. Одно из необходимых условий использовать микроразметку Open Graph (сокращенно-OG). ","type":"unstyled","key":"8fev0"},{"data":{"image":{"id":"626950b75496ec5d5e49f9ff"},"contents":{},"images":[{"id":"626950b75496ec5d5e49f9ff"}]},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bld2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Что такое Open Graph - это протокол, с помощью которой фиксируется и структурируется значимая информация о странице, чтобы дальше использовать её в соцсетях.","type":"unstyled","key":"etsrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем использовать Open Graph","type":"header-two","key":"dpao5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ежели у вас на странице размещены кнопки шеринга, то вы конечно же предполагаете, что ваши посты будут репостить:","type":"unstyled","key":"925i2"},{"data":{"image":{"id":"6269521f514b9f308d41bb62"},"contents":{},"images":[{"id":"6269521f514b9f308d41bb62"}]},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"75h6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И будет неприятно, если в соцсети пост будет смотреться криво (какое нибудь изображение подтянется, а в анонсе неожиданно выскочит текст из титла (title) страницы).","type":"unstyled","key":"33oie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Публикуя контент в соцсетях с применением микроразметки Open Graph сделает посты более аккуратными и красивыми. Без разметки пост может смотреться не очень аккуратно или вообще плохо.","type":"unstyled","key":"7tu09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рандомное либо некорректное изображение, описание отсутствует либо нерелевантно материалу — всего этого может не быть, если применять OG.","type":"unstyled","key":"4skrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разметка изначально создавалась для Фейсбук, однако сейчас его применяют и другие соцсети ВКонтакте, Twitter, Pinterest, Telegram, LinkedIn, мессенджеры ( Viber, WhatsApp, Slack).","type":"unstyled","key":"26dov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В социальных сетях данная разметка улучшает внешний вид ваших постов — это еще один плюс в копилку стратегии контент-маркетинга и SMM-продвижения. Помимо этого, благодаря разметке Open Graph можно делать блоки с рекомендуемым контентом, если вы применяете Google AdSense для монетизации ресурса.","type":"unstyled","key":"3jptd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как использовать микроразметку Open Graph?","type":"header-two","key":"2g2dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис разметки","type":"header-three","key":"ehmbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":158,"style":"ITALIC"}],"text":"От разработчиков протокола Open Graph есть официальная информация на русском языке , о его характеристиках, руководстве по применению и ссылки на внедрение — ruogp.me. В справке вебмастера Яндекса все это описано в свободном и сокращенном виде.","type":"unstyled","key":"961vc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Справочники существуют также и для:","type":"unstyled","key":"11pgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Twitter","type":"unordered-list-item","key":"be4m9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Pinterest","type":"unordered-list-item","key":"chksi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Facebook","type":"unordered-list-item","key":"6keaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные метатеги","type":"header-three","key":"877j1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя теги Open Graph мы показываем социальным сетям, что за информация находится на странице. Их правильное заполнение формирует аккуратную видимость статьи в ленте.","type":"unstyled","key":"290hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:title — прописываем название статьи (заголовок).","type":"unordered-list-item","key":"820tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"79gm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:image — расположение картинки (url), оно будет вместе с анонсом поста.","type":"unordered-list-item","key":"b5f3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"btq64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У Facebook, Twitter и ВКонтакте различные правила к размеру картинок. Для правильного отображения картинки в посте, можно написать настройки по отдельности к любой соцсети, применяя такие теги, как fb:image, vk:image, twitter:image — любая соцсеть сперва просканирует свои теговые обозначения. Единственный недостаток этого способа — надо для разных социальных сетей делать отдельные изображения.","type":"unstyled","key":"48kcb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Другой способ — использовать такие атрибуты тега meta, как ширина и высота в пикселях (width и height), позволяющий прописать для всех социальных сетей один размер. На примере внизу размеры картинки прописаны для Фейсбук. Иные социальные сети это изображение будут подстраивать под свои стандарты.","type":"unstyled","key":"43i06"},{"data":{"image":{"id":"5ec8ad1e5ba0aa528c7ed343"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:image-width-height","type":"atomic:image","key":"b03um"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:description — небольшое описание поста. Сейчас в ВКонтакте и Facebook он почти не показывается. Но для Телеграма его надо прописывать.","type":"unordered-list-item","key":"9d6i"},{"data":{"image":{"id":"5ec8ae98a6f8f93bb9ecaa90"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:description","type":"atomic:image","key":"3m4l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:type — в этом месте надо указать тип содержания страницы. Глобальные типы: видео (video), музыка (music), книга (book), статья (article), сайт (website), профайл (profile).","type":"unordered-list-item","key":"163pk"},{"data":{"image":{"id":"5ec8af5dd09ebe58a38f11d7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:type","type":"atomic:image","key":"49asa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:url — тут укажите адрес страницы (url).","type":"unordered-list-item","key":"3rqi3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5fu2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:site_name — в этом месте пропишите название блога. В Facebook будет показываться URL.","type":"unordered-list-item","key":"e7t2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"341fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":156,"style":"ITALIC"}],"text":"Поподробнее о других meta тегов и массивах (несколько элементов тега) можно узнать на официальном ресурсе протокола Open Graph либо в справочнике Яндекса – https://yandex.ru/support/webmaster/open-graph/","type":"unstyled","key":"3vvl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот как отображается код страницы с использованием микроразметки OG:","type":"unstyled","key":"1dgqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1msek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8tbct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2du29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a7dto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fj8lu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bmqvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7jgmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d4t6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fnu26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"asbq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5ql64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"725lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7lbaq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Open Graph для видео","type":"header-three","key":"d1evh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если имеется много увлекательного видео на вашем ресурсе и вы хотите ими поделиться, тогда можете применить OG, чтобы данные передать в сервис Яндекс.Видео. В нашем протоколе OG есть различные meta теги, позволяющие детально описать ролик:","type":"unstyled","key":"df4s1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:image — ставим адрес (url) картинки видео (заставки);","type":"unordered-list-item","key":"af7ov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:video — пишем адрес (url) файла либо видеоплеера;","type":"unordered-list-item","key":"co95m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ya:ovs:adult — ограничение контента 18+ (с двумя значениями — \"false\" и \"true\");","type":"unordered-list-item","key":"e9631"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ya:ovs:upload_date — когда загружено (дата);","type":"unordered-list-item","key":"96g61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:type — к какой категории относится видеоконтент (эпизод сериала, фильм, прямая трансляция, выпуск ТВ-шоу, клип);","type":"unordered-list-item","key":"686es"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:video:type — различные кодеки для видео, которые имеются для формата;","type":"unordered-list-item","key":"5i9h0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"video:duration — продолжительность в секундах.","type":"unordered-list-item","key":"3bn05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способы внедрения Open Graph","type":"header-two","key":"3k89t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть два варианта указать микроразметку:","type":"unstyled","key":"bm64a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разметка вручную","type":"ordered-list-item","key":"cpda6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"в пропишите префикс, указывающий на применение разметки OG:","type":"unordered-list-item","key":"dkl6"},{"data":{"image":{"id":"5ec8b4afd8e3ee4a78bb492e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Префикс OG","type":"atomic:image","key":"ftf07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"между тегами напишите необходимые теги OG.","type":"unordered-list-item","key":"98v9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 2. Плагины OG для популярных движков ","type":"unstyled","key":"91b4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":16,"style":"ITALIC"}],"text":"OG для Joomla ― extensions.joomla.org/tags/open-graph/","type":"unordered-list-item","key":"7bmvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"OG для WordPress ― wordpress.org/plugins/search/open+graph/","type":"unordered-list-item","key":"aa87e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"OG для Opencart ― www.opencart.com/index.php?route=marketplace/extension&filter_category_id=20&filter_search=open%20graph","type":"unordered-list-item","key":"944k7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"OG для Битрикс ― marketplace.1c-bitrix.ru/search/?q=Open+Graph","type":"unordered-list-item","key":"1ltit"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":2,"offset":77}],"inlineStyleRanges":[],"text":"OG для Magento ― marketplace.magento.com/catalogsearch/result/?q=open%20graph#q=open%20graph&idx=m2_cloud_prod_default_products&p=0&nR%5Bvisibility_search%5D%5B%3D%5D%5B0%5D=1","type":"unordered-list-item","key":"f0db3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"OG для Drupal ― www.drupal.org/search/site/open%20graph?f%5B0%5D=ss_meta_type%3Amodule","type":"unordered-list-item","key":"fdqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В Tilda (конструктор сайтов) имеется оптимизация под соцсети.","type":"unstyled","key":"eg800"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":9,"offset":24},{"key":2,"length":40,"offset":40}],"inlineStyleRanges":[],"text":"Если используете движок WordPress, то в настройках плагина \"All in One SEO Pack\" имеется опция с разметкой Open Graph.","type":"unstyled","key":"4um6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как проверить микроразметку Open Graph","type":"header-two","key":"foreu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существуют три метода проверки OG:","type":"unstyled","key":"c5tn5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":32,"style":"ITALIC"}],"text":"Валидатор разметки от Яндекса — webmaster.yandex.ru/tools/microtest/","type":"unordered-list-item","key":"1m0r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью инструментов Фейсбук — developers.facebook.com/tools/debug/","type":"unordered-list-item","key":"55n01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Услуги Open Graph Check — opengraphcheck.com/","type":"unordered-list-item","key":"dig3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть проверка и для соцсети Twitter. А ВКонтакте имеется инструмент очищения кеша, если вы обнаружили на странице ошибку после публикации анонса в социальной сети, исправили ее, а пост так и не обновился.","type":"unstyled","key":"9vpdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для размещения постов в соцсетях форма является значимой не меньше, чем содержание. Применение разметки OG даст вам больше посетителей из соцсетей на ваш блог. ","type":"unstyled","key":"crrir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если остались вопросы по статье «Что такое Open Graph? Зачем и как использовать микроразметку Open Graph», то напишите в комментариях.","type":"unstyled","key":"d9e2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dkmmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"64t2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2pvkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7s0mv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bjoip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8mut1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"emdr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f8es9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qvod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d515t"},{"data":{"error":"ru.yandex.zen.common.noMoreNode.error.exceptions.AvatarsUploadTooSmallImageException"},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"l4m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"45o92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5m7co"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bevl5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"edf7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1kt0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"24knl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"MsJlMcoqHJ2tNEz2usMp"}],"entityMap":{"0":{"data":{},"mutability":"MUTABLE","type":"HASHTAG"},"1":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5ec6a237058db43258ef7a34/chto-takoe-wordpress-kak-rabotat-s-wordpress-dlia-chego-nujen-wordpress-6269678bbb8a5261a207297a?&"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5ec6a237058db43258ef7a34/nastroika-plagina-all-in-one-seo-pack-dlia-wordpress-626d5b4b2bd6ca74b83cc469?&"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}