web-dev-qa-db-ja.com

LinkedInのog：imageを正常に実装する方法

問題：

  • 私は、サイトでオープングラフイメージを実装しようと、あまり成功していません： 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>

テスト結果：

キャッシュをtrickすために、私は 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 は1つのことを言っており、サポートフォーラムの担当者は「300以上」と言っています。画像の公式最小寸法（wとhの両方）？
  2. 画像が大きすぎることはありますか？
  3. Xmlnsを使用する必要がありますか、xmlnsを使用しないか、問題ではありませんか？
  4. Og：titleタグとog：descriptionタグの最大（および最小）長は？

他の提案はもちろん歓迎します:)

よろしくお願いします〜

htmlshareopengraphlinkedin
38
Sabo

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アカウントで再サインインしてキャッシュをクリアしてください...結果を投稿してください。

32
GothamCityRises

prefix="og: http://ogp.me/ns#"をHTMLタグに追加しようとしましたか？

9
Ian Lewis

私はこの簡単な修正を見つけましたが、うまくいかない多くの複雑な解決策の後に私にとってはうまくいきました：

LinkedIn

LinkedInの共有プレビューキャッシュを「クリア」する唯一の方法は、LinkedInをページが別の（そして新しい）ページであると思わせることです。

これは、作成されたパラメーターをリンクに追加することによって行われます。ウェブページには影響しませんが、メタデータを強制的に再取得します。

例：

元のリンク：//beantin.se/consultant-resume「新規」リンク：//beantin.se/consultant-resume?1

7
Kym

私は昨夜同じ問題を抱えていました。ソリューションの調査に何時間も費やし、私はこの投稿で他の人が推奨するソリューションを試しましたが、役に立ちませんでした。最後に、この問題についてLinkedInに連絡しましたが、すぐに返答しました。開発チームは、「ポストインスペクター」と呼ばれる新しいツールを実装しました。これにより、コンテンツ共有を最適化できます。文字通り、ほんの数分でこれが実際に機能しました。

URLを入力するだけで、画像、作成者、タイトル、説明、発行日などのプロパティの正しいコードを検証するなど、すべての忙しい作業を実行します。検証するだけでなく、どのコードに含まれるもの、不足しているもの、修正方法。

Post Inspectorを使用するWebサイトは次のとおりです。

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

5
Quintessa Anderson

LinkedInもプレビューをキャッシュしています。以前にOpenGraphイメージが誤ってキャッシュされていた場合は、共有リンクのクエリパラメーターでキャッシュを無効にしてみてください。 https://your-website.com/?1。

4
Ain Tohvri

これはOPでは少し遅れる可能性がありますが、 https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareableに新しいドキュメントがあります-on-linkedin 。これが他の人の助けになることを願っています。

1
Andrew McCombe

私は最近これに遭遇し、上記のすべてのタイプのソリューションで作業するのに膨大な時間を費やしました。私は他の誰かのHTMLを使って作業していましたが、最終的には、htmlにはheadタグがなく、headには終了タグがあることがわかりました。

Linked Inは、明らかにogタグのページテキストをスキャンするのではなく、ページdomを処理します。domオブジェクトが適切にコーディングされていないと、処理されません。一致しないタグまたは閉じられていないタグに問題がある場合、他のすべてが機能しない場合、これが問題になる可能性があります。

Htmlが修正されたら、メタタグにプレフィックスを追加したり、ogイメージの高さと幅のタグを追加したりする必要はありませんでした。 htmlが修正されると、Linked Inは問題なく処理しました。

1
user2989397

@Kymの答えが役に立ち、LinkedInリンクに偽のURLパラメーターを含めたくない場合、簡単な解決策はサインアウトしてからサインインすることです。

*彼らにコメントするのに十分な担当者がいないので、自分の答えを書く

1
John

私はそれを実装するために一日を費やしました。私の主な基準は、Wordpressの1つの投稿に触れることなく、すべての投稿に対してそれを行うことでした。

LinkedInソリューション は機能しませんでした。また、LinkedInは画像を7日間キャッシュします。画像を変更した場合、更新された画像を見ることができません。したがって、これらが制約であり、PHP、Javascript、およびダミーパラメーターを使用してLinkedInキャッシュを更新することで実装できました。 ソリューション

0
ShriKant Vashishtha

私の場合、私はまさにこれを行い、（もちろん私のページで）うまくいきました。

次の4行を頭に入れます。

<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">

しかし、ページに複数のヘッドがある場合、これらの行を最初のヘッドに挿入する必要があることに注意してください。そうしないと機能しません。

また、htmlにprefix = "og： http://ogp.me/ns# ”がありました。

0
maleckicoa

私にとっての解決策は、<meta>タグ内にすべての<head>タグ（prefixなし）を配置することでした。

Facebook、Twitter、またはGoogleなどの他のソーシャルネットワークでは、 <head>タグさえ必要です。 （ HTML5 仕様ではオプションであるため）

PS。ウェブサイトで<meta>タグをテストするための新しい素敵な方法があります： https://metatags.io/

0
Ivan Aracki