<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> <code><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">og:image</anchor></code> には次の実装があるようです。<figure class="short list"><ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Facebook</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Twitter</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mixi</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">IE</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">はてなブックマーク</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">はてなブログ</anchor> (<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ブログカード</anchor>)</li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">note.com</anchor></li><li><cite><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Slack</anchor></cite></li></ul></figure></p><figure class="quote"><figcaption><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <cite xml:lang="en">Windows 8 で IE10 からリンクを共有する - IEBlog 日本語 - Site Home - MSDN Blogs</cite> (<time>2012-11-18 02:56:21 +09:00</time> 版) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://blogs.msdn.com/b/ie_ja/archive/2012/05/18/get-your-sites-ready-for-sharing-with-ie10.aspx">http://blogs.msdn.com/b/ie_ja/archive/2012/05/18/get-your-sites-ready-for-sharing-with-ie10.aspx</anchor-external></figcaption><blockquote><p>IE は、サイトのマークアップで次のタグを探して、ページのリンク プレビューを作成します。</p><table><tbody><tr><td><strong>プロパティ</strong></td><td><strong>HTML タグ</strong></td><td><strong>文字数制限</strong></td></tr><tr><td>画像 1</td><td><code class="HTML" xml:lang="en">&lt;meta property=&quot;og:image&quot; content=&quot;insert_image_link_here&quot; /&gt;</code></td><td>2,048 (画像 URI の制限)</td></tr><tr><td>画像 2</td><td><code class="HTML" xml:lang="en">&lt;link rel=&quot;image_src&quot; href=&quot;insert_image_link_here&quot; /&gt;</code></td><td>2,048 (画像 URI の制限)</td></tr><tr><td>画像 3</td><td><code class="HTML" xml:lang="en">&lt;meta name=&quot;image&quot; content=&quot;insert_image_link_here&quot; /&gt;</code></td><td>2,048 (画像 URI の制限)</td></tr><tr><td>画像 4</td><td><code class="HTML" xml:lang="en">&lt;meta name=&quot;thumbnail&quot; content=&quot;insert_image_link_here&quot; /&gt;</code></td><td>2,048 (画像 URI の制限)</td></tr></tbody></table><p>これは、各属性を解析する順序である点に注意してください。たとえば、画像 1 タグと画像 2 タグが両方とも存在する場合、画像 1 タグを使います。さらに、いずれかの種類のタグが複数存在する場合、リスト内の最初のタグをマークアップで使います。</p></blockquote></figure><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> <cite xml:lang="en">Link previews (Windows)</cite>
( (<time>2013-11-13 14:01:03 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://msdn.microsoft.com/en-us/library/ie/hh920760(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh920760(v=vs.85).aspx</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> <code><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">og:image</anchor></code> は <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Facebook</anchor> では一定サイズ以下の小さな画像の時、
表示されません。 <time>2015-10-27T05:28:35.100Z</time></p><figure class="quote"><figcaption><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> <cite xml:lang="en">Specify thumbnails - Custom Search Help</cite>
(<time>2016-01-04 13:40:28 +09:00</time> 版)
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://support.google.com/customsearch/answer/1626955?hl=en">https://support.google.com/customsearch/answer/1626955?hl=en</anchor-external></figcaption><blockquote><p>Using a thumbnail meta tag</p><p>To specify a thumbnail image for a page, you can add a thumbnail meta tag to the &lt;head&gt; section of the page, like this:</p><p>&lt;meta name=&quot;thumbnail&quot; content=&quot;http://example/foo.jpg&quot; /&gt;</p></blockquote></figure><figure class="quote"><figcaption><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> <cite xml:lang="ja">アイキャッチ画像(記事のサムネイル) - はてなブログ ヘルプ</cite>
(<time>2017-07-11 17:43:10 +09:00</time>)
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://help.hatenablog.com/entry/post_thumbnail">http://help.hatenablog.com/entry/post_thumbnail</anchor-external></figcaption><blockquote><p>FacebookやTwitterで記事がシェアされたときのプレビュー</p><p>そのほかOGP(Open Graph Protocol)に対応した各ソーシャルメディア</p></blockquote></figure><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Facebook</anchor> の提供するデバッガーでは、 <code>og:image</code> が <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML文書</anchor>中にあっても、
画像取得処理中(?)には表示されないようです。しばらく待って再度表示すると、
<code>og:image</code> も抽出されていることが確認できます。<time>2017-07-26T03:20:42.100Z</time></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Facebook</anchor> も <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Twitter</anchor> も、 <code>og:image</code> の <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">URL</anchor> が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTTPリダイレクト</anchor>の場合には<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">リダイレクト</anchor>先の <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">URL</anchor> を参照します。
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">同じ起源</anchor>でなくても問題ありません。<time>2017-07-26T03:21:45.700Z</time></p><figure class="quote"><figcaption><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="9" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[9]</anchor-end> <cite xml:lang="ja">COMEMO</cite>
( (<time>2017-07-28 23:36:42 +09:00</time>))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://comemo.io/formedia">https://comemo.io/formedia</anchor-external></figcaption><blockquote><p>画像は、当該ウェブページにおいてOGP設定されたものを利用しています。OGP設定された画像とは、ウェブページがSNSなどにおいてシェアされた場合、自動的にSNS上に表示されるように設定された画像をいいます。</p></blockquote></figure><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="10" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[10]</anchor-end> 
<code>og:image</code> が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">相対URL</anchor>だと画像を表示しない実装があります。
<time>2024-03-22T02:23:09.500Z</time></p></body></html>