WebSite X5Help Center

 
Dima Kornevich
Dima Kornevich
User

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

Autor: Dima Kornevich
Besucht 1231, Followers 1, Geteilt 0  

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

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

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

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

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

Gepostet am
22 ANTWORTEN
Dima Kornevich
Dima Kornevich
User
Autor

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

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

вот гугл OpenGraph

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

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

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von 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 разметки" - приведите пример запроса и результатов поисковой выдачи. Также не забывайте про структурированные данные.: Статья, Карусель, Мероприятие, Инструкции и т.д.

Mehr lesen
Gepostet am von Aleksej H.
Dima Kornevich
Dima Kornevich
User
Autor

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

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

вот

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

и вот

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Заголовок

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

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

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

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

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

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

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

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

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

1. Блок текст

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

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

Пимерно так

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

или так

Mehr lesen
Gepostet am von Dima Kornevich
Dima Kornevich
Dima Kornevich
User
Autor

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

Mehr lesen
Gepostet am von 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 с учетом поискового запроса пользователя.".

Mehr lesen
Gepostet am von Aleksej H.