Подтвердить что ты не робот

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

ПРОБЛЕМА:

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

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

  • У меня нет общих кнопок или похожих, все, что я хочу, это иметь возможность поделиться ссылкой через мой профиль.
  • Изображение более 300x300px: 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:

МОИ ВОПРОСЫ:

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

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

Спасибо, привет, ~

4b9b3361

ОТВЕТЫ

Ответ 1

Этот ответ, который я нашел на форумах 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 для очистки кеша...     Опубликуйте свои результаты.

Ответ 2

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

Ответ 3

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

LinkedIn

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

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

Пример:

Оригинальная ссылка://beantin.se/consultant-resume "Новая" ссылка://beantin.se/consultant-resume?1

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

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

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

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

Ответ 11

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

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

<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

Ответ 12

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

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

Ref: https://ogp.me/