OpenGraph - на разных браузерах, соц. сетях, разметка 2020 года
Autore: Dima Kornevich
Visite 1276,
Followers 1,
Condiviso 0
Здравствуйте)
Провел иследования по open graph в 2020 году для систем и браузеров, также соцыальных сетей
В данной теме хочу со спецами обсудить какой open graph размером сделать для сайта на нашей программе.
Иследования:
1. open graph - данная технология служит для корректного отображения в браузерных плитках
Postato il
Autore
2. В соц сетях таких как vk, facebook, Одноклассники и прочих
Дело в том что для каждой соц сети open graph разный, также он разный и для поисковиков
Autore
ВОТ для гугл советы по разрешению
Autore
вот гугл OpenGraph
Autore
а вот для фейсбук
Autore
Получается что оптимально для соц сетей делать OpenGraph изображение с разрешением 600 на 315
А вот для гугл рекомендации OpenGraph изображений уже 1200 630
Autore
«ВКонтакте» рекомендуют использовать картинки размером от 537×240
Autore
вот что пишут по общим рекомендациям по Open Graph
Autore
Получается что в графе Open Graph на сайте в программе тут
Autore
вот полезная инфа именно тут https://te-st.ru/entries/facebook-open-graph/
Autore
Как я понял можно делать к данной разметке изображение в PNP с разрешением 1200 630 не более 5 мб, суть создать фон и наложить на фон прозрачную картинку сайта или страницы - это технические данные, как далее программа или сайты уменьшают не понятно.
Вот инструмент https://a.pr-cy.ru/tools/open-graph-generator/
Что скажут спец жду комментов и прочего, так как актуальная тема
Autore
Есть такая догадка что картинки в блоках гугл поиске над 1й страницей (снипеты подсказки) образуются именно по теме с Open Graph разметки, так как это своего рода соц сеть или чтото схожее, типо как ранее было с гугл + теперь снипеты, те же соц сети и блоки в браузерах делает данная разметка, остается понять разрешение и сгенерировать коды в программе и проверить в гугл
Здравствуйте. 1200х630 и 600х315 - это одинаковые по про порции размеры. А 537х240 - более вытянутое по ширине.
Попробуйте создать картинку 1200х630 на которой нет важных по смыслу элементов сверху и с низу (около 10% по высоте), плюс, учтите её пропорциональное уменьшение в 2 раз (если там будет текст, то он должен быть читабельным).
Для Google она будет 1 в 1, для Facebook - пропорционально уменьшена в 2 раза, а для ВКонтакте уменьшена в более чем 2 раза и обрезана свеху и снизу.
"Есть такая догадка что картинки в блоках гугл поиске над 1й страницей (снипеты подсказки) образуются именно по теме с Open Graph разметки" - приведите пример запроса и результатов поисковой выдачи. Также не забывайте про структурированные данные.: Статья, Карусель, Мероприятие, Инструкции и т.д.
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 кб и ниже
вот как я попадаю в инфо блоки
Autore
а вот и вторая статья написана также как и первая
Поисковик: google.com.ua
Запрос: снять деньги с лайф
Сайт: https://tradevisa.net/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8-%D0%BB%D0%B0%D0%B9%D1%84.html
Autore
А вот какая структура страницы была выбрана для этого
Autore
вот
Autore
и вот
Autore
построение дожно быть так
Заголовок
Текст (600 символов +_)
Картинка 800 на 400 )
Текст (закрывающий или объясняющий этот блок
Autore
Думаю что у гугла есть несколько фвкторов для снипетта
1. Текст который поясняет что за каша
2. Картинка - наша какша
3. Обьяснение как варить кашу
Думаю что из этого он берет такую смесь и выводит по определенным критериям инфо блок, но после картинки нужно объяснить и закрыть как говорится 1й h1 заголовок и начинаь 2й h2
Думаю что можно внедрить свое рода тэг или разметку или как то скрепить 3 блока
1. Блок текст
2. Блок картинка
3. Блок завершение текста и объяснение о чем и про что или как или зачем
Пимерно так
Autore
или так
Autore
то есть по этому принцыпу создать разметку, в гугл блоки обычно попадают тексты не более 300 - 400 символов так как есть определенное разрешение на блок у гугл, тут либо нужно работать с опен граф или мэта теги делать на такие блоки
"Думаю что у гугла есть несколько фвкторов для снипетта" - думаю, что самое достоверное описание того, почему появляются выделенные описания - это справка 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 с учетом поискового запроса пользователя.".