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

94

この質問に従おうとしました：whatsappリンク共有の写真を提供してください

ここに画像の説明を入力してください

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

<!--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です

android  html  facebook-opengraph  meta-tags  whatsapp 
— JesuLopez
ソース
奇妙な... og：imageで十分なはずです。YouTubeリンクを共有しようとしましたが、チャットでサムネイルが正しく表示されます。Youtubeが特別なことを何も発見せずにもっとメタタグを使用しているかどうかを確認しようとしました....キャッシュの問題に直面していますか？
— cs.edoardo 2015
すみませんが、これも可能ですか？他にどこで見たことがありますか？whatsappに親指を持っているいくつかのリンクがありますか？
— ProllyGeek 2015
画像の高さと幅を増やすことは可能ですか???? WhatsApp中
— Chandresh
同じタグを使用しましたが機能しませんstackoverflow.com/questions/47236739/
— …
のように、HTTP呼び出しなしで画像を参照できますcontent="./images/logo.png"か？
— TMOTTM 2018年

回答:

101

私はあなたが追加する必要が愚か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マップで確認できます。
メタタグを変更した後、可能なキャッシュが更新されるまでしばらく待つ必要がある場合があります。

FacebookデバッガーからOpenGraphメタタグをデバッグ/検証
できます。そこにすべてのタグが表示されている場合、タグが正しく表示されていないサイト/アプリでは、OpenGraphタグの要件が異なる可能性があります。

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

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

— わからない
ソース
これは、itemprop="image"。が付いた2つのメタタグのうち最初のタグで画像が使用できないことが原因である可能性があります。エラーメッセージ：Cannot GET /logos/logo_512.png
— 不明
4
また、property="og:image:secure_url"代わりに使用する必要のある画像への安全なhttpリンクを使用する場合property="og:image"
— 不明
お時間をいただきありがとうございます。変更を加えました。しかし、それでも運はありません。:(
— Akhil Sekharan 2015
YouTubeのリンクは、Illustratorでフラットアイコンを作成する方法を示すビデオに移動しますか？
— 不明
あいまいさでごめんなさい。WhatsAppを介してこのリンクを送信すると、この質問に示すように、ビデオのサムネイルがメッセージの近くに表示されます
— Akhil Sekharan 2015
29

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

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

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

また、表示する画像のサイズは300KB未満である必要があります

— セドリガ
ソース
dev.dubairent.com/property/…私の場合は機能しません
— Jitendra Pancholi
11

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

<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つの単語がある場合は、アンダースコア記号を使用してください

— サイードジーシャンアリ
ソース
私のケースで働いていないdev.dubairent.com/property/...
— Jitendra Pancholi
10

これを理解するために何ヶ月も費やした後、私はついに問題を解決しました。これが私の解決策です：

<!-- 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アプリを閉じてから再度開き、テストします。キャッシュをクリアする必要はなく、データをクリアする必要もありません。

すべての人に祝福を！

— デビッドE
ソース
私にとって、ファイルサイズはまったく責任がありました。ファイルサイズが300Kb未満である限り、すべて問題ありません。メジャープロパティは必要ありません。og：imageタグで十分です。
— BernhardKraus19年
どれも私のケースで働いていたんdev.dubairent.com/property/...
— Jitendra Pancholi
9

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

そして、あなたは働くのを見るはずです

スクリーンショットの前後

ここに画像の説明を入力してください

コードには2種類あります。<head>内の最初のメタog：image

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

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

— wong_udik
ソース
1
FBデバッガー：100％OK。リッチプレビュー：100％OK（Watsappを含む）。WhatsAppで共有しようとすると、画像が表示されません。私の場合のURLはrobotiqu.esです... 1年後に応答がありませんか？
— Juanjo 2016年
1
Androidのインテント経由でこのHTMLコンテンツを渡す方法@wong_udik
— ラジャJawahar
私のケースでは動作しませんdev.dubairent.com/property/...
— Jitendra Pancholi
3

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

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

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

whatsappデータとキャッシュをクリアする

次に、結果：データをクリアしてWhatsAppをキャッシュする前後 共有の前後

— アゾジウム
ソース
1
このファイルサイズ以下私のために働いた300キロバイトよりも作る
— Aryeh Beitz
1
キャッシュをクリアするだけで十分です。データをクリアする必要はありません。
— SanketBerde19年
代わりに、リンクをキャッシュバストすることができます。https://link.com/?_=92375293579
— nathan19年
2

whatsappで動作するために必要なメタタグの最小数がわかりません。これはどこかで見つかり、これは問題なく機能しました。注：画像の解像度は256 x256です。

   <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>
— falero80s
ソース
2

追加の有用な情報：

あなたはいくつかのog：imagesを提供することができます、whatsappは最後のものを使用します。これは、たとえばfacebookが1.91：1の比率とwhatsapp 1：1を必要とする問題に役立ちます

https://stackoverflow.com/a/61078968/8486854

— SinunHenkka
ソース
1

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

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>

またはグーグルからjson-ld形式を使用する

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

 }
 </script>
