シングルページに複数のTwitter・Facebook用のOGP設定をする



TwitterやFacebookなどにURLを投稿したときに表示されるOGPは、1URLに1つしか設定出来ない。そのため、#を使ったページ内リンクには個別のOGPを設定することが出来ない。

そんなときは、OGPを表示するだけの踏み台ページを用意し、そこからページに転送することで、間接的に同一ページに複数のOGPを設定出来る。

OGP表示用に以下のような踏み台ページを設置すれば、TwitterやFcebookではこのページの情報が表示される。

<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta property="og:title" content="タイトル">
	<meta property="og:description" content="説明文">
	<meta property="og:image" content="サムネイル画像のURL">
	<meta name="twitter:card" content="summary_large_image" />
	<script>
		location.href = 'OGP複数を設定したいページのURL';
	</script>
</head>
<body>
</body>
</html>

設置サンプル

複数OGP設定したいページ

https://yamada-original.com/sample/ogp/

ページ内リンク用のidを指定しておく

OGP表示用の踏み台htmlを設置

以下は同じ階層に設置する想定。

<!-- page1.html -->
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta property="og:title" content="PAGE1:OGPテストページ">
	<meta property="og:description" content="YAMADA ORIGINAL">
	<meta property="og:image" content="https://yamada-original.com/sample/ogp/page1.png">
	<meta name="twitter:card" content="summary_large_image" />
	<script>
		location.href = './#page1';
	</script>
</head>
<body>
</body>
</html>
<!-- page2.html -->
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta property="og:title" content="PAGE2:OGPテストページ">
	<meta property="og:description" content="YAMADA ORIGINAL">
	<meta property="og:image" content="https://yamada-original.com/sample/ogp/page2.png">
	<meta name="twitter:card" content="summary_large_image" />
	<script>
		location.href = './#page2';
	</script>
</head>
<body>
</body>
</html>
<!-- page3.html -->
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta property="og:title" content="PAGE3:OGPテストページ">
	<meta property="og:description" content="YAMADA ORIGINAL">
	<meta property="og:image" content="https://yamada-original.com/sample/ogp/page3.png">
	<meta name="twitter:card" content="summary_large_image" />
	<script>
		location.href = './#page3';
	</script>
</head>
<body>
</body>
</html>

ツイートボタンの設置

複数OGP設定したいページのツイートボタンでは上記で設置した踏み台ページのURLをシェアするようにする。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://yamada-original.com/sample/ogp/page1.html" data-text="PAGE1:OGPテストページ">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://yamada-original.com/sample/ogp/page2.html" data-text="PAGE2:OGPテストページ">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://yamada-original.com/sample/ogp/page3.html" data-text="PAGE3:OGPテストページ">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

ツイートされたサンプル

以下はTwitter上では別々のOGP情報が表示されているが、クリック後の遷移先は同ページになっている。

まとめ

踏み台用ページを設置しているので、正確には1URLに複数OGPの設定にはなっていないが、元ページを大きく弄ることなく設置可能。静的ページでも対応出来る。
問題点はツイートボタン以外でURLを直接ツイートされた場合には対応出来ない。



関連記事