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="https://cly7796.net/blog/sample/rewrite-ogp-with-javascript/01/" /> <meta property="og:image" content="https://cly7796.net/blog/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="https://cly7796.net/blog/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 = 'https://cly7796.net/blog/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="https://cly7796.net/blog/sample/rewrite-ogp-with-javascript/01/?page=2"> <meta property="og:image" content="https://cly7796.net/blog/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="https://cly7796.net/blog/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 = 'https://cly7796.net/blog/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="https://cly7796.net/blog/sample/rewrite-ogp-with-javascript/02/?page=2"> <meta property="og:image" content="https://cly7796.net/blog/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="https://cly7796.net/blog/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 = 'https://cly7796.net/blog/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="https://cly7796.net/blog/sample/rewrite-ogp-with-javascript/03/?page=2"> <meta property="og:image" content="https://cly7796.net/blog/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="https://cly7796.net/blog/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を指定できるので、その部分のみ変更することはできます。
コメントが承認されるまで時間がかかります。