|
Разметка сайта для социальных сетей
|
|
Angerfist |
Среда, 25 Мая 2016, 13:33 | Сообщение 1 |
|
Как можно эффективно использовать протокол Open Graph и его в привлечении большого количества трафика из социальных сетей?
Разметка Open Graph — протокол для разметки сайта под социальные сети и так же может использоваться при формировании снипета выдачи поисковых систем.
Для начала давайте разберемся, что же такое разметка Open Graph. Это протокол, который позволяет управлять и контролировать данные, формирующиеся в превью (структурирует информацию о странице) в посте, когда пользователь делиться ссылкой в социальных сетях. Говоря простым языком, это возможность связывать свой контент с социальными сетями и настроить правильное отображение заголовков, описания и картинки страниц сайта.
Вот пример как выглядит в социальной сети mail.ru информация о ссылке на сайт с использование протокола Open Graph на примере моего сайта:
Для настройки необходимо в раздел HEAD страницы добавить мета теги:
«og:locale» — указывает локализацию (язык сайта), можно использовать значение «ru_RU» по умолчанию.
«og:type» — указывает тип страницы (статья, новость, видео, категория и т. д.), можно использовать по умолчанию «article».
«og:title» — указывает заголовок статьи.
«og:description» — указывает краткое описание, которое выводится при формировании превью ссылки.
«og:url» — ссылка на страницу сайта.
«og:image» — ссылка на картинку, которая будет отображаться в посте.
«og:site_name» — название сайта.
Вот примеры настройки:
Код
1. Facebook и Вконтакте используют Open Graph protocol:
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>
<meta property="og:image" content="http://www.site.com/logo.png" />
<meta property="og:url" content="http://www.site.com"/>
<meta property="og:site_name" content="Название сайта"/>
3. Для Twitter код выглядит так:
<meta name="twitter:site" content="Название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание"/>
4. Для Google+ так:
<link rel="author" href="https://plus.google.com/Blogger777/"> - cсылка на профиль автора в Google+
<link rel="publisher" href="https://plus.google.com/+ScotchIo/"> - название сайта
<meta itemprop="name" content="Блог о разведении слоников"> - текст сниппета (до 40 символов)
<meta itemprop="description" content="Описание сайта"> - описание сайта
<meta itemprop="image" content="http://site.ru/pic/img.jpg"> - путь к файлу изображения
В добавок хочется добавить, что с внедрением протокола Open Graph рекомендуется установить на страницы сайта кнопки «Поделиться» в социальных сетях. Это упросит возможность пользователя поделиться полезной информацией о вашем сайте с другими пользователями. Ну и безусловно несколько упростит задачи SEO-оптимизатора при работе с биржами «лайков», которые хоть и не приносят ощутимого ссылочного эффекта, но позволяют несколько ускорить индексацию/переиндексацию при продвижении сайта.
Для самых популярных cms-систем существуют уже готовые плагины, помогающие реализовать внедрение разметки Open Graph без привлечения вебмастеров.
Отладка социальной разметки при помощи Валидатора микроразметки Яндекса
Подробно о Протоколе Open Graph
Поисковые системы активно использую разметку Open Graph для корректного отображения результатов выдачи!
На Яндексе есть целый раздел помощи - Разметка Open Graph
No regrets
Сообщение отредактировал
Angerfist - Среда, 25 Мая 2016, 16:40 |
| [ RU ] |
|
|
Kosten |
Среда, 25 Мая 2016, 16:17 | Сообщение 2 |
|
Angerfist, если поставить на этот сайт, как настроить?
|
| [ RU ] |
|
|
Angerfist |
Среда, 25 Мая 2016, 16:24 | Сообщение 3 |
|
|
Kosten, для примера я нашёл сайт схожий по тематике с твоим yraaa, у них так:
Код
<meta property="og:type" content="article" />
<meta property="og:title" content="Создание сайта на uCoz – Урааа" />
<meta property="og:description" content="Как создать сайт на uCoz, раскрутить его и заработать – ответы вы найдете на нашем портале." />
<meta property="og:url" content="http://yraaa.ru/" />
<meta property="og:image" content="http://yraaa.ru/images/siteog.png" />
No regrets
|
| [ RU ] |
|
|
Kosten |
Среда, 25 Мая 2016, 16:25 | Сообщение 4 |
|
|
Angerfist, а куда ставить.. если главная каталог файлов.. в эту страницу?
|
| [ RU ] |
|
|
Angerfist |
Среда, 25 Мая 2016, 16:33 | Сообщение 5 |
|
|
Наверное по той же схеме как и обычные мета теги description, лично я сделал только для главной страницы и смотрю многие также
No regrets
|
| [ RU ] |
|
|
Angerfist |
Среда, 25 Мая 2016, 16:38 | Сообщение 6 |
|
|
Нашёл материал от Как увеличить КПД соцбара?, после материала Инструкция как установить кнопки соцсетей на сайт
No regrets
|
| [ RU ] |
|
|
Kosten |
Среда, 25 Мая 2016, 16:38 | Сообщение 7 |
|
|
Angerfist, так на главную буду также делать, но там уже прописан description, его не нужно трогать, можешь в личку скрин скинуть как стоит у тебя.
|
| [ RU ] |
|
|
Kosten |
Среда, 25 Мая 2016, 17:09 | Сообщение 8 |
|
|
Вот думаю микроразметку эту не мешало бы поставить, но как правильно установить, но это понятно что в head ставить нужно, но как понял, который на сайте description можно оставить. И что главное, социальные закладки не работают, после установки, возможно не правильно установил, ставил на главную файла, так идет главной страницей.
|
| [ RU ] |
|
|
Angerfist |
Среда, 25 Мая 2016, 17:18 | Сообщение 9 |
|
|
Kosten, в принципе код у тебя правильный, в соц. сетях пробовал делать заметки всё норм отображает, а почему с кнопок не получается не знаю, у меня от юкоза кнопки поделиться не от яндекс
No regrets
|
| [ RU ] |
|
|
|
Kosten |
Среда, 25 Мая 2016, 17:20 | Сообщение 11 |
|
|
Angerfist, я про то, если только для социалки, то можно не ставить, если не выполняет другие функций.
|
| [ RU ] |
|
|
Сопрано |
Среда, 25 Мая 2016, 17:25 | Сообщение 12 |
|
Вот уже до разметки дошли, про которые раньше вообще не слышал.
|
| [ RU ] |
|
|
Angerfist |
Среда, 25 Мая 2016, 17:31 | Сообщение 13 |
|
|
Kosten, вообщем цитирую:
"Если вы добавляете свежий пост с помощью кнопок, установленных на сайте вручную, то уже заметили, что миниатюра вместе с анонсом может опубликоваться любая. В том числе и счетчик с тиц вместо красивого и специально подобранного рисунка. При ручном добавлении вы, конечно, можете тут же скорректировать и не допустить неподходящей графики. Но всегда хочется все делать без лишних кликов. К тому же, при автоматическом кросспостинге картинку не изменить.
Возникают еще и другие несуразности с выводом заголовков, описаний и т. д., поэтому разработчики соц. сетей придумали специальную разметку Open Graph."
Вот и весь смысл этой разметки 
No regrets
|
| [ RU ] |
|
|
tsakonter |
Среда, 25 Мая 2016, 17:47 | Сообщение 14 |
|
Костен, у тебя вид материала социальные закладки не работают вообще, видать обновление прошло.
|
| [ RU ] |
|
|
Kosten |
Среда, 25 Мая 2016, 17:49 | Сообщение 15 |
|
|
tsakonter, да это понял что не работают, вчера еще работали, думаю от яндекс поделится поставить.
Angerfist, понятно, что не все просто так.
|
| [ RU ] |
|
|