— ジョールラピタン
ソース
1
あなたの答えにいくつかの説明を追加していただけますか？コードを表示するだけでは、混乱を招く可能性があります。
— アンドレクール2016
1

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

私も同様の問題を抱えています。画像は他のすべての共有ダイアログで正しく表示されていました。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">

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

— フィリップ・ミットマン
ソース
さらに詳しく教えていただけますか？本当に違いは何ですか？画像のURLを書き直しましたか、それとも何をしましたか？
— ジョンマックス
おそらく、ドメインは共有されているリンクと一致する必要があります。
— MarsAndBack 2018年
1

私はここに完璧な詳細な解決策を文書化しました-https：//amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 完璧なプレビューを取得するために実行する7つのステップがあります。

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

  2. メタディスクリプション：最大155文字でWebページを記述します。

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

  4. og：url：あなたのウェブページアドレスへの完全なリンク。

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

  6. og：image：サイズが300KB未満で、最小サイズが300 x 200ピクセルの画像（JPGまたはPNG）をお勧めします。

  7. ファビコン：サイズが32 x32ピクセルの小さなアイコン。

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

— GZone
ソース
リンクが何をしているのか説明してください...リンクが消えることがあります。
— Kurt Van den Branden 2016
あなたのソースはテストからのものですか、それともそれらの要件のいずれかがどこかに文書化されていますか？
— keab42 2017年
1

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

<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に表示されません。アマゾンからURLをロードしようとしましたが、画像プレビューが機能しません。

— ジョールラピタン
ソース
1
このデータをインテント経由でどのように送信しますか
— RajaJawahar18年
この質問は完全にオフトピックです
— meredrica
1

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

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

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

— ラミゼビアン
ソース
0

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

— user6649894
ソース
1
これはコメントである必要があります
— swiftBoy 2016
0

オープングラフデータ：

<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"/>
— Amranur Ra​​hman
ソース
私のケースで働いていないdev.dubairent.com/property/...
— Jitendra Pancholi
0

のみ、これらの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ファイル内のメタタグを適宜変更します
  • ctrl+sアプリをフォークして独自のURLを生成するファイル（）を保存します
  • そのURLをWhatsAppに貼り付けて、プレビューを表示します（メッセージを送信する必要もありません）
  • メタタグに変更を加える
  • URLを変更します-URLの最後に1文字を追加します。これにより、「以前にキャッシュされたプレビュー」が破棄されます

見積もりが必要

WhatsAppはそれに敏感なので、常に引用符と終了引用符を必ず用意してください。上記の例には、の終了引用符がありませんog:description。

— フランソワ
ソース
私のケースで働いていないdev.dubairent.com/property/...
— Jitendra Pancholi
1
@JitendraPancholi、あなたの（dubairent.com）ウェブサイトは同じではありません。属性値の前後には二重引用符が必要です。これがあなたのウェブサイトからのものです： <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">。次のようになります <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">。HTMLプラグインでWebpackを使用する場合は、次のように設定minify.removeAttributeQuotesすることを検討してくださいfalse
— Francois
私は今それを修正しましたが、タイトルと説明は以前と同じように表示されていますが、whatsappはまだプレビューに画像を表示していません。
— Jitendra Pancholi
@JitendraPancholi、「私にとって実験する最も簡単な方法は、これらの手順に従ってCodeSandboxを使用することでした」の上記の手順を使用できます。<head>セクションをバニラアプリにコピーするだけです。Webサイトの生のHTMLを取得するには、「ページソースの表示」オプションを使用します（ChromeではそうですCTRL + U）。
— フランソワ
0

まだこれを経験している人にとって、Amazon S3で提供される画像はWhatsAppモバイルアプリでは機能しないことがわかりました（AndroidとiOSの両方ですが、Macデスクトップアプリは問題ありませんでした）。それは私たちのAWSの設定がこれを引き起こしている可能性が高いのですが、私は他のサイト内のパターンだけでなく（例えば気づいこの1とog:image同様にドメインを打つがhttps://s3.amazonaws.com）。

