サイト制作に関するメモ書き

HOME > JavaScript > JavaScriptでOGPを書き換える

JavaScriptでOGPを書き換える

OGP情報をJavaScriptで書き換えて、facebookやtwitterに反映させることができるかを試してみました。

OGPを書き換える

HTML上に埋め込まれたOGPを書き換えてみます。
今回は以下のように設定しました。

<!-- OGP START -->
<meta property="og:type" content="article" />
<meta property="og:description" content="「JavaScriptでOGPを書き換える」のデモページです。" />
<meta property="og:title" content="「JavaScriptでOGPを書き換える」のデモページ | cly7796.net" />
<meta property="og:url" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/01/" />
<meta property="og:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/01/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" />
<meta name="twitter:site" content="@cly7796net" />
<meta name="twitter:description" content="「JavaScriptでOGPを書き換える」のデモページです。" />
<meta name="twitter:title" content="「JavaScriptでOGPを書き換える」のデモページ | cly7796.net" />
<meta name="twitter:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/01/img1.jpg" />
<!-- //twitter end -->

head内にOGP情報を書き換える処理を記述します。
今回はURLに「?page=2」のパラメータがある場合に、title・image・urlを書き換えるようにします。

JavaScript

function ogp_setting() {
	var param = location.search.substring(1).split('&');
	var params = [];
	var paramVal = '';
	for(var i = 0; i < param.length; i++) {
		params[i] = param[i].split('=');
	}
	for(var i = 0; i < params.length; i++) {
		if(params[i][0] == 'page') {
			paramVal = parseFloat(params[i][1]);
		}
	}

	if(paramVal == '2') {
		var title = '[書き換えテスト]' + document.title;
		var url = location.href;
		var image = 'http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/01/img' + paramVal + '.jpg';

		document.title = title;
		var headData = document.head.children;
		for (var i = 0; i < headData.length; i++) {
			// OGPの設定
			var propertyVal = headData[i].getAttribute('property');
			if(propertyVal !== null) {
				if(propertyVal.indexOf('og:title') != -1) {
					headData[i].setAttribute('content', title);
				}
				if(propertyVal.indexOf('og:url') != -1) {
					headData[i].setAttribute('content', url);
				}
				if(propertyVal.indexOf('og:image') != -1) {
					headData[i].setAttribute('content', image);
				}
			}
			// OGP(twitter)の設定
			var nameVal = headData[i].getAttribute('name');
			if(nameVal !== null) {
				if(nameVal.indexOf('twitter:title') != -1) {
					headData[i].setAttribute('content', title);
				}
				if(nameVal.indexOf('twitter:image') != -1) {
					headData[i].setAttribute('content', image);
				}
			}
		}
	}
}

OGP画像は書き換え前と書き換え後で以下を使用しています。

body直後に書き換え処理を実行します。

HTML

<script>ogp_setting();</script>

パラメータ付きのURLでアクセス後にデベロッパーツールで確認すると、OGPが以下のように書き換えられていることが確認できました。

<!-- OGP START -->
<meta property="og:type" content="article">
<meta property="og:description" content="「JavaScriptでOGPを書き換える」のデモページです。">
<meta property="og:title" content="[書き換えテスト]「JavaScriptでOGPを書き換える」のデモページ | cly7796.net">
<meta property="og:url" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/01/?page=2">
<meta property="og:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/01/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">
<meta name="twitter:site" content="@cly7796net">
<meta name="twitter:description" content="「JavaScriptでOGPを書き換える」のデモページです。">
<meta name="twitter:title" content="[書き換えテスト]「JavaScriptでOGPを書き換える」のデモページ | cly7796.net">
<meta name="twitter:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/01/img2.jpg">
<!-- //twitter end -->

シェアするリンクで指定するtitleやURLも同様に書き換えるようにします。

HTML

<div id="btn-area"></div>
<script>
var url = location.href;
var title = document.title;
var insert = '';
insert += '<p><a href="http://twitter.com/share?text=' + title + '" onClick="window.open(encodeURI(decodeURI(this.href)), \'tweetwindow\', \'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1\'); return false;" rel="nofollow">tweet</a></p>';
insert += '<p><a href="http://www.facebook.com/share.php?u=' + url + '" onclick="window.open(this.href, \'FBwindow\', \'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes\'); return false;">facebook</a></p>';
document.getElementById('btn-area').innerHTML = insert;
</script>

これで設定は一通り完了したので、実際にシェアして表示を確認してみます。
まずは書き換え前を試してみます。
JavaScriptでOGPを書き換える前のデモページ
facebookでリンクをシェアすると、以下のように表示されました。

twitterでは以下のように表示されました。

 

次に、書き換え後を試してみます。
JavaScriptでOGPを書き換えた後のデモページ
facebookでリンクをシェアすると、以下のように表示されました。

表示の変更はできませんでしたが、シェアするリンク部分でURLを指定しているので、URLはパラメータ付きのものになっていました。

twitterでは以下のように表示されました。

twitterではツイート時に書き換え後のtitleとURLを含んでいるので、ツイート部分には書き換え後の内容が反映されていました。
ただ、OGPの書き換え後の内容は認識していないようです。
 

OGPを追加する

HTML上にはOGPタグを埋め込まず、JavaScriptでOGPタグを追加するようにしてみます。
パラメータ付きURLでアクセスした場合に、OGPを追加する処理をhead内に記述します。

JavaScript

function ogp_setting() {
	var param = location.search.substring(1).split('&');
	var params = [];
	var paramVal = '';
	for(var i = 0; i < param.length; i++) {
		params[i] = param[i].split('=');
	}
	for(var i = 0; i < params.length; i++) {
		if(params[i][0] == 'page') {
			paramVal = parseFloat(params[i][1]);
		}
	}

	if(paramVal == '2') {
		var title = '[追加テスト]' + document.title;
		var url = location.href;
		var image = 'http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/02/img1.jpg';

		document.title = title;
		var metaData = [
			{
				'property': 'og:type',
				'content': 'article'
			}, {
				'property': 'og:description',
				'content': '「JavaScriptでOGPを書き換える」のデモページ2です。'
			}, {
				'property': 'og:title',
				'content': title
			}, {
				'property': 'og:url',
				'content': url
			}, {
				'property': 'og:image',
				'content': image
			}, {
				'property': 'og:site_name',
				'content': 'cly7796.net'
			}, {
				'property': 'og:locale',
				'content': 'ja_JP'
			}, {
				'name': 'twitter:card',
				'content': 'summary'
			}, {
				'name': 'twitter:site',
				'content': '@cly7796net'
			}, {
				'name': 'twitter:description',
				'content': '「JavaScriptでOGPを書き換える」のデモページ2です。'
			}, {
				'name': 'twitter:title',
				'content': title
			}, {
				'name': 'twitter:image',
				'content': image
			}
		]
		for (var i = 0; i < metaData.length; i++) {
			var meta = document.createElement('meta');
			for (var prop in metaData[i]) {
				meta.setAttribute(prop, metaData[i][prop]);
			}
			document.head.appendChild(meta);
		}
	}
}

body直後に追加処理を実行します。

HTML

<script>ogp_setting();</script>

パラメータ付きのURLでアクセス後にデベロッパーツールで確認すると、OGPが以下のように追加されていることが確認できました。

HTML

<meta property="og:type" content="article">
<meta property="og:description" content="「JavaScriptでOGPを書き換える」のデモページ2です。">
<meta property="og:title" content="[追加テスト]「JavaScriptでOGPを書き換える」のデモページ2 | cly7796.net">
<meta property="og:url" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/02/?page=2">
<meta property="og:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/02/img1.jpg">
<meta property="og:site_name" content="cly7796.net">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@cly7796net">
<meta name="twitter:description" content="「JavaScriptでOGPを書き換える」のデモページ2です。">
<meta name="twitter:title" content="[追加テスト]「JavaScriptでOGPを書き換える」のデモページ2 | cly7796.net">
<meta name="twitter:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/02/img1.jpg">

この設定で実際にシェアして表示を確認してみます。
まずはOGPを追加する前を試してみます。
JavaScriptでOGPを追加する前のデモページ
facebookでリンクをシェアすると、以下のように表示されました。

twitterでは以下のように表示されました。

OGPタグがないため、画像等は表示されていません。

次に、追加後を試してみます。
JavaScriptでOGPを追加した後のデモページ
facebookでリンクをシェアすると、以下のように表示されました。

追加前と同じくOGPでの表示はできませんでしたが、URLのみパラメータ付きのものになっていました。

twitterでは以下のように表示されました。

twitterもfacebook同じくOGPでの表示ができませんでしたが、ツイート部分のtitleとURLは反映されていました。
どちらも追加したOGPの内容を認識できていないようです。
 

OGPを追加する2

先ほどはbody直後に追加処理を実行していましたが、head内でOGPタグを追加する処理を実行するようにしてみます。
head内にOGPを追加する処理を記述します。

JavaScript

 (function() {
	var param = location.search.substring(1).split('&');
	var params = [];
	var paramVal = '';
	for(var i = 0; i < param.length; i++) {
		params[i] = param[i].split('=');
	}
	for(var i = 0; i < params.length; i++) {
		if(params[i][0] == 'page') {
			paramVal = parseFloat(params[i][1]);
		}
	}

	if(paramVal == '2') {
		var title = '[追加テスト2]' + document.title;
		var url = location.href;
		var image = 'http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/03/img1.jpg';
		document.title = title;
		document.write('<meta property="og:type" content="article" />');
		document.write('<meta property="og:description" content="「JavaScriptでOGPを書き換える」のデモページ3です。" />');
		document.write('<meta property="og:title" content="' + title + '" />');
		document.write('<meta property="og:url" content="' + url + '" />');
		document.write('<meta property="og:image" content="' + image + '" />');
		document.write('<meta property="og:site_name" content="cly7796.net" />');
		document.write('<meta property="og:locale" content="ja_JP" />');
		document.write('<meta name="twitter:card" content="summary" />');
		document.write('<meta name="twitter:site" content="@cly7796net" />');
		document.write('<meta name="twitter:description" content="「JavaScriptでOGPを書き換える」のデモページ3です。" />');
		document.write('<meta name="twitter:title" content="' + title + '" />');
		document.write('<meta name="twitter:image" content="' + image + '" />');
	}
})();

パラメータ付きのURLでアクセスすると、OGPが以下のように追加されます。

HTML

<meta property="og:type" content="article">
<meta property="og:description" content="「JavaScriptでOGPを書き換える」のデモページ3です。">
<meta property="og:title" content="[追加テスト2]「JavaScriptでOGPを書き換える」のデモページ3 | cly7796.net">
<meta property="og:url" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/03/?page=2">
<meta property="og:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/03/img1.jpg">
<meta property="og:site_name" content="cly7796.net">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@cly7796net">
<meta name="twitter:description" content="「JavaScriptでOGPを書き換える」のデモページ3です。">
<meta name="twitter:title" content="[追加テスト2]「JavaScriptでOGPを書き換える」のデモページ3 | cly7796.net">
<meta name="twitter:image" content="http://cly7796.net/wp/sample/rewrite-ogp-with-javascript/03/img1.jpg">

この設定で実際にシェアして表示を確認してみます。
まずはOGPを追加する前を試してみます。
JavaScriptでOGPを追加する前のデモページ
facebookでリンクをシェアすると、以下のように表示されました。

twitterでは以下のように表示されました。

先ほどと同じくOGPタグがないため、画像等は表示されていません。

次に、追加後を試してみます。
JavaScriptでOGPを追加した後のデモページ
facebookでリンクをシェアすると、以下のように表示されました。

結果としては先ほどと同じく、URLのみパラメータ付きのものになっていました。

twitterでは以下のように表示されました。

twitterも先ほどと同じく、ツイート部分のtitleとURLは反映されていました。
 

結果

結論としては、JavaScriptでOGPの書き換えや追加を行っても、facebook・twitter共に認識できないようです。
ただ、facebookはシェアするURL、twitterはツイートに含めるtitleとURLを指定できるので、その部分のみ変更することはできます。
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP