Как успешно реализовать og: изображение для LinkedIn

ЭТА ПРОБЛЕМА:

  • Я пытаюсь без особого успеха внедрить изображение с открытым графом на сайте: http://www.guarenty-group.com/cz/
  • Домашняя страница полностью обходится без тега og: image, где внутренние страницы читают все изображения с сайта и размещают og: image в качестве последней опции.
  • Другие социальные сети работают нормально как на внутренних страницах, так и на домашней странице.

КОНФИГУРАЦИЯ:

  • У меня нет кнопок "Поделиться" или аналогичных, все, что я хочу, - это возможность поделиться ссылкой через мой профиль.
  • Размер изображения превышает 300x300 пикселей: http://guarenty-group.com/img/gg_seal.png

  • Вот как выглядит мой головной тег:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Guarenty Group : Pojištění pro nájemce a pronajímatelé</title>

        <meta name="keywords" content="" />
        <meta name="description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání." />
        <meta name="image_src" content="http://guarenty-group.com/img/gg_seal.png" />
        <meta name="image_url" content="http://guarenty-group.com/img/gg_seal.png" />

        <meta property="og:title" content="Pojištění pro nájemce a pronajímatelé" />
        <meta property="og:url" content="http://guarenty-group.com/cz/" />
        <meta property="og:image" content="http://guarenty-group.com/img/gg_seal.png" />
        <meta property="og:description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání [...]" />
        ...
</head>

РЕЗУЛЬТАТЫ ИСПЫТАНИЙ:

Чтобы обмануть кеш, я протестировал сайт с http://www.guarenty-group.com/cz/?try=N, где я каждый раз менял N. Странно то, что изображения, найденные для разных значений N, отличаются. Иногда нет изображения, иногда есть 1, 2 или 3 изображения, но каждый раз есть другой набор изображений. Но, в любом случае, я не смог найти изображение, указанное в og: graph!

МОИ ВОПРОСЫ:

  1. https://developer.linkedin.com/documents/setting-display-tags-shares говорит об одном, а персонал на форуме поддержки говорит "более 300" Кто-нибудь знает, каков официальный минимальный размер изображения (и ш и з)?
  2. Может ли изображение быть слишком большим?
  3. Должен ли я использовать xmlns, я не должен использовать xmlns или это не имеет значения?
  4. Какова максимальная (и минимальная) длина тегов og: title и og: description?

Любое другое предложение, конечно, приветствуется:)

Спасибо заранее, ура ~

Источник

16 ответов

Решение

Этот ответ, который я нашел на форумах LinkedIn, может быть вам полезен:

Ребята, я провел целый день, пробуя разные вещи. Что мне помогло, так это использование тегов mata [sic]:

<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{Your content}" />

Просто попробуйте добавить префикс к каждому тегу (не к тегу html), а затем снова войдите в свою учетную запись LI, чтобы очистить кэш... Опубликуйте результаты.

Источник

Я нашел это простое исправление, которое сработало для меня после множества сложных решений, которые не работали:

LinkedIn

Единственный способ "очистить" общий кэш предварительного просмотра для LinkedIn - обмануть LinkedIn, заставив думать, что ваша страница - это другая (и новая) страница.

Это делается путем добавления подготовленного параметра к ссылке. Это не влияет на вашу веб-страницу, но заставляет метаданные переизбираться.

Пример:

Исходная ссылка: //beantin.se/consultant-resume "Новая" ссылка: //beantin.se/consultant-resume?1

Источник

У меня была та же проблема прошлой ночью. Потратил часы на поиск решений, и я попробовал решения, рекомендованные другими в этом посте, но безрезультатно. Наконец, я связался с LinkedIn по этому вопросу, и они сразу же ответили. Их команда разработчиков внедрила новый инструмент под названием "Post Inspector", который позволяет оптимизировать обмен контентом. Буквально за считанные минуты это действительно сработало.

Все, что вам нужно сделать, это ввести свой URL, и они выполняют всю занятую работу, т.е. проверяют правильный код свойств, таких как изображение, автор, заголовок, описание, дата публикации и т. Д. Они не только проверяют, но и сообщают, какой код включите, чего не хватает, и как это исправить.

Вот веб-сайт для использования Post Inspector:

https://www.linkedin.com/post-inspector/

Источник

Вы пытались добавить prefix="og: http://ogp.me/ns#" к тегу HTML?

Источник

LinkedIn также кэширует превью. Если в какой-то момент изображение OpenGraph было неправильно кэшировано, попробуйте уничтожить кэш с параметром запроса для общей ссылки, например: https://your-website.com/?1,

Источник

Я столкнулся с этим недавно, потратил огромное количество времени, работая над всеми вышеуказанными решениями. Я работал с чужим HTML и наконец понял, что в html просто отсутствует тег head, в то время как в нем есть закрывающий тег head.

Linked In, по-видимому, не сканирует текст страницы для тегов og, а обрабатывает dom страницы, и если объекты dom не закодированы должным образом, они не будут обрабатываться. Если у вас есть проблемы с несоответствующими тегами или закрытыми тегами, это может быть вашей проблемой, если все остальное не работает.

Мне не нужно было добавлять префикс к метатегам или добавлять метки высоты и ширины изображения, как только html был исправлен. Linked In обработал это нормально, как только HTML был исправлен.

Источник

Просто немного поздно, лол,

Но я столкнулся именно с этой проблемой и выяснил, что connectedIn извлекает метатеги с последней целевой страницы.

Мой веб-сайт, на который я пытался установить ссылку, имел мгновенное перенаправление, добавляя теги og на страницу, на которую он был перенаправлен, для устранения проблемы.

Источник

Если ответ @Kym вам подходит, и вы не хотите, чтобы в ссылках LinkedIn содержался поддельный параметр URL, простое решение - просто выйти, а затем снова войти.

* Пишу свой ответ, так как у меня недостаточно представителей, чтобы комментировать их

Источник

Для меня решением было поставить все <meta> теги (без prefix) внутри <head> тег.

Для других социальных сетей, таких как Facebook, Twitter или Google, вам даже не нужно иметь <head> тег. (потому что это необязательно в спецификации HTML5)

PS. Есть новый хороший способ для тестирования <meta> теги на вашем сайте: https://metatags.io/

Источник

После дня исследования я обнаружил, что метатег с атрибутом property следует использовать вместо name.

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
     <meta property="og:type" content="website" />
     ...

Ссылка: https://ogp.me/

Источник

Это может быть немного поздно для ОП, но есть новая документация по адресу https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin. Надеюсь, это поможет другим.

Источник

Я пытался больше получаса, и я нашел этот, который работал на 100% правильно.

Источник: https://www.linkedin.com/help/linkedin/answer/a521928/making-your-website-shareable-on-linkedin?lang=en

• Вы также можете проверить свои учетные данные Open graph на странице https://www.opengraph.xyz/.

      <meta name="title" property="og:title" content="Enter your title here">
<meta property="og:type" content="Enter any tyoe like Article or Website">
<meta name="description" property="og:description" content="Enter description here">
<meta name="image" property="og:image" content="Enter image URL here">
<meta property='og:url' content='Enter website URL here'/>
Источник

Я наконец-то заработал, добавив полный путь к изображению:

<meta name="image" property="og:image" content="https://hasan.life/images/preview.png">

Источник

Это worked для меня.

Каким-то образом эта проблема возникает, если вы неправильно устанавливаете теги открытого графика.

Вместо этого:

      <meta name="image" property="og:image" content="{content}" />

Попробуй это:

      <meta name="image" property="og:image" content="{content}" />
<meta property="og:image:secure_url" content="{content}" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />
Источник

В моем случае я сделал именно это, и он работал нормально (на моей странице, конечно).

Поместите эти четыре строки в голову:

<title> aanalytics </title>
<meta data-react-helmet="true" property="og:image" content="/photos/s5.jpg">
<meta data-react-helmet="true" property="og:type" content="website">
<meta data-react-helmet="true" property="og:url" content="https://www.aanalytics.de">

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

У меня также был префикс = "og: http://ogp.me/ns” в HTML

Источник

Я потратил целый день на его реализацию. Моим главным критерием было сделать это для всех моих постов, не затрагивая ни одного поста в Wordpress.

Решение LinkedIn не сработало. Также LinkedIn кэширует изображения в течение 7 дней, и если вы изменили изображение, вы не сможете просмотреть обновленное изображение. Так что это были ограничения, и я смог реализовать это, используя некоторый PHP, Javascript и используя фиктивный параметр для обновления кеша LinkedIn. Вот решение

Источник
Другие вопросы по тегам