WebSite X5Help Center

 
Dima Kornevich
Dima Kornevich
User

OpenGraph - на разных браузерах, соц. сетях, разметка 2020 года  ru

Auteur : Dima Kornevich
Visité 1275, Followers 1, Partagé 0  

Здравствуйте)

Провел иследования по open graph в 2020 году для систем и браузеров, также соцыальных сетей

В данной теме хочу со спецами обсудить какой open graph  размером сделать для сайта на нашей программе.

Иследования:

1. open graph  - данная технология служит для корректного отображения в браузерных плитках

Posté le
22 RéPONSES
Dima Kornevich
Dima Kornevich
User
Auteur

2. В соц сетях таких как vk, facebook, Одноклассники и прочих

Дело в том что для каждой соц сети open graph  разный, также он разный и для поисковиков

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

ВОТ для гугл советы по разрешению

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

вот гугл OpenGraph

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

а вот для фейсбук

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

Получается что оптимально для соц сетей делать OpenGraph изображение с разрешением 600 на 315

А вот для гугл рекомендации OpenGraph изображений уже 1200 630

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

«ВКонтакте» рекомендуют использовать картинки размером от 537×240

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

вот что пишут по общим рекомендациям по Open Graph

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

Получается что в графе Open Graph  на сайте в программе тут

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

Как я понял можно делать к данной разметке изображение в PNP с разрешением 1200 630 не более 5 мб, суть создать фон и наложить на фон прозрачную картинку сайта или страницы - это технические данные, как далее программа или сайты уменьшают не понятно.

Вот инструмент https://a.pr-cy.ru/tools/open-graph-generator/

Что скажут спец жду комментов и прочего, так как актуальная тема

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

Есть такая догадка что картинки в блоках гугл поиске над 1й страницей (снипеты подсказки) образуются именно по теме с Open Graph разметки, так как это своего рода соц сеть или чтото схожее, типо как ранее было с гугл + теперь снипеты, те же соц сети и блоки в браузерах делает данная разметка, остается понять разрешение и сгенерировать коды в программе и проверить в гугл

Lire plus
Posté le de Dima Kornevich
Aleksej H.
Aleksej H.
Moderator

Здравствуйте. 1200х630 и 600х315 - это одинаковые по про порции размеры. А 537х240 - более вытянутое по ширине.

Попробуйте создать картинку 1200х630 на которой нет важных по смыслу элементов сверху и с низу (около 10% по высоте), плюс, учтите её пропорциональное уменьшение в 2 раз (если там будет текст, то он должен быть читабельным).

Для Google она будет 1 в 1, для Facebook - пропорционально уменьшена в 2 раза, а для ВКонтакте уменьшена в более чем 2 раза и обрезана свеху и снизу.

"Есть такая догадка что картинки в блоках гугл поиске над 1й страницей (снипеты подсказки) образуются именно по теме с Open Graph разметки" - приведите пример запроса и результатов поисковой выдачи. Также не забывайте про структурированные данные.: Статья, Карусель, Мероприятие, Инструкции и т.д.

Lire plus
Posté le de Aleksej H.
Dima Kornevich
Dima Kornevich
User
Auteur

Вот моя статья, написал недавно и около 4 месяцев не мог попасть в данные блокии (снипеты)

Поиск: google.com.ua

Сайт: https://tradevisa.net/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8-%D0%BA%D0%B8%D0%B5%D0%B2%D1%81%D1%82%D0%B0%D1%80.html

Картинки все с разрешением 800 на 400 png сжатые до 20 кб и ниже

вот как я попадаю в инфо блоки

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

А вот какая структура страницы была выбрана для этого

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

вот

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

и вот

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

построение дожно быть так

Заголовок

Текст (600 символов +_)

Картинка 800 на 400 )

Текст (закрывающий или объясняющий этот блок

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

Думаю что у гугла есть несколько фвкторов для снипетта 

1. Текст который поясняет что за каша

2. Картинка - наша какша

3. Обьяснение как варить кашу

Думаю что из этого он берет такую смесь и выводит по определенным критериям инфо блок, но после картинки нужно объяснить и закрыть как говорится 1й h1 заголовок и начинаь 2й h2

Думаю что можно внедрить свое рода тэг или разметку или как то скрепить 3 блока

1. Блок текст

2. Блок картинка

3. Блок завершение текста и объяснение о чем и про что или как или зачем

Пимерно так

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

или так

Lire plus
Posté le de Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Auteur

то есть по этому принцыпу создать разметку, в гугл блоки обычно попадают тексты не более 300 - 400 символов так как есть определенное разрешение на блок у гугл, тут либо нужно работать с опен граф или мэта теги делать на такие блоки

Lire plus
Posté le de Dima Kornevich
Aleksej H.
Aleksej H.
Moderator

"Думаю что у гугла есть несколько фвкторов для снипетта" - думаю, что самое достоверное описание того, почему появляются выделенные описания - это справка Google.

"построение дожно быть так" - возможно, всё несколько сложнее. Так как по запросу "снять деньги с киевстар" я вижу 1-ю, 2-ю и 4-ю картинки с Вашей страницы (https://tradevisa.net/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8-%D0%BA%D0%B8%D0%B5%D0%B2%D1%81%D1%82%D0%B0%D1%80.html). Текст, который я вижу, расположен под второй картинкой в конце второго абзаца на Вашей странице.

По запросу "снять деньги с лайф" вижу картинки 3, 2, 4, 1 (в таком порядке) с Вашей страницы (https://tradevisa.net/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8-%D0%BB%D0%B0%D0%B9%D1%84.html). Текст, который я вижу, расположен под второй картинкой в начале второго абзаца на Вашей странице.

"то есть по этому принцыпу создать разметку" - думаю, что не достачно соблюдать пару формальных признаков по размеру картинок и текста, так как в справке написано: "Контент может быть показан в выделенном описании, только если он подходит для этого по оценке систем Google с учетом поискового запроса пользователя.".

Lire plus
Posté le de Aleksej H.