web-dev-qa-db-ja.com

iMessageでリッチプレビューを行うには、サイトにどのようなメタデータを含める必要がありますか?

Appleの iOS 10プレビューページ から取得したこのスクリーンショットでわかるように、iOS 10のメッセージアプリは、会話で送信されるURLのインラインプレビューを提供します。

Screenshot of Messages in iOS 10, showing a link that has automatically been annotated with the webpage’s title and a photo

このコンテキストで自分のサイトが適切に表示されるようにするにはどうすればよいですか?これらのプレビューの生成に使用している特定のメタデータに関するAppleの公式ドキュメントはありますか?

5
bdesham

少なくとも Open Graph および Twitter Card を使用しています。

デモ

グラフを開く

マークアップ:

<meta property="og:image" content="https://www.j-26.com/assets/facebook.jpg"/>

プレビュー:

enter image description here


Twitterカード

マークアップ:

<meta property="og:image" content="https://www.j-26.com/assets/Twitter.jpg"/>

enter image description here


注目すべき所見

このページ Twitter CardとOpen graphを使用してテストしましたが、iOSはOpen Graphを好むようです。このページでは、TwitterカードのマークアップがOpen Graphマークアップの前に配置されTwitterカードで使用される画像はsmallerOpen Graphで使用されているものより。

2
John R Perry