Страница 1 из 212»
Форум про uCoz » Всё для web-мастера » Web мастеру » Разметка сайта для социальных сетей (Open Graph и как ее использовать)
Разметка сайта для социальных сетей
Angerfist
Дата: Среда, 25.05.2016, 13:33 | Сообщение # 1
Vip
Сообщений:623
Награды: 18


Как можно эффективно использовать протокол 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
Прикрепления: 9555680.jpg(54Kb)


No regrets

Сообщение отредактировал Angerfist - Среда, 25.05.2016, 16:40
Kosten
Дата: Среда, 25.05.2016, 16:17 | Сообщение # 2
Администраторы
Сообщений:12716
Награды: 39


Angerfist, если поставить на этот сайт, как настроить?

Angerfist
Дата: Среда, 25.05.2016, 16:24 | Сообщение # 3
Vip
Сообщений:623
Награды: 18


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
Kosten
Дата: Среда, 25.05.2016, 16:25 | Сообщение # 4
Администраторы
Сообщений:12716
Награды: 39


Angerfist, а куда ставить.. если главная каталог файлов.. в эту страницу?

Angerfist
Дата: Среда, 25.05.2016, 16:33 | Сообщение # 5
Vip
Сообщений:623
Награды: 18


Наверное по той же схеме как и обычные мета теги description, лично я сделал только для главной страницы и смотрю многие также

No regrets
Angerfist
Дата: Среда, 25.05.2016, 16:38 | Сообщение # 6
Vip
Сообщений:623
Награды: 18


Нашёл материал от Как увеличить КПД соцбара?, после материала Инструкция как установить кнопки соцсетей на сайт

No regrets
Kosten
Дата: Среда, 25.05.2016, 16:38 | Сообщение # 7
Администраторы
Сообщений:12716
Награды: 39


Angerfist, так на главную буду также делать, но там уже прописан description, его не нужно трогать, можешь в личку скрин скинуть как стоит у тебя.

Kosten
Дата: Среда, 25.05.2016, 17:09 | Сообщение # 8
Администраторы
Сообщений:12716
Награды: 39


Вот думаю микроразметку эту не мешало бы поставить, но как правильно установить, но это понятно что в head ставить нужно, но как понял, который на сайте description можно оставить. И что главное, социальные закладки не работают, после установки, возможно не правильно установил, ставил на главную файла, так идет главной страницей.

Angerfist
Дата: Среда, 25.05.2016, 17:18 | Сообщение # 9
Vip
Сообщений:623
Награды: 18


Kosten, в принципе код у тебя правильный, в соц. сетях пробовал делать заметки всё норм отображает, а почему с кнопок не получается не знаю, у меня от юкоза кнопки поделиться не от яндекс

No regrets
Kosten
Дата: Среда, 25.05.2016, 17:19 | Сообщение # 10
Администраторы
Сообщений:12716
Награды: 39


Все понял, просто социальных кнопок, которые материал стоит не выставляет.



С других нормально.



Но если это только для социальных ссылок, то можно не ставить. а если по разметке чемто будет делать, то оставить нужно.
Прикрепления: 9784368.jpg(88Kb)


Kosten
Дата: Среда, 25.05.2016, 17:20 | Сообщение # 11
Администраторы
Сообщений:12716
Награды: 39


Angerfist, я про то, если только для социалки, то можно не ставить, если не выполняет другие функций.

Сопрано
Дата: Среда, 25.05.2016, 17:25 | Сообщение # 12
Пользователи
Сообщений:265
Награды: 2


Вот уже до разметки дошли, про которые раньше вообще не слышал.
Angerfist
Дата: Среда, 25.05.2016, 17:31 | Сообщение # 13
Vip
Сообщений:623
Награды: 18


Kosten, вообщем цитирую:

"Если вы добавляете свежий пост с помощью кнопок, установленных на сайте вручную, то уже заметили, что миниатюра вместе с анонсом может опубликоваться любая. В том числе и счетчик с тиц вместо красивого и специально подобранного рисунка. При ручном добавлении вы, конечно, можете тут же скорректировать и не допустить неподходящей графики. Но всегда хочется все делать без лишних кликов. К тому же, при автоматическом кросспостинге картинку не изменить.

Возникают еще и другие несуразности с выводом заголовков, описаний и т. д., поэтому разработчики соц. сетей придумали специальную разметку Open Graph."

Вот и весь смысл этой разметки senile


No regrets
tsakonter
Дата: Среда, 25.05.2016, 17:47 | Сообщение # 14
Пользователи
Сообщений:153
Награды: 0


Костен, у тебя вид материала социальные закладки не работают вообще, видать обновление прошло.
Kosten
Дата: Среда, 25.05.2016, 17:49 | Сообщение # 15
Администраторы
Сообщений:12716
Награды: 39


tsakonter, да это понял что не работают, вчера еще работали, думаю от яндекс поделится поставить.
Angerfist, понятно, что не все просто так.


Форум про uCoz » Всё для web-мастера » Web мастеру » Разметка сайта для социальных сетей (Open Graph и как ее использовать)
Страница 1 из 212»
Поиск: