OGPとcanonicalで異なるURLを指定した場合の表示を試してみる

同一ページ内に複数のSNSボタンを配置して、それぞれでOGPを変更する方法を以前に試しました。(Facebookの場合、Twitterの場合)
この実装方法でOGPとcanonicalで異なるURLを指定した場合、OGPがどのように表示されるのかを色々試してみました。

設定内容

シェアボタンを配置するページ(index.html)とOGP用のページ(sample.html)を用意して、sample.htmlの内容を変更して試してみます。
index.htmlは基本的に以下のような設定にしています。

index.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="SNSボタンを設置しているページの説明文" />
<meta property="og:title" content="SNSボタンを設置しているページ" />
<meta property="og:url" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/1/index.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/1/index.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="SNSボタンを設置しているページの説明文" />
<meta name="twitter:title" content="SNSボタンを設置しているページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/1/index.jpg" />
<!-- //twitter end -->

<link rel="canonical" href="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/1/index.html" />

　

og:urlとcanonicalを設定しない場合

まずはog:urlとcanonicalを設定しないで試してみます。
sample.htmlで以下のように設定します。

sample.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="OGP用ページの説明文" />
<meta property="og:title" content="OGP用ページ" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/1/sample.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="OGP用ページの説明文" />
<meta name="twitter:title" content="OGP用ページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/1/sample.jpg" />
<!-- //twitter end -->

og:urlとcanonicalを設定しない場合のデモページ
Twitter、Facebook共にsample.htmlのOGP内容で表示されました。

Twitterの場合

Facebookの場合

　

og:urlは無しでcanonicalでsample.htmlを指した場合

og:urlは設定無し、canonicalにsample.htmlのURLを指定してみます。

sample.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="OGP用ページの説明文" />
<meta property="og:title" content="OGP用ページ" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/2/sample.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="OGP用ページの説明文" />
<meta name="twitter:title" content="OGP用ページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/2/sample.jpg" />
<!-- //twitter end -->

<link rel="canonical" href="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/2/sample.html" />

og:urlは無しでcanonicalでsample.htmlを指した場合のデモページ
Twitter、Facebook共にsample.htmlのOGP内容で表示されました。

Twitterの場合

Facebookの場合

　

og:urlは無しでcanonicalでindex.htmlを指した場合

og:urlは設定無し、canonicalにindex.htmlのURLを指定してみます。

sample.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="OGP用ページの説明文" />
<meta property="og:title" content="OGP用ページ" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/3/sample.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="OGP用ページの説明文" />
<meta name="twitter:title" content="OGP用ページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/3/sample.jpg" />
<!-- //twitter end -->

<link rel="canonical" href="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/3/index.html" />

og:urlは無しでcanonicalでindex.htmlを指した場合のデモページ
Twitterはsample.html、Facebookはindex.htmlのOGP内容で表示されました。

Twitterの場合

Facebookの場合

　

og:urlはsample.html、canonicalは無しの場合

og:urlにsample.htmlのURL、canonicalは設定無しにしてみます。

sample.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="OGP用ページの説明文" />
<meta property="og:title" content="OGP用ページ" />
<meta property="og:url" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/4/sample.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/4/sample.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="OGP用ページの説明文" />
<meta name="twitter:title" content="OGP用ページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/4/sample.jpg" />
<!-- //twitter end -->

og:urlはsample.html、canonicalは無しの場合のデモページ
Twitter、Facebook共にsample.htmlのOGP内容で表示されました。

Twitterの場合

Facebookの場合

　

og:urlはindex.html、canonicalは無しの場合

og:urlにindex.htmlのURL、canonicalは設定無しにしてみます。

sample.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="OGP用ページの説明文" />
<meta property="og:title" content="OGP用ページ" />
<meta property="og:url" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/5/index.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/5/sample.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="OGP用ページの説明文" />
<meta name="twitter:title" content="OGP用ページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/5/sample.jpg" />
<!-- //twitter end -->

og:urlはindex.html、canonicalは無しの場合のデモページ
Twitterはsample.html、Facebookはindex.htmlのOGP内容で表示されました。

Twitterの場合

Facebookの場合

　

og:urlでsample.html、canonicalでindex.htmlを指した場合

og:urlにsample.htmlのURL、canonicalにindex.htmlのURLを指定してみます。

sample.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="OGP用ページの説明文" />
<meta property="og:title" content="OGP用ページ" />
<meta property="og:url" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/6/sample.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/6/sample.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="OGP用ページの説明文" />
<meta name="twitter:title" content="OGP用ページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/6/sample.jpg" />
<!-- //twitter end -->

<link rel="canonical" href="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/6/index.html" />

og:urlでsample.html、canonicalでindex.htmlを指した場合のデモページ
Twitter、Facebook共にsample.htmlのOGP内容で表示されました。

Twitterの場合

Facebookの場合

　

og:urlでindex.html、canonicalでsample.htmlを指した場合

og:urlにindex.htmlのURL、canonicalにsample.htmlのURLを指定してみます。

sample.html

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="OGP用ページの説明文" />
<meta property="og:title" content="OGP用ページ" />
<meta property="og:url" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/7/index.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/7/sample.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<!-- //OGP end -->
 
<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="OGP用ページの説明文" />
<meta name="twitter:title" content="OGP用ページ" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/7/sample.jpg" />
<!-- //twitter end -->

<link rel="canonical" href="https://cly7796.net/blog/sample/specify-different-url-for-ogp-and-canonical/7/sample.html" />

og:urlでindex.html、canonicalでsample.htmlを指した場合のデモページ
Twitterはsample.html、Facebookはindex.htmlのOGP内容で表示されました。

Twitterの場合

Facebookの場合

　

結論としては、Twitterの場合はシェアしたURLのOGPで表示され、Facebookの場合はog:urlで指定したURL > canonicalで指定したURL > シェアしたURL の優先度で表示される内容が決まるようです。