TwitterのtweetボタンでOGPを出し分ける

Twitterのtweetボタンを複数配置して、それぞれでOGPの内容を変更できるかどうか試してみました。

サンプルコード

各tweetボタン用のダミーページを用意して、そのページにOGPの設定を行います。
各ページ以下のように設定しました。

sample1.html(ダミーページ1)

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="「TwitterのtweetボタンでOGPを出し分ける」のサンプル1です。" />
<meta property="og:title" content="サンプル1 | 「TwitterのtweetボタンでOGPを出し分ける」のデモページ | cly7796.net" />
<meta property="og:url" content="https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/sample1.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/img1.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<meta property="og:locale" content="ja_JP" />
<!-- //OGP end -->

<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="「TwitterのtweetボタンでOGPを出し分ける」のサンプル1です。" />
<meta name="twitter:title" content="サンプル1 | 「TwitterのtweetボタンでOGPを出し分ける」のデモページ | cly7796.net" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/img1.jpg" />
<!-- //twitter end -->

sample2.html(ダミーページ2)

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="「TwitterのtweetボタンでOGPを出し分ける」のサンプル2です。" />
<meta property="og:title" content="サンプル2 | 「TwitterのtweetボタンでOGPを出し分ける」のデモページ | cly7796.net" />
<meta property="og:url" content="https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/sample2.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/img2.jpg" />
<meta property="og:site_name" content="cly7796.net" />
<meta property="og:locale" content="ja_JP" />
<!-- //OGP end -->

<!-- twitter START -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="「TwitterのtweetボタンでOGPを出し分ける」のサンプル2です。" />
<meta name="twitter:title" content="サンプル2 | 「TwitterのtweetボタンでOGPを出し分ける」のデモページ | cly7796.net" />
<meta name="twitter:image" content="https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/img2.jpg" />
<!-- //twitter end -->

og:urlはダミーページのものを指定していますが、TwitterでこのURLを見ているかどうかは未確認です。
ただ、Facebookで同様の実装をしようとした場合、og:urlにダミーページを指定している必要があるので、同じようにしておく方が無難かと思います。
参考:「Facebookのshareボタンを複数配置する」

次にtweetボタンを設置するページの設定を行います。
今回はJavaScriptでボタン部分を生成するので、ボタンを追加するエリアを用意します。

index.html(tweetボタンを設置するページ)

<div id="tweetArea"></div>

JavaScriptでボタンを生成して、上記で用意したエリアにボタンを追加します。
以前投稿した記事「JavaScriptでシェアボタンを生成する」の流用です。

JavaScript

var tweetArea = document.getElementById('tweetArea');

// tweetボタンの生成
generate_tweet_button(tweetArea, 'https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/sample1.html', 'サンプル1');
generate_tweet_button(tweetArea, 'https://cly7796.net/blog/sample/separate-ogp-of-tweet-button/sample2.html', 'サンプル2');

// tweetボタンを生成する関数
function generate_tweet_button(area, url, text) {
	var twBtn = document.createElement('div');
	twBtn.className = 'twitter-btn';
	var twHref = 'https://twitter.com/share?text='+encodeURIComponent(text)+'&url='+encodeURIComponent(url);
	var clickEv = 'onclick="popupWindow(this.href); return false;"';
	var twLink = '<a href="' + twHref + '" ' + clickEv + '>' + text + '</a>';
	twBtn.innerHTML = twLink;
	area.appendChild(twBtn);
}

// クリック時にポップアップで表示させる関数
function popupWindow(url) {
	window.open(url, '', 'width=580,height=400,menubar=no,toolbar=no,scrollbars=yes');
}

シェアするURLはダミーページのものにしています。
実際にはボタンは以下のように出力されます。

<div id="tweetArea">
	<div class="twitter-btn">
		<a href="https://twitter.com/share?text=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB1&amp;url=http%3A%2F%2Fcly7796.net%2Fwp%2Fsample%2Fseparate-ogp-of-tweet-button%2Fsample1.html" onclick="popupWindow(this.href); return false;">サンプル1</a>
	</div>
	<div class="twitter-btn">
		<a href="https://twitter.com/share?text=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB2&amp;url=http%3A%2F%2Fcly7796.net%2Fwp%2Fsample%2Fseparate-ogp-of-tweet-button%2Fsample2.html" onclick="popupWindow(this.href); return false;">サンプル2</a>
	</div>
</div>

これでダミーページのOGPの内容でtweetするようになりましたが、このままだとTwitterからダミーページへ遷移してしまいます。
リダイレクトの設定と検索結果にダミーページが表示されないように、ダミーページのheadに以下を追記しておきます。

HTML

<meta name="robots" content="noindex,follow" />
<meta http-equiv="refresh" content="0;URL=./" />

これで一通りの設定が完了しました。
複数のtweetボタンでOGPを出しわけるデモページ

実際にそれぞれのtweetボタンを試してみると、以下のようにそれぞれで設定したOGPが設定されていることが確認できました。

サンプル1

サンプル2