WebSite X5Help Center

 
Dima Kornevich
Dima Kornevich
User

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

Autore: Dima Kornevich
Visite 1276, Followers 1, Condiviso 0  

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

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

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

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

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

Postato il
22 RISPOSTE
Dima Kornevich
Dima Kornevich
User
Autore

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

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

вот гугл OpenGraph

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

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

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da 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 разметки" - приведите пример запроса и результатов поисковой выдачи. Также не забывайте про структурированные данные.: Статья, Карусель, Мероприятие, Инструкции и т.д.

Leggi di più
Postato il da Aleksej H.
Dima Kornevich
Dima Kornevich
User
Autore

Вот моя статья, написал недавно и около 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 кб и ниже

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

вот

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

и вот

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Заголовок

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

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

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

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

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

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

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

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

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

1. Блок текст

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

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

Пимерно так

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

или так

Leggi di più
Postato il da Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autore

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

Leggi di più
Postato il da 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 с учетом поискового запроса пользователя.".

Leggi di più
Postato il da Aleksej H.