Meta property og image не работает

Отображение миниатюры для ссылки в WhatsApp || og: метатег изображения не работает

Я создал простую HTML-страницу с основными метатегами Facebook:

Facebook linter правильно проверяет, и в Facebook он отлично выглядит, но когда я пытаюсь поделиться WhatsApp, изображение не отображается.

Я пытаюсь использовать WhatsApp на Android

Я верю, что вам нужно добавить itemprop в метатег og:image , размер изображения установлен на 256×256 , а также не повредит добавлению свойств site_name , type и updated_time либо:)

Вы можете увидеть эти метатеги в действии, например, Карты Google.

После того, как вы изменили свои метатеги, вам может потребоваться некоторое время, чтобы обновить возможные кеши.

Вы можете отлаживать/проверять метатеги Open Graph из Отладчик Facebook

Если вы можете увидеть все свои теги, то сайты/приложения, в которых ваши теги не отображаются должным образом, могут иметь разные требования для тегов Open Graph.

Если вы собираетесь указать изображение по ссылке HTTP-Secure , вам нужно использовать og:image:secure_url вместо og:image .

Вам также нужно указать og:type , поскольку это один из четырех базовых требуемых параметров.
должен помочь вам в правильном направлении.

У меня была та же проблема, и проблема заключалась в размере картинки. Whatsapp не поддерживает изображение размером более 300 КБ.

Поэтому наиболее важным свойством для отображения изображения в Whatsapp является:

И размер изображения для отображения должен быть менее 300 КБ

И вы должны увидеть работу до и после скриншота

Существует два вида кода. Первая мета ог: изображение внутри

Схема миниатюр от schema.org внутри

Надеюсь, это поможет. Благодарю.

Я также столкнулся с этой проблемой, наконец, я решил ее

Моя собственность изображения

Размер: 300X200 Размер: 2020-04-04T17:21:10.752590+03:00 1 год, 6 месяцев назад

Очистите данные и кеш WhatsApp (или используйте другой WhatsApp)!

Android Phone: Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Быть осторожен ! Сделайте резервную копию ваших сообщений перед этим действием.

Тогда результат: до и после очистки данных и кеша WhatsApp

Я записал здесь идеальное подробное решение — https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html
Чтобы получить идеальный предварительный просмотр, нужно выполнить семь шагов.

Заголовок: добавьте ключевое слово с богатым заголовком на свою веб-страницу с максимум 65 символами.

Описание Meta: Опишите вашу веб-страницу не более 155 символов.

og: title: не более 35 символов.

og: url: Полная ссылка на адрес вашей веб-страницы.

og: description: Максимум 65 символов.

og: image: Рекомендуется использовать изображение (JPG или PNG) размером менее 300 КБ и минимальный размер 300 х 200 пикселей.

favicon: Маленькая иконка размером 32 x 32 пикселя.

На приведенной выше странице вы найдете требуемые спецификации, лимиты символов и образцы. Сделайте upvote, как только вы найдете это удовлетворительным.

Я надеюсь, что эта помощь:

Обратите внимание на imgURL, который должен быть размещен в одном домене, или он не будет отображаться на whatsapp. Я попытался загрузить URL-адрес с amazon, предварительный просмотр изображения не работает.

Попробуйте обновленную версию для schema.org

или используя формат json-ld из google

Для всех, все еще имея эту проблему, и для меня ни один из опубликованных решений не разработан.

У меня была аналогичная проблема.
Изображение отображалось правильно во всех других диалоговых окнах share.
Только WhatsApp не смог отобразить изображение, даже если отладчик facebook правильно имеет тег og: image.

Решение, которое сработало для меня:
Я использую firebase. Для загруженного содержимого в хранилище вы получаете уникальный URL-адрес загрузки с токеном носителя. Что-то вроде:

Я использовал этот URL в метатеге og: image. Он работал на Facebook и т.д., Но похоже, что WhatsApp не смог загрузить изображение с этого URL-адреса.
Вместо этого вам нужно включить изображение в каталог проекта и использовать эту ссылку для тега og: image. Теперь он корректно работает и в WhatsApp.

До (не работает в WhatsApp, но facebook и т.д.)

После (теперь работает во всех проверенных общих диалогах, включая WhatsApp)

Надеюсь, это может помочь некоторым из вас:)

Источник

FB OpenGraph og:изображение не тянет изображения (возможно https?)

Первый:не считаю, что это дубликат вопрос. Я искал такие же или подобные проблемы так широко, и из-за характера устранения неполадок, прежде чем спрашивать, я считаю, что эта проблема уникальна.

Facebook не может понять мой og:image файлы и я пробовал все обычные решения. Я начинаю думать, что это может иметь какое-то отношение к https://.

• я проверил http://developers.facebook.com/tools/debug и имеют нулевые предупреждения или ошибки.
• он находит изображения, которые мы связали в » og:image «, но они отображаются пустыми. Когда мы нажимаем на изображение(ы), однако, они существуют, и он принимает прямо к ним.
• он показывает одно изображение — изображение, размещенное на сервере без https.
• мы пробовали площади изображения, Изображения в формате JPEG, PNG файлов, больших размеров и маленьких размеров. Мы поместили изображения прямо в public_html. Ноль появляются.
• это не ошибка кэширования, потому что когда мы добавляем еще один og:image к мета, Линтер FB действительно находит и читает это. Он показывает предварительный просмотр. Предварительный просмотр. Элемент только исключение мы получаем для изображений, которые не находятся на этом сайте.
• мы думали, может быть, там был какой-то анти-выщелачивания на cpanel или .htaccess это мешало отображению изображений, поэтому мы проверили. Но его не было. Мы даже сделали быстрый на совершенно другом сервере, и изображение отображается нормально.
• мы думали, может быть, это было og:type и еще одна странность с другим мета-тег. Мы удалили все из них, по одному за раз и проверили его. Никакое изменение. Просто предупреждения.
• тот же код на другом веб-сайте появляется без каких-либо проблем.
• мы думали может быть он не вытягивал изображения, потому что мы используем одну и ту же страницу продукта для нескольких продуктов (изменяя ее на основе о значении get, т. е. » детали.php?id=xxx»), но он все еще тянет одно изображение (из другого url).
• оставив og:image или image_src выключен, FB не находит никаких изображений.

я в конце моей веревки. Если бы я сказал, сколько времени я и другие потратили на это, вы были бы шокированы. Вопрос в том, что это интернет-магазин. Мы абсолютно, положительно не можем не иметь образов. Мы должны. У нас есть десять или около того других сайтов. Это единственный с og:image проблемы. Это также единственный на https , так что мы подумали, может быть, в этом и была проблема. Но мы не можем найти прецедента нигде в интернете для этого.

если вы хотите, вот ссылка на одну из наших страниц продукта, над которой мы работали. [Ссылка сокращена, чтобы попытаться ограничить это попадание в Результаты поиска для нашего сайта]:http://rockn.ro/114

ссылка «См. что facebook видит » скребок инструмент, мы смогли увидеть следующее:

мы проверили все ссылки, которые он нашел для одной страницы. Все они были совершенно правильными изображениями.

Источник

Что такое разметка Open Graph и как ее внедрить без программиста

«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.

Разбираемся, что это за разметка и как ее самостоятельно настроить.

Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика

Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.

Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:

• в обложку поста подтянется случайная картинка из контента страницы, неправильных размеров;
• вместо заголовка и краткого анонса статьи — содержимое тега.

Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.

Репост в Фейсбук статьи без внедренной разметки:

А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

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

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Синтаксис разметки Open Graph

Полная документация по разметке Open Graph доступна в нескольких источниках:

• ogp.me — англоязычная документация;
• ruogp.me — документация на русском языке.

Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.

Также есть руководства по применению Open Graph для отдельных соцсетей:

По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.

Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги в разделе . Внутри тега указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.

Обязательные свойства

Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:

• og:title — заголовок статьи или страницы. Текст заголовка указывается в атрибуте content

• og:type — тип объекта. Например, article, book, video.movie и проч. Полный перечень — здесь. В зависимости от указанного типа могут потребоваться другие свойства, помимо четырех обязательных. Например, если на странице размещена статья, укажите в коде разметки такую строку:

• og:url — канонический URL, по которому доступен указанный объект. Например, если пользователь расшарит не каноническую страницу (например, страницу пагинации), в соцсети все равно появится ссылка на основную страницу, прописанную в og:url.

• og:image — здесь указываем, какую картинку нужно подтянуть к публикации при репосте. В атрибуте content указывается URL изображения. Обратите внимание! При использовании разметки изображение может даже не находиться в статье или на странице. Его можно разместить в любой директории сайта, а в теге og:image указать ссылку на него. При репосте соцсети проигнорируют картинки на странице, а подтянут указанное изображение из нужной директории.

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.

Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:

В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.

На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:

Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.

Опциональные свойства

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

• og:description — текст краткого описания страницы или статьи (анонса). Во ВКонтакте и Фейсбуке сейчас отображается ограниченное количество символов описания. Но если вы публикуете ссылки на сайт в Телеграме, обязательно заполняйте этот тег.

Вот так description отображается в публикациях в Фейсбуке:

А так — в Телеграме:

• og:site_name — здесь можно указать название сайта и пару слов, описывающих его содержимое или назначение. Данные из этого параметра используются не везде. Например, при репосте в Фейсбук отображается просто URL сайта:

А в Телеграме корректно подтягивается содержимое тега og:site_name:

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.

Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:

Публикуете много видео? Используйте Open Graph

Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.

Больше информации об этом — в справке Яндекса.

В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:

• og:title — название видео, здесь можно указать до 1000 символов;
• og:url — URL страницы с видео;
• og:video — путь к видеоплееру или файлу;
• og:image — ссылка на картинку, которая должна использоваться как заставка видео;
• og:description — описание ролика (от 150 до 1000 символов);
• ya:ovs:upload_date — дата и время загрузки;
• ya:ovs:adult — в этом мета-теге нужно указать, является ли ваш ролик контентом «для взрослых». Если да, укажите значение «true», если нет — «false»;
• video:duration — длительность видео (указывается в секундах с округлением до целого числа);
• og:type — категория видео;
• og:video:type — доступные кодеки для данного формата видео.

Как внедрять Open Graph

Вручную

Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:

Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами и .

С помощью плагинов

Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).

По ссылкам ниже можно найти плагины для вашей CMS:

А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.

Пример внедрения Open Graph на WordPress

Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.

Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.

После активации перейдите в модуль «Социальные мета» в меню плагина:

• главной страницы;
• изображений;
• типов данных;
• укажите отдельные настройки для Twitter.

Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».

Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.

Вот вид размеченной ссылки в ленте Facebook:

Примерно по такому же принципу работают другие плагины.

Как проверить корректность разметки Open Graph

Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:

Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.

Также есть отдельный инструмент для проверки микроразметки для Твиттера.

Контролируйте внешний вид репостов с помощью Open Graph

Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.

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

Источник