Что такое «open graph» и как его подключить к вордпресс
Содержание:
- Оптимизация сайта под социальные сети
- Синтаксис разметки Open Graph
- Общие (Meta теги)
- Контролируйте внешний вид репостов с помощью Open Graph
- Открытые и закрытые порты
- Согласование тегов
- Объекты
- Определения месторасположения
- Возможно ли снизить переплату еще на этапе оформлении кредита?
- С каких площадок идет трафик
- Как составить хороший Description
- Немного теории об Open Graph
- Web App
- Способы микроразметки
- Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика
- Как внедрять Open Graph
- Сравнить два столбца и вывести уникальные значения (Формулы/Formulas)
- Аналитика социальных сетей
- STM32 и FreeRTOS. 5. Приносим пользу и добро!
- Распространенные ошибки при написании Тайтлов
- Стандартная разметка сайта
- Разметка Open Graph (meta теги)
- Что такое Open Graph?
- Структурированные метатеги
- Заключение
- Заключение
Оптимизация сайта под социальные сети
Оптимизация сайта под социальные сети (англ. Social media optimization, SMO) — комплекс мер, направленных на привлечение на сайт посетителей из социальных медиа: блогов, социальных сетей и т. п.
Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:
- Повышение ссылочной популярности;
- Упрощение добавления контента с сайта в социальные сети;
- Привлечение входящих ссылок;
- Обеспечение экспорта и распространения контента;
- Поощрение создания сервисов, использующих наш контент.
Вопросы, связанные непосредственно с генерацией контента рассматривать не будем. О написании сильных текстов лучше всего расскажет недавно вышедшая книга Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай. Как создавать сильный текст».
Настоятельно рекомендую всем кто хотя бы иногда что-то пишет.
Возьмем в качестве примера самую простую публикацию самого заурядного блога. На ней я покажу как контент должен расшариваться и как не должен.
Сначала как должен.
В Фейсбуке.
Как видим, публикация имеет понятный заголовок, характерное изображение и краткое описание. Оно не самое лучшее, но технически работает все верно.
А вот как не должен расшариваться контент.
В Фейсбуке.
Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.
Такой шаринг никуда не годится.
Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.
Задача веб-разработчика сделать так, чтобы социальные сети видели метаданные публикаций и понимали, что конкретно репостит посетитель. Если это статья — она должна быть соответствующе оформлена, если это медиаконтент — он должен оставаться медиаконтентом, не теряя при репосте никакой информации о себе. Иначе не может быть никакой речи о SMO.
Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph.
Синтаксис разметки Open Graph
Полная документация по разметке Open Graph доступна в нескольких источниках:
- ogp.me — англоязычная документация;
- ruogp.me — документация на русском языке.
Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.
Также есть руководства по применению Open Graph для отдельных соцсетей:
По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.
Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.
Обязательные свойства
Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:
Как быть с размерами картинок
У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:
При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.
Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:
В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.
На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:
А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:
Опциональные свойства
Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:
Вот так description отображается в публикациях в Фейсбуке:
А так — в Телеграме:
А в Телеграме корректно подтягивается содержимое тега og:site_name:
Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Общие (Meta теги)
<meta charset="UTF-8"> <!-- HTML5 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTML --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Language" Content="ru"> <meta name="description" content="Описание страницы"/> <meta name="keywords" content="HTML, META, метатег, тег, поисковая система"> <meta name="author" Content="Автор документа"> <meta name="copyright" Content="авторское право (копирайт) в котором может указываться ФИО автора сайта, название фирмы, бренда и т.д."> <meta name ="Generator" Content="Microsoft Notepad"> С помощью какого html редактора была написана страница <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <!-- указываем корень сайта или пусть до файла --> <link rel="canonical" href="http://site.ru/" />
Контролируйте внешний вид репостов с помощью Open Graph
Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт
Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты
Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.
Для получения же большего охвата используйте возможности таргетированной рекламы. В системе PromoPult вы можете запустить рекламу в myTarget (Одноклассники, проекты Mail.ru) и ВКонтакте из единого интерфейса. Комиссия при этом 0%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.
Открытые и закрытые порты
Согласование тегов
Нет ничего плохого в том, что несколько тегов выглядят излишними. Слишком много информации никогда никому не навредит, кроме как добавлением нескольких не совсем нужных нам дополнительных байтов в HTML-файл.
Теги Twitter card выглядят аналогично тегам Open Graph и основаны на тех же соглашениях, что и протокол Open Graph. При использовании протокола Open Graph для описания данных на странице, легко создать Twitter card без дублирования тегов и данных. Когда процессор Twitter card ищет теги на странице, сначала он проверяет свойство, специфичное для Twitter, и, если его нет, возвращается к поддерживаемому свойству Open Graph. Это позволяет независимо определить оба элемента на странице и свести к минимуму количество дублирующих разметок, необходимых для описания содержимого.
Объекты
Чтобы передать данные об объекте, необходимо указать его тип с помощью метатега og:type:
<meta property="og:type" content="website" />
В этом примере указан один из глобальных (общепризнанных) типов. Остальные типы указываются согласно синтаксису CURIE:
<head prefix="my_namespace: http://example.com/ns"> <meta property="og:type" content="my_namespace:my_type" /> </head>
Глобальные типы объектов группируются в вертикали. Каждая вертикаль имеет свое пространство имен. Значение метатега og:type для пространства имен всегда состоит из названия типа объекта и уточнения (<тип объекта:уточнение>). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).
Больше информации об Open Graph в источнике – https://yandex.ru/support/webmaster/open-graph/intro-open-graph.xml .
P.S. Для изображений лучше делать размер 968×504 пискеля это меньше минимально рекомендованных Фейсбуком 1200×630. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.
Кстати, соцсети кэширует вашу страницу, и это сводит с ума во время отладки, пока вы не научитесь сбрасывать кэш: VK pages.clearCache – http://vk.com/dev/pages.clearCache и Facebook Open Graph Object Debugger – https://developers.facebook.com/tools/debug/og/object/ .
Определения месторасположения
<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 определить месторасположение вашего магазина или офиса, а так же другую контактную информацию.
Возможно ли снизить переплату еще на этапе оформлении кредита?
С каких площадок идет трафик
Как составить хороший Description
В сети огромное количество материала на эту тему, но в этой статье объединены лучшие практики по составлению этого мета-тега.
1. Соответствие содержанию
Это очень важно, т.к. поисковики всегда узнают о том, что мета-данные на странице не честным путём заставляют посетителей переходить по ссылкам и могут даже наложить фильтры на такие сайты – это плохой пример «чёрного SEO»
Но кроме этого, вводящие в заблуждение описания, обязательно, увеличат показатель отказов – что уже плохо само по себе. Обязательно делайте так, чтобы мета-описание действительно соответствовало содержанию контента на странице.
3. Ключевой запрос
Если ключевое словосочетание поискового запроса совпадает с частью текста в мета-описании, поисковики будут более склонны использовать именно этот фрагмент и выделять его в результатах поисковой выдачи. Этот фактор сделает вашу ссылку на сайт еще более эффективной, а у вас появится косвенная возможность формировать содержание сниппета таким образом, как вы хотите.
4. Стиль изложения
Текст описания должен быть составлен простым и лёгким языком, понятным каждому. Отнеситесь к этому, как к приглашению на вашу страницу. Не рекомендуется использовать сухие фразы на подобии: «Очень скучная фраза, описывающая несуществующий, но очень нужный продукт в определённой мега-сложной сфере». Это описание не будет уникальным и интересным по посетителей, и люди не будут знать, что именно они получат в результате просмотра страницы.
5. Призыв к действию
«Посмотрите какое чудесное средство против пятен. Узнайте как оно за 5 минут удаляет пятна жира!» Это пункт сопоставим с предыдущим пунктом о стиле изложения, но его стоит выделить. Это ваш продающий текст, где промежуточный продукт — это связанная страница, а не сам товар на этой странице. Фразы-мотиваторы, такие как: «Успей купить», «Проверь себя», «Получи бесплатно» будут здесь очень кстати.
6. Использование спецификаций
Например, если у вас есть товар для технически подкованных пользователей, то стоит акцентировать особое внимание на индивидуальные технические характеристики продвигаемого продукта: марка, модель, цена и тому подобное. Если человек целенаправленно ищет данный товар или услугу, то вам не нужно будет его лишний раз убеждать, что бы перейти на вашу страницу, а присутствие такого параметра как цена, почти гарантированно приведёт к клику
7. Оптимальная длина
По большому счету, оптимальной длины для description в SEO не существует. Здесь всё больше зависит от смысла, который вы хотите передать. Стоит написать достаточно текста, чтобы донести сообщение, но в то же время сделать его коротким и ёмким. В настоящее время поисковики в большинстве случаев выдают описания длиной до 200 символов, с редкими модификациями до 300 печатных знаков. Помня это, попытайтесь вложить важную информацию в первых 150 символов описания.
Немного теории об Open Graph
Все данные для OG передаются в мета-тегах, что размещаются в контейнере <head>. Существует 4 таких тега, которые должны быть, иначе не взлетит (или взлетит, но не совсем):
- og:title — название размечаемого объекта (страницы). Аналог и родственник title.
- og:type — тип страницы (объекта) или другими словами обозначение того, что находится на данной странице — страница сайта, видео или аудио файлы. В зависимости от указанного типа может понадобиться ещё метатегов.
- og:image — изображение-иллюстрация для страницы (объекта). Здесь требуется указать прямую ссылку на изображение.
- og:url — каноничный url адрес данной страницы.
Все дополнительные мета-теги называются опциональными — останавливаться на них сейчас не будем, а рассмотрим на примерах позже.
Web App
<meta name="apple-mobile-web-app-capable" content="yes" />
По-умолчанию, закладка с рабочего стола запускает веб-сайт в стандартном режиме сафари – с адресной строкой.
Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме, без видимой адресной строки. К сожалению, этот режим имеет некоторые ограничения — при клике на любую ссылку, переход на следующую страницу осуществляется уже в стандартном режиме мобильного сафари.
<meta http-equiv="cleartype" content="on">
Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов.
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no">
Эти строки позволяют отключить автоматическое распознавание форматов. Проще говоря, если вы где-нибудь на странице указали номер телефона в html-коде и не указали в хедере, то смартфон распознает его как телефонный номер и попытается набрать его по клику. То же самое и с адресом.
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-icon.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-icon.png"> <link rel="apple-touch-icon-precomposed" href="img/l/apple-icon.png">
Способы микроразметки
Есть несколько способов размечать данные на сайте. Рассмотрим их на примере микроразметки карточки организации.
Если перейти на сайт 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
Рассмотрим микроразметку разных категорий.
Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика
Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.
Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:
- в обложку поста подтянется случайная картинка из контента страницы, неправильных размеров;
- вместо заголовка и краткого анонса статьи — содержимое тега.
Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.
Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:
А так выглядит репост этого же материала во ВКонтакте:
Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.
Репост в Фейсбук статьи без внедренной разметки:
А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):
В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:
Что можно сделать с помощью Open Graph
С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:
- указать, какой заголовок и анонс должны быть у публикации при репосте страницы;
- указать адрес и параметры изображения, которое должно подтянуться в качестве иллюстрации.
Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:
Где используется Open Graph
Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.
Как внедрять Open Graph
Вручную
Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:
Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.
С помощью плагинов
Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).
По ссылкам ниже можно найти плагины для вашей CMS:
- WordPress.
- Joomla.
- Битрикс.
- Opencart.
- Drupal.
- .
А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.
Пример внедрения Open Graph на WordPress
Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.
Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.
После активации перейдите в модуль «Социальные мета» в меню плагина:
Укажите настройки:
- главной страницы;
- изображений;
- типов данных;
- укажите отдельные настройки для Twitter.
Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».
Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.
Вот вид размеченной ссылки в ленте Facebook:
Примерно по такому же принципу работают другие плагины.
Сравнить два столбца и вывести уникальные значения (Формулы/Formulas)
Аналитика социальных сетей
Если собираемся использовать аналитику Facebook — Facebook Analytics, мы должны предоставить уникальный идентификационный номер, связанный с учетной записью. Тег будет выглядеть примерно так:
У Twitter есть нечто похожее — Twitter Card Analytics. Чтобы получить максимальную отдачу от этого инструмента, Twitter рекомендует использовать следующий тег , содержащий имя пользователя Twitter, которое хотим связать с общей веб-страницей:
Однако, если у нас нет особого интереса к использованию этих аналитических инструментов, то, пропуск двух вышеуказанных тегов не повлияет на отображение общей веб-страницы на временной шкале Facebook или в фиде Twitter.
STM32 и FreeRTOS. 5. Приносим пользу и добро!
Распространенные ошибки при написании Тайтлов
Ошибки совершают все. От просто владельцев сайтов, которые решают самостоятельно прописать мету, до профессиональных вебмастеров и SEO-специалистов, которые могут отвлечься или «замылить взгляд» и допустить банальные ошибки.
Давайте разберем самые популярные ошибки, допускаемые при составлении, мета-тега Title.
Бренд в начале тайтла
Очень распространенная ошибка, особенно если тайтл заполняет сам владелец сайта или бизнеса.
Еще можно понять, если такой тайтл будет звучать как:
Aff1 – сайт о партнерских программах и интернет-маркетинге
Тут хотя бы бренд коротки. Но когда это звучит как:
ООО Группа компаний «Сибшахтостроймонтаж» — монтаж шахтового оборудования
Это уже совершенно другое дело, согласитесь?
В общем, хотите включить бренд – делайте это в максимально укороченном виде и исключительно в самом конце заголовка. Всякие ООО, Группа компаний, кавычки – это лишнее в тайтле.
Перечисление запросов в заголовке
Да, помимо бренда многие просто перечисляют ключевые слова или свои услуги и ждут позиций и трафика.
Плохой пример:
Запчасти, мазда, Москва, купить, недорого
Хороший пример:
Купить запчасти на мазду в Москве недорого
Есть разница? Первый тайтл поисковая система просто забанит и не выведет страницу в выдачу вообще.
Как гласят правила поисковых систем, в первую очередь вы должны смотреть на пользователей и на их удобство. Ну а с таким тайтлом им явно будет неудобно.
Использование Капса или верхнего регистра
Если вы хотите сделать акцент на каком-либо слове – подумайте, как выделить его оборотами речи, но ни в коем случае не с ПОМОЩЬЮ КАПСА. Поисковые системы относятся к этому негативно и предпочитают не выводить в выдаче такие тайтлы.
Единственное, где это допустимо – аббревиатуры и там, где крупный текст обоснован.
Пример плохого тайтла:
КУПИТЬ ГИПСОКАРТОН В МОСКВЕ ДЛЯ ПОТОЛКОВ
Пример хорошего применения капса:
Купить гипсокартон для ГКЛ потолков
Если вы не в курсе, то ГКЛ – это гипсокартонный лист. То есть аббревиатура и её можно писать заглавными буквами. В выдаче Яндекс так же не станет это изменять.
Использование прилагательных в Title
Постарайтесь по возможности не прибегать к использованию прилагательных в своем основном заголовке страницы. Такие слова как «Лучший», «Большой», «выгодный», «самый» и прочее, особенно когда это касается страниц услуг.
Плохой пример:
Купить самый лучший холодильник Indesit в Москве
Хороший пример:
Купить холодильник Indesit в Москве
Смысл не поменялся совсем, но слова преувеличения, которые не несут никакой пользы юзерам мы убрали. Такие обороты можно использовать только в том случае, если это действительно неоспоримый факт, который вы можете подтвердить и именно так ищут пользователи.
Использование стоп-слов в Title
К стоп-словам относятся предлоги, местоимения и просто не несущие информации обороты. Пример: я, он, и, или, о, об, не, до и всё в таком стиле.
Считается, что такие слова не несут полезной информации и их можно легко заменить с помощью знаков препинания и оборотов предложения.
Исключением можно считать только фразеологические обороты и предложение, где без предлога будет нарушена целостность. «Быть или не быть» — яркий пример исключения.
Шаблонные тайтлы
Проблема в том, что у каждой категории товаров могут быть свои запросы, которые вы не учтете в шаблонной оптимизации. Если вы хотите добиться результатов – лучше проработать каждую страницу и учесть все запросы. Трафика так вы точно получите больше.
Перечисление городов в одном заголовке
Работаете по нескольким города в пределах одного региона или даже нескольких? Не перечисляйте их все. Лучше употребите это в контенте страницы и тогда поисковая система и так будет об этом знать.
Плохой пример:
Купить машинное масло в Кемерово, Новокузнецке и Прокопьевске
Пример лучше:
Купить машинное масло в Кемеровской области
Второй пример не такой четкий как первый, однако даже он будет лучше.
Каннибализация запросов
Явление очень распространенное, особенно на больших сайтах. Внимательно следите за тем, что вы пишите, а лучше создайте таблицу и вносите всё в неё. Нельзя допускать, чтобы у двух страниц был тайтл включающий одни и те же ключи, иначе они будут конкурировать в выдаче друг с другом. Бывает так, что тайтл вообще дублирует друг друга на сотнях страницы. Такие вещи нужно исправлять в максимально быстрые сроки.
Стандартная разметка сайта
В самом начале мы должны указать, что используем Open Graph, для чего в тег <html> добавляем следующий код:
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
Итак, вот такой минимальный код разметки Open Graph нужен на сайте, чтобы основные социальные сети могли сделать красивый блок:
<meta property="og:type" content="website"> <meta property="og:site_name" content="Название сайта"> <meta property="og:title" content="Заголовок"> <meta property="og:description" content="Описание страницы"> <meta property="og:url" content="http://mysite.com/post"> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content="http://mysite.com/thumbnail.jpg"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504">
Код достаточно простой и понятный. Здесь уже появились и опциональные мета-теги для изображения — указания размера изображения (про размеры изображений поговорим чуть позже).
Теперь немного тонкости по мета-тегу og:type. Этот тип указывает, что это вообще за страница — если это главная страница сайта или его раздел, то его тип можно указать как website. А вот если это уже отдельная страница (статья) на сайте, то необходимо типом указать article:
<meta property="og:type" content="article" />
Но при этом у нас должно измениться содержание тега <html>:
<html prefix="og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
article: http://ogp.me/ns/article#">
Замечу тут же и сразу, что мета-тег og:type связан со значениями атрибутов в теге html, поэтому здесь необходима внимательность. Значений для og:type очень много и для тех, кому интересно ознакомиться со всеми ними подробнее, предлагаю посмотреть — там всё достаточно просто, к тому же отображена актуальная информация.
Тег og:site_name указывает название сайта. В отличии от og:title, который меняется в зависимости от названия страницы, не изменяется.
Также здесь добавлен мета-тег языка страницы og:locale — он не обязателен, но желателен.
Разметка Open Graph (meta теги)
<meta property="og:locale" content="ru_RU" /> <!-- website(главная) , article (статья), object (другое) --> <meta property="og:type" content="website" /> <meta property="og:title" content="Название страницы"/> <meta property="og:description" content="Описание"/> <!-- указываем корень сайта или пусть до файла --> <meta property="og:url" content="http://site.ru/" /> <meta property="og:site_name" content="Название сайта"/> <meta property="og:image" content="http://site.ru/images/1.jpg" /> <meta property="og:image" content="http://site.ru/images/2.jpg" /> <meta property="og:image" content="http://site.ru/images/3.jpg" />
Что такое Open Graph?
- Превью — изображение которое выводится в качестве превью к записи.
- Домен — URL адресс, ссылка, того чем вы делитесь.
- Навание — Заголовок той информации, которую вы собираетесь разместить.
- Описание — краткое содержание того, о чем информация.
Если же не добавлять метатеги от Open Graph, то при попытке поделится ссылкой вы увидите следующую картину:
Как видите. результат схожий но с некоторыми моментами. Во-первых, в качестве перевью взят логотип сайта. Часто берется первая попавшаяся картинка, если социальные сети не могут определить картинку записи или лого. Иногда социальные сети, вообще не добавляют изображение. Домен и заглавие тоже указаны как и в предыдущем варианте, но краткого описания нет. Конечно же такой вариант хуже предыдущего. Возможно, не так страшно если ссылкой поделились один раз, но если публиковать новости в группе, то на всех публикациях будет одно и то же превью.
Структурированные метатеги
Некоторые метатеги могут иметь дополнительные (необязательные) метаданные. Такие метатеги содержат дополнительный знак (двоеточие).
Например, og:image может содержать следующие метаданные:
- og:image:url — URL изображения, описывающего объект (соответствует og:image).
- og:image:secure_url — дополнительный URL, если страница открывается по протоколу HTTPS.
- og:image:type — MIME-тип изображения (формат изображения стандарта MIME).
- og:image:width — ширина изображения в пикселах.
- og:image:height — высота изображения в пикселах.
<meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" />
og:video может содержать такие же метаданные, как и og:image. Например:
<meta property="og:video" content="http://example.com/movie.swf" /> <meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video:width" content="400" /> <meta property="og:video:height" content="300" />
og:audio содержит только некоторые метаданные из вышеперечисленных:
<meta property="og:audio" content="http://example.com/sound.mp3" /> <meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /> <meta property="og:audio:type" content="audio/mpeg" />
Заключение
ВКонтакте нужно просто указать ссылку (в форме внизу страницы) и нажать «Выполнить». На Facebook же функционала немного больше — можно посмотреть текущую информацию о странице и при надобности сбросить её. И заодно посмотреть, правильно ли оформлена разметка (отмечу, что он может ругаться на разметку, но при этом нормально работать).
На этом всё, что я хотел рассказать про разметку Open Graph. В конце добавлю, что её следует использовать в совокупности со Schema.org для поисковых систем.
И конечно же, обязательно использовать кнопки социального шаринга, чтобы посетитель вашего сайта мог легко поделился информацией со своими друзьями.
Заключение
Эта небольшая статья основана на найденном мной ещё в том году листинге мета-тегов от Lance Pollard, когда мне самому стала интересна эта тема. Поэтому не удивляйтесь, что раздел с мета-тегами Open Graph полностью скопирован оттуда.
По поводу того, стоит ли применять те или иные теги — решать вам. Как бы то ни было, в любом случае, набор мета-тегов для вашего сайта (веб-приложения) будет индивидуальным и строиться на тематике сайта, его возможностях и прочих аспектах.
Другим примером может послужить веб-приложение, по типу Github, которое использует протокол Open Graph и карточки Twitter, иконки для мобильных платформ, оформление плиток (тайлов) для Windows 8.x и даже свои собственные мета-теги.
Поэтому старайтесь относиться с умом к использованию мета-тегов на страницах вашего проекта. Да, лишние мета-теги не помешают ему, но и не прибавят ему веса для поисковых систем. Не будем рассуждать тут о SEO и прочих шалостях, так как я в этом не особо силён, если не сказать, что практически вообще не бум-бум 🙂
Хотя, как мне кажется, сейчас поисковые системы в большей степени обращают своё внимание на содержимое страницы и базовые мета-теги, нежели чем на миллион и ещё один дополнительный мета-тег