私が試した他のプラットフォームでは問題はなく、WhatsAppモバイルアプリだけでした。指さすとすぐに<meta property="og:image" content="https://some-non-aws-location" />Googleドライブファイル（もちろん公開されている）のような別の公開URL正常に機能しました。

また、カスタムドメインを使用してAWSでホストおよびデプロイされているリポジトリでイメージをコミットしようとしましたが、それも機能しませんでした。そのため、AWSが依然として原因のようです。これが誰かを助けることを願っています！

— abettermap
ソース
0

これらすべてのヒントを実行してもサムネイルが表示されない場合は、次のことを試してください。

私の問題は、本番用にビルドされたときにog属性からの二重引用符が削除されていたことでした（npm runbuild）。Minifyモジュールはそれを行っていました。

したがって、解決策は、removeAttributeQuotes属性をfalseに設定して、この削除をキャンセルすることでした。

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

私の開発環境では、「webpack.prod.conf.js」ファイルに設定しました。同等のファイルに設定してください。

再構築するだけで、機能します。

— デルズ
ソース
0

私はここの答えのすべての指示に従いました、そして私はまだそれを動かすことができませんでした。WhatsAppには、画像を表示するための拡張子も必要なようです。

したがって、jpegを指すタグの場合：

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

拡張を許可して使用できるようにAPIを変更します。

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

そしてそれはうまくいくようです...

— ニックH247
ソース
0

ここに画像の説明を入力してください 同じ問題がありましたが、試してみてようやく動作しました。プレビューを機能させるためにWebページで使用した8つのhtmlタグは次のとおりです。

で<head>タグ：

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

で<body>タグ：

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

これらの8つのタグ（頭に6つ、体に2つ）は完全に機能しました。

チップ：

1.ディレクトリ形式の代わりに正確な画像の場所のURLを使用します。つまり、images /OG_thumb.jpgを使用しないでください。

2.大文字と小文字を区別するファイル拡張子：ホスティングプロバイダーの画像拡張子名が「.JPG」の場合は、「。jpg」または「.jpeg」を使用しないでください。ホスティングプロバイダーとブラウザーの組み合わせに基づいて、エラーが発生する場合と発生しない場合があります。安全のために、ファイル拡張子の大文字と小文字を一致させる方が簡単です。

3.上記の手順を実行した後、サムネイルプレビューがWhatsAppメッセージに表示されない場合は、次のようにします。

a。モバイルアプリを強制停止し（Androidで試しました）、再試行してください

b。オンラインツールを使用してOGタグをプレビューします（例：https：//searchenginereports.net/open-graph-checker）

c。モバイルブラウザで、OGサムへの直接リンクを貼り付け、ブラウザを4〜5回更新します。例：https：//bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

— zennni
ソース
0

2020年11月： 私が経験したように、これらのメタタグは必須であり、Whatsappの共有リンクに表示されるものに影響しますWhatsApp-thumbnail。

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

と内部<body> ：

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

詳細説明：

1 -あなたが持っていると仮定<meta content='example.com/page1' property='og:url'/>して、あなたはを参照して内部体<a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>、og:imageおよびog:descriptionページのすることはexample.com/page2、あなたが身体（多分明白な）であなたのリンクをいうのWhatsApp上でレンダリングすることウィル。

2-add/changeなどの開いているグラフタグがあり、ページ/本文でタグog:descriptionをクリックし<a></a>た場合、WhatsAppに表示される内容は、のタグを変更しない限り変更されませんhref="I am a new URL"。<a></a>タグまたはのWhatsAppのキャッシュをクリア！

3-Png/jpgすべて300kb未満のサイズですべて300 * 300ピクセルより大きい画像を試しましたが、画像のコンテンツはahttps またはhttpurlでした。上記のコードは、両方をサポートしています（必要はありませんog:image:secure_url）。

4-ogコンテンツを追加/変更するたびに、WhatsAppにサムネイルを表示するために、変更は最初の試行では影響しません!! 2回目の試行で成功しました。非常に奇妙な ！

— ehsan_kabiri_33
ソース
-1

このソリューションは私のために働きます：

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

codesandbox.ioでテスト済み

リンクは次のとおりです：https：//l8ogr.csb.app/

Image Urlから「http」または「https」を削除することで、1つのばかげた小さなことがその魔法を実行しました

画像のURLが例の場合：https://test.com/img.jpegto//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>
— SKJ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.