web-dev-qa-db-ja.com

WhatsAppでリンクのサムネイルを表示|| og：imageメタタグが機能しない

この質問に従うことを試みました： whatsappリンク共有の写真を提供する

enter image description here

基本的なFacebookメタタグを使用して簡単なHTML Webページを作成しました。

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />

Facebookリンターは正しく検証され、Facebookでは完璧に表示されますが、Wh​​atsAppで共有しようとすると、画像が表示されません。

試していますAndroidのWhatsApp

→ これはサンプルWebページのURL

androidhtmlopengraphmeta-tagswhatsapp
67
JesuLopez

itempropをog:imageメタタグに追加し、画像サイズを256x256に設定する必要があります。また、site_name、typeおよびupdated_timeプロパティ:)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

これらのメタタグは、たとえば Google Maps で実際に動作しています。
メタタグを変更した後、キャッシュが更新されるまでしばらく待つ必要があります。

Facebook Debugger からOpen Graphメタタグをデバッグ/検証できます。
すべてのタグが表示される場合、タグが適切に表示されていないサイト/アプリでは、Open Graphタグの要件が異なる可能性があります。

編集：
HTTP-Secureリンクで画像を指定する場合は、og:image:secure_urlの代わりにog:imageを使用する必要があります。

EDIT2：
4つの必須パラメーターの1つであるため、og:typeも指定する必要があります。
<meta property="og:type" content="website" />はあなたを正しい方向に導きます。

72
Unknown

私は同じ問題を抱えていましたが、問題は画像のサイズでした。 Whatsappは、サイズが300 KBを超える画像をサポートしていません。

そのため、Whatsappで画像を表示するための最も重要なプロパティは次のとおりです。

<meta property="og:image" content="url_image">

表示する画像のサイズは300KB未満でなければなりません

16
Cedriga

私はここで解決策を見つけました Whatsappプレビューリンクは3月16日に投稿されました

そして、あなたは働くことを見るはずです スクリーンショットの前後

enter image description here

2種類のコードがあります。最初のメタog：<head>内の画像

<meta property="og:image" content="url_image">

<body>内のschema.orgのサムネイルスキーマ

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

この助けを願っています。ありがとう。

9
wong_udik

私もその問題に直面しています最後に、私はそれを解決しました

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

私の画像のプロパティ

  1. 寸法：300X200
  2. サイズ：<300KB
  3. URL： http://yourdomain.com/yourfolder/imagename.png

画像名にスペースがないことを確認してください。2つの単語がある場合は、アンダースコア記号を使用してください

8
Syed Zeeshan Ali

これを理解しようとして数ヶ月を費やした後、私はついに問題を解決しました。私の解決策は次のとおりです。

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

上記をコピーし、ウェブサイトのヘッド領域に貼り付けます。 Whatsappアプリを閉じ、再度開いて、テストします。キャッシュをクリアする必要はなく、データをクリアする必要もありません。

すべてに祝福を！

6
David E

Whatsappデータとキャッシュをクリアします（または別のwhatsappを使用します）！

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

注意してください ！このアクションの前にメッセージをバックアップしてください。

clear whatsapp data and cache

その後、結果：データとキャッシュWhatsAppをクリアする前後 before and after sharing

3
Azodium

Whatsappで動作するために必要なメタタグの最小数については知りませんが、これはどこかで見つかり、これは完璧に機能しました。 注：画像の解像度は256 x 256です。

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>
2
falero80s

https://stackoverflow.com/a/35785393/15185 への返信

Schema.orgの更新バージョンをお試しください

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

またはGoogleのjson-ld形式を使用

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>
1
Joell Lapitan

私の場合、以下のメタタグを追加することで問題が解決しました。私はアラビア語のコンテンツを使用していたので、WhatsAppに画像を表示するにはこれを追加する必要がありました。

<meta property='og:locale' content='ar_AR' />

注：英語のコンテンツを使用している場合、英語がデフォルト値であるため、このメタタグを追加する必要はありません。

1
Rami Zebian

私はこの助けを願っています：

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

同じドメインからホストする必要があるimgURLに注意してください。そうしないと、whatsappに表示されません。 AmazonからURLをロードしようとしましたが、画像のプレビューが機能しません。

1
Joell Lapitan

まだこの問題を抱えている私にとっては、投稿された解決策はどれもうまくいきませんでした。

同様の問題が発生しました。他のすべての共有ダイアログで画像が正しく表示されていました。 Facebookデバッガーがog：imageタグを正しく持っていても、WhatsAppのみが画像を表示できませんでした。

私のために働いた解決策：私はfirebaseを使用しています。ストレージにアップロードされたコンテンツの場合、メディアトークンを含む一意のダウンロードURLを取得します。何かのようなもの：

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ？alt = media＆token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

このURLをog：imageメタタグで使用しました。 Facebookなどでは機能しましたが、WhatsAppはこのURLから画像をダウンロードできなかったようです。代わりに、プロジェクトディレクトリに画像を含め、og：imageタグにこのリンクを使用する必要があります。 WhatsAppでも正しく動作するようになりました。

前（WhatsAppではなく、facebookなど）

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

後（WhatsAppを含む、テストされたすべての共有ダイアログで動作するようになりました）

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

それがあなたの一部を助けるかもしれないことを願っています:)

1
Philipp Mittmann

完全な詳細なソリューションをここに文書化しました- https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 完璧なプレビュー。

  1. タイトル：最大65文字のキーワードリッチタイトルをWebページに追加します。

  2. メタの説明：最大155文字でWebページを説明します。

  3. og：title：最大35文字。

  4. og：url：Webページアドレスへの完全なリンク。

  5. og：description：最大65文字。

  6. og：image：サイズが300KB未満で最小サイズが300 x 200ピクセルの画像（JPGまたはPNG）が推奨されます。

  7. favicon：寸法32 x 32ピクセルの小さなアイコン。

上記のページには、必要な仕様、文字制限、サンプルタグがあります。満足したら、賛成票を投じてください。

1
GZone

グラフデータを開く：

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>
0
Amranur Rahman

次の3つのタグのみが必要と思われます（og:title、Twitter:description、rel="icon"）：

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="Twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

実験/演奏

私にとって実験する最も簡単な方法は、次の手順に従ってCodeSandboxを使用することでした。

  • https://codesandbox.io/s/ でVanillaアプリを作成します
  • index.htmlファイルでメタタグを適宜変更します
  • アプリをフォークして独自の一意のURLを生成するファイル（ctrl+s）を保存します
  • そのURLをWhatsAppに貼り付けてプレビューを表示します（メッセージを送信する必要もありません）
  • メタタグに変更を加える
  • URLの変更-URLの末尾に1文字を追加します。これにより、「以前のキャッシュされたプレビュー」が破棄されます

引用符が必要です

WhatsAppはそれに敏感なので、常に引用符と閉じ引用符があるようにしてください。上記の例には、og:descriptionの閉じ引用符がありません。

0
Francois

最初に「http：//」を付けてメッセージを入力するだけです。例： http://www.google.com はサムネイル画像を表示しますが、www.google.comは表示されません。

0
user6649894