Schema.org своими руками: настраиваем микроразметку без программиста
Программисты сейчас обиделись, а не надо. Они же попробуют справиться без вас, а потом придут к вам же с просьбой починить все, что поломалось в процессе. Шутка. Почти.
Рассказываем о словаре и синтаксисе микроразметки, собрали несколько плагинов и инструментов для создания и проверки разметки, разобрали по шагам один из плагинов.
Рассказываем о том, зачем нужна разметка Schema.org, что она из себя представляет и как ее создавать без знания кода.
Зачем нужна микроразметка
Schema.org — стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.
Кроме Schema.org есть другие виды микроразметок. У них разные назначения, поэтому вкратце приведем свойства основных видов, чтобы не путать:
Разница между словарем и синтаксисом
Словарь — это набор классов и свойств, которые описывают тип содержимого страницы и передают ключевую информацию. Словарь можно сравнить с языком — например, английским. Schema.org, Open Graph, Dublin Core — все это словари.
Синтаксис — это способ указания сущностей и свойств словаря в html-коде страниц сайтов. Если словарь — это английский язык, то синтаксис можно сравнить с латиницей.
Варианты синтаксиса, которые применяются для разметки Schema.org:
Подробнее о том, какой синтаксис лучше, поговорим чуть позже.
Чем различаются сайты с разметкой и без нее
Сайты с реализованной микроразметкой видно по сниппетам на странице поисковой выдачи. Вот пример: в выдаче два сниппета с одного и того же сайта, первый — с микроразметкой, второй — без нее.
А так выглядит сниппет страницы с афишей кинофильмов, если на странице есть микроразметка:
С помощью микроразметки в сниппетах страниц товаров отображаются цены:
И еще один пример: в первом сниппете реализована микроразметка хлебных крошек, а во втором такой разметки нет:
Больше информации о разметке Schema.org, а также перечень поддерживаемых сущностей — в справке Яндекса.
А здесь — виды расширенных результатов поиска в Google (отображаются для сайтов с реализованной микроразметкой).
Что говорят поисковики
Яндекс и Google советуют вебмастерам и оптимизаторам внедрять микроразметку. Основная мотивация: внедрение микроразметки улучшает сниппет визуально, а также повышает качество поиска (поисковые роботы лучше понимают содержимое сайта, на страницах которого реализована семантическая разметка данных).
Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку. (С разметкой тоже поможем).
Чем еще полезна микроразметка
Микроразметка выгодно выделяет ваш сниппет в поисковой выдаче на фоне конкурентов (если у них разметки нет или реализовано меньше фич). Даже если вы показались в выдаче ниже конкурентов, вы можете получить столько же кликов, а то и больше: ваш сниппет занимает больше места, содержит больше полезной информации для пользователя.
И тут срабатывает такая цепочка: привлекательный сниппет → больше пользователей кликают и переходят на сайт → улучшаются поведенческие факторы → вы ранжируетесь лучше и поднимаетесь в выдаче.
Также микроразметку используют собственные сервисы поисковиков — например, страница с реализованной разметкой может попасть в колдунщики на поисковой выдаче (при этом сам сайт не обязательно должен быть в ТОПе выдачи).
Словарь Schema.org
Словарь микроразметки состоит из сущностей (например, Продукт) и свойств, которые описывают параметры сущности (SKU, цена, наличие и т.д.).
Весь список сущностей и документация — на официальном сайте schema.org.
На скриншоте — часть сущностей (слева) и свойств сущности Thing (в правой части скриншота)
Рассказывать о всех сущностях не будем, приведем примеры самых популярных:
Оптимальный синтаксис
Мы уже упоминали о том, что для Schema.org подходят четыре вида синтаксиса:
Первые три имеют ряд недостатков и теряют популярность, а последний (JSON-LD) — используется все чаще.
Google рекомендует использовать именно JSON-LD — он более простой и компактный, в отличие от RDFa, микроформатов и других синтаксисов.
Но есть проблема: Яндекс пока не поддерживает синтаксис JSON-LD на поиске (хотя использует его в Яндекс.Почте). Поэтому, если вы продвигаетесь в Рунете (а скорей всего так и есть), вам этот синтаксис нет смысла использовать. В таком случае ваш выбор — микроданные или RDFa (микроформаты тоже вариант, но их используют не так часто — этот синтаксис имеет ряд ограничений и устарел по сравнению с другими стандартами).
Если ваш продукт или бизнес направлен на западный сегмент интернета и Google для вас в приоритете — используйте JSON-LD.
JSON-LD
Теперь о деталях. Поговорим о том, как выглядит синтаксис и какие правила в нем действуют.
JSON-LD в базовом виде выглядит так:
Вот как выглядит разметка
Обратите внимание! Наличие микроразметки не гарантирует того, что в поиске будет выводиться расширенный сниппет со всеми данными, указанными в разметке. Тем не менее, поисковые роботы все равно будут учитывать переданные данные и смогут лучше понимать содержимое страницы.
Как делать разметку JSON-LD
Ручная разметка в JSON-LD (да и в любом другом синтаксисе) — рутинная задача, отнимает много времени и всегда остается риск допустить ошибку. Упростить задачу можно с помощью генераторов JSON-LD, вот несколько популярных:
Проверка валидности разметки
При создании микроразметки важно, чтобы синтаксис был правильным и без ошибок. Даже если вы генерируете JSON-LD с помощью специальных плагинов или сервисов, не спешите загружать код на сайт, сначала проверьте его на валидность.
Для проверки кода используйте валидаторы от поисковиков:
Куда вставлять JSON-LD?
Если код валиден (валидатор не нашел ошибок) — можете смело добавлять разметку на сайт. Для этого код нужно вставить между тегами и на целевой странице.
Микроданные
В микроданных используется язык разметке HTML (в JSON-LD — JavaScript). Работать с этим синтаксисом сложнее — код разметки нужно прописывать в теле контента.
В основе микроданных — три атрибута:
Вот как это выглядит:
Прописывать такой код вручную — довольно трудоемкая и рутинная задача.
Сервисы для генерации микроданных
Хорошая новость в том, что для микроданных также существуют специальные сервисы-генераторы:
Сгенерируйте код и проверьте его на наличие ошибок (теми же сервисами).
Внедряем микроразметку самостоятельно и без знания кода
Покажем вам простой способ, как быстро и без единой строчки кода подключить микроразметку.
Автоматическая разметка страниц с помощью Маркера данных
Google разработал специальный инструмент для максимально простого внедрения микроразметки — Маркер данных.
Чем удобен инструмент:
Как пользоваться
Переходим в Маркер данных и выбираем подтвержденный ресурс;
Роботы Google просканируют страницы сайта и учтут заданную микроразметку.
Как изменить или убрать микроразметку
Когда робот Google снова просканирует страницы сайта, разметка перестанет учитываться и в поисковой выдаче будут отображаться обычные сниппеты.
Обратите внимание! Маркер передает данные только для робота Google. Если вы продвигаетесь в Яндексе, вам все равно придется добавлять код микроразметки на страницы. К счастью, для этого по-прежнему не обязательно знание кода.
Сайт на CMS? Используйте плагины
Рассмотрим самую популярную CMS в Рунете — Вордпресс. Для Вордпресс есть несколько решений, которые помогут просто и быстро внедрить микроразметку. Вот обзор плагинов, подходящих для этой задачи:
Настройка микроразметки в плагине Schema: пошаговая инструкция
Установите плагин и кликните по разделу Schema, который появится в боковом меню админпанели. Перейдите в раздел Settings → General. Выберите тип сайта и загрузите логотип.
Сохраните изменения и перейдите на вторую вкладку — Knowledge Graph. Здесь вам нужно указать, кого представляет сайт — выберите Person, если это личный сайт, или Organization (если продвигаете сайт компании).
Перейдите на вкладку Schemas. Выберите из выпадающих списков страницы «О себе» и «Контакты». Если хотите подключить разметку хедера и футера, хлебных крошек и других элементов страниц сайта — поставьте галочки напротив соответствующих параметров.
Также можно настроить автоматическое удаление микроразметки, если будет удален плагин Schema. Для этого перейдите на вкладку Advanced и поставьте галочку напротив «Delete Data on Uninstall».
Попробуйте проверить разметку в валидаторе Google (на всякий случай). Плагин работает корректно, поэтому ошибок не должно быть — смело загружайте код на сайт.
Примерно так же строится работа с другими плагинами для Вордпресс. Главное преимущество — вам не нужно разбираться в синтаксисе и прописывать все параметры вручную.
Выжимка
Если у вас сайт на Вордпресс — поставьте плагины для микроразметки и используйте их. Если сайт на другой CMS — поищите аналоги, скорей всего они есть и вам не нужно будет прописывать микроразметку вручную.
Практическое руководство по telegra.ph для владельцев telegram-каналов
Создавался telegra.ph Павлом Дуровым с целью сделать telegram более автономной сетью. Уже больше года пользователи читают статьи не выходя из мессенджера. Публикуем руководство для тех, кто начинает работу в этом сервисе.
UPD. 16.04.2018 День блокировки Telegram
Для тех, кто ищет зеркало telegra.ph – без VPN скоро, может быть, не получится работать напрямую. Пользуйтесь зеркалом: graph.org, ставьте плагин на вордпресс, переходите на блог: medium.com, статьи красиво подгрузятся в Instant View. Мы с вами.
Какие преимущества даёт telegra.ph
Ещё до появления этого сервиса в мессенджере появилась функция Instant view (мгновенный просмотр). Её суть заключается в том, что telegram научился захватывать страницы с форматированием, изображениями, видео.
Это хороший инструмент, если учесть, что возможности форматирования в самом мессенджере довольно скудные: полужирный, курсив, абзацы. Также в текст поста нельзя встроить изображения – приходится оформлять его отдельным постом.
Если же использовать telegra.ph или другие аналогичные сервисы, то менять форматирование можно по своему желанию:
Среди первых сайтов, которые можно посмотреть с помощью Instant view была блоговая платформа medium. Однако у telegra.ph перед ними несколько преимуществ: во-первых, в нём не нужно регистрироваться – вся информация о вас хранится в кэше и редактировать свои посты можете только вы, во-вторых, телеграф анонимен.
Как пользоваться telegra.ph
Если зайти на главную страницу этого сайта, вы почти ничего не увидите, но в этом и задумка. Всего на странице три поля и одна кнопка: заголовок (Title), имя автора (Your name), текст поста (Your story) и кнопка публикации (Publish).
Нет никакой привычной всем ленты новостей, поиска и других частей сайта. Нет регистрации и комментариев. Все посты доступны только по прямой ссылке, поэтому если вы её сразу не сохраните, то вряд ли потом сможете найти.
В поле Title нужно ввести заголовок статьи. В поле для имени можно указать своё настоящее имя, творческий псевдоним или никнейм – никто проверять не будет. Однако если вы планируете создавать несколько постов, можете привязать к имени ссылку. Это может быть сайт, страница в соцсети или адрес в telegram. Никаких ограничений на это нет.
Чтобы привязать ссылку нужно выделить имя и нажать link-иконку в появившемся меню, ввести или вставить ссылку и нажать Enter. Точно так же ссылки привязываются и к любому другому тексту. Для изображений этой функции пока нет. Если вставить ссылку на ролик на YouTube или Vimeo, а потом нажать Enter, то ссылка превратится в встроенный плеер. Таким же образом можно загрузить изображение или, например, твит – его можно будет репостнуть или лайкнуть. Эта функция работает, только если вы вставили ссылку с новой строки. Изображения тоже вставляются с новой строки – для этого нужно нажать на иконку фотоаппарата. К видео, твитам и картинкам можно добавлять подписи, но это необязательно.
Оформление текста в telegra.ph
Выделив какой-нибудь текст, вы сможете поменять его оформление. Для этого нужно выбрать в появившемся меню нужную иконку:
«“» – очень удобный инструмент для оформления цитат. Как и «T», он действует сразу на весь абзац. Есть два варианта оформления:
Чтобы оформить маркированный список, нужно поставить «*» или дефис в начале строки и нажать пробел. При переходе на новую строку будет создаваться новый пункт. Если вам больше не нужны пункты, нажмите Enter на строке с пустым последним пунктом. Нумерованный список можно создав поставив на новой строке единицу с точкой.
Как оформлять длинные тексты, чтобы их читали
Теперь, когда вы умеете работать с telegra.ph, пришла пора разобраться, как писать тексты так, чтобы их читали до конца. Кстати, мы уже писали гайд для тех, кто хочет создать хороший рекламный текст.
Всё начинается с интересного заголовка. Чем он интереснее, тем больше вероятность, что статью захотят прочесть. Например, можно привлечь представителей определённой целевой аудитории – «Как дворник может заработать на telegra.ph». Можно использовать цифры – «10 способов заработать на telegra.ph».
Попробуйте заинтриговать читателя, но не уходите в унылый кликбейт: «ШОК! Жуткая правда о telegra.ph!». Лучше будет написать что-то вроде: «Павел Дуров создал новый сервис. Можно ли его использовать для заработка?». На самом деле написание заголовков – целая наука, а лучший способ в ней разобраться – анализировать заголовки, которые привлекают вас.
Теперь пришло время первого абзаца. В нём нужно обозначить, о чём будет статья, и вовлечь читателя, плавно перейдя к делу. Многие пишут шаблонные «В этой статье вы узнаете о…» и тому подобное. Ещё хуже, когда читателю приходится погружаться в размышления автора, которые не несут практической ценности. Не мучайте своих читателей и сразу переходите к делу.
Разделяйте текст. Делите текст на предложения, а предложения на абзацы. Лучше не забивать абзацы длинными предложениями – они тяжело воспринимаются. Вашему подписчику будет сложно читать, поэтому он может бросить это гиблое дело.
Составлять абзацы нужно по смыслу: один абзац – одна мысль. Следите, чтобы переходы были плавными. Однако иногда используется приём, когда последнее предложение в абзаце не заканчивает мысль, заставляя прочитать ещё один абзац. А потом ещё и ещё.
Так же, как вы поделили предложения, нужно поделить абзацы. Для этого используются подзаголовки. Они помогают ориентироваться в тексте, чтобы можно было прочесть ту часть, которая больше всего интересует. Поэтому старайтесь давать подзаголовкам осмысленные названия.
Использование медиа
Не упускайте возможность вставить изображение, видео или твит. Они не только помогут разбавить текст, но и поспособствуют лучшему восприятию информации и завлекут читателей.
Полезное для журналистов, копирайтеров, авторов и редакторов. Всё — от словаря синонимов до форматирования в HTML. https://t.co/jTG7VpKVkl
Если вы вставляете картинку или фотографию, придумайте оригинальную, информативную или смешную подпись. В подписи к видео лучше написать, о чём ролик, чтобы читатель мог решить: смотреть или не смотреть.
Информация в списках, как ни странно, воспринимается лучше, чем обычный текст. Некоторые даже начинают чтение именно со списков. Поэтому не стесняйтесь их использовать: маркированные для перечисления, нумерованные – для приведения доводов.
Эти нехитрые правила помогут сделать даже длинный текст лёгким и увлекательным.
Вставка поста в telegram
Теперь, когда пост оформлен и опубликован, прочитайте его ещё раз, чтобы проверить на ошибки. Если вы их заметили, нажмите кнопку Edit, и исправьте их. Сделать это можно только с того же устройства, с которого вы писали пост.
Закончив с редактированием, скопируйте ссылку, и вставьте её в сообщение в telegram. Не забудьте придумать интересное описание, чтобы читатель захотел нажать на кнопку Instant view. К сожалению, эта функция пока не работает на компьютерах, и вашим читателям всё-таки придётся перейти по ссылке.
Удачи в написании и подписывайтесь на наш telegram 😉
Что такое разметка Open Graph и как ее внедрить без программиста
«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.
Разбираемся, что это за разметка и как ее самостоятельно настроить.
Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика
Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.
Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:
Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.
Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:
А так выглядит репост этого же материала во ВКонтакте:
Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.
Репост в Фейсбук статьи без внедренной разметки:
А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):
В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:
Что можно сделать с помощью Open Graph
С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:
Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:
Где используется Open Graph
Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.
Синтаксис разметки Open Graph
Полная документация по разметке Open Graph доступна в нескольких источниках:
Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.
Также есть руководства по применению Open Graph для отдельных соцсетей:
По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.
Обязательные свойства
Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:
Как быть с размерами картинок
У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:
При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.
Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:
В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.
На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:
А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:
Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.
Опциональные свойства
Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:
Вот так description отображается в публикациях в Фейсбуке:
А так — в Телеграме:
А в Телеграме корректно подтягивается содержимое тега og:site_name:
Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Публикуете много видео? Используйте Open Graph
Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.
Больше информации об этом — в справке Яндекса.
В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:
Как внедрять Open Graph
Вручную
Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:
С помощью плагинов
Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).
По ссылкам ниже можно найти плагины для вашей CMS:
А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.
Пример внедрения Open Graph на WordPress
Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.
Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.
После активации перейдите в модуль «Социальные мета» в меню плагина:
Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».
Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.
Вот вид размеченной ссылки в ленте Facebook:
Примерно по такому же принципу работают другие плагины.
Как проверить корректность разметки Open Graph
Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:
Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.
Также есть отдельный инструмент для проверки микроразметки для Твиттера.
Контролируйте внешний вид репостов с помощью Open Graph
Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.
Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.
