このようなリンクを共有するときに、WhatsApp に表示される画像を Web サイトに含めるにはどうすればよいでしょうか?
ベストアンサー1
2020年の基準
WhatsApp、Twitter、Facebook、PCやモバイルデバイス用のブックマークアイコンの完璧なプレビューを得るには、いくつかの手順が必要です。読みたい場合は、オープングラフ (ogp.me)- ただし、WhatsApp のプレビューを最適にするには、この回答の手順 1 ～ 6 を必ずお読みください。
さまざまな企業による多くの技術監査の結果、Open Graph タグを使用しても SEO ランキングの向上には役立たず、ソーシャル メディア専用であることがわかっています。スキーマのデータ構造は SEO に役立ちます。
これらの Open Graph<meta>タグは<head>タグ内に入ります。
ご注意ください： 翻訳者一部のアプリやウェブサイトはキャッシュを使用したり、ウェブサイトのプレビューをデータベースに保存したりしていると述べられています。つまり、たとえば WhatsApp や Facebook でリンクをテストする場合、すぐに違いがわかる可能性は低いということです。別のリンク (別のページ) を使用すればうまくいきます。ただし、そのリンクを一度使用すると、この「ご注意ください」セクションが最初からやり直しになります。
ステップ1: タイトル
最大65文字
<title>your keyword rich title of the website and/or webpage</title>
ステップ2: 説明
最大155文字
<meta name="description" content="description of your website/webpage, make sure you use keywords!" />
ステップ3: og:title
最大35文字
<meta property="og:title" content="short title of your website/webpage" />
ステップ4: og:url
現在のウェブページアドレスへの完全なリンク
<meta property="og:url" content="https://www.example.com/webpage/" />
ステップ5: og:description
最大65文字
<meta property="og:description" content="description of your website/webpage" />
ステップ6: og:image
サイズが 300 KB 未満で、最小寸法が 300 x 200 *の画像 (JPG または PNG) 。この画像は、有効な非自己署名証明書を使用して HTTPS 接続経由で提供される必要があります。**
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png" />
* リッチ・デバーク私に言われたのですが、どうやらWhatsAppは画像の最大サイズ（寸法とファイルサイズ）を増やしたようです。いくつかテストしてみましたが、どのデバイスでも常に一貫して機能するわけではありません。2.x MBの画像をテストしましたが、それでも9/10回は機能しているようでした。<300KBが最も安全なアプローチですが、2020年2月18日現在、より大きな画像を使用しても問題ないはずです。ただし、ファイルサイズは2MB未満にすることをお勧めします。そして、画像は必ず小さなPNGまたは、まだお持ちでない場合は、他の画像圧縮アルゴリズムを使用します。
**インドララジサイトが自己署名証明書を使用して https で実行されている場合、画像が表示されない可能性があることに注意してください。
上記の手順を完了すると、WhatsApp でプレビューが表示されるようになります。ただし、上記の「注意事項」セクションに注意してください。
ステップ7: og:type
オブジェクトをグラフ内で表現するには、そのタイプを指定する必要があります。使用可能なグローバル タイプの一覧は次のとおりです。http://ogp.me/#types独自のタイプを指定することもできます。
<meta property="og:type" content="article" />
ステップ8: og:locale
リソースのロケール。他の言語の翻訳が利用可能な場合は、og:locale:alternate を使用することもできます。
og:locale を指定しない場合は、デフォルトで en_US になります。
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
ステップ9: Twitter
最高のTwitterサポートについては、これ。
ステップ10: Facebook
最高のFacebookサポートについては以下をお読みくださいこれ。
ステップ11: ファビコン
すべてのブラウザとデバイスに最適なファビコンのサポートについては、以下をお読みください。これ。
ボーナスステップ12: ビデオ/オーディオ
音声や動画を共有することも可能です。例えばFacebookやTwitterでは動画の共有が非常に便利です。ogp.meもちろん、WhatsApp にもこのオプションがあります。Instagram または Youtube のリンクを共有すると、WhatsApp プレビューにアプリ内ビデオ プレーヤーが表示されます。
スーパーボーナスステップ 13: 製品、人物、映画など
この種の情報は、プロバイダー (Facebook、Google) によって異なります。いつになるかはわかりませんが、WhatsApp と Twitter で製品サポートが有効になる可能性があります。こうすることで、リンクを共有する相手は、共有リンクの「ウィジェット」で価格や平均レビュー スコアを確認できるようになります。これは便利です。これは、WhatsApp Business アプリでカタログを最新の状態にしているビジネス アカウントではすでに存在していますが、リンク共有とはまったく異なります。