その他

JavaScriptとSEO

2012年4月30日

 

JavaScriptを使ってホームページを作成するときに気にして頂きたいのがSEOです。

具体的な例では、「Yamaタイピング」と「Yamaタイプ」どちらも検索エンジンで1番に表示させたい場合などです。

<title>Yamaタイピング</title>と記載すると「Yamaタイピング」だけがマッチしますし、

<title>Yamaタイプ</title>と記載すると「Yamaタイプ」だけがマッチします。

では、どのようにすると双方を1番に表示させることができるのでしょうか。

JavaScriptを使用して、<title>タグの内容を切り替えることで、どちらもコントロールできると思っていましたが、2012年5月2日に検証した結果、残念ながらGoogleは、JavaScriptを理解しないことが判明。

後述しますが、PHPなどのサーバーサイドを使用して解決するしかありません。

今回は、「モテモテJavaScript」と「肉食JavaScript」のどちらで検索しても一番に表示させたいと思いチャレンジしましたが、ダメでした。

ダメな例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
if(window.location.search== "?mode=niku"){
<title>肉食JavaScript</title>
}else{
<title>モテモテJavaScript</title>
}
</script>
</head>
<body>
<h1>JavaScriptを学んでモテモテになろう！</h1>
これは、JavaScriptによるSEO制御です。
<h2>ガツガツと肉食系で頑張るのがオススメ</h2>
</body>
</html>

今回の例だとJavaScriptで実行させると、きちんと

https://pcmanabu.com/07javascript/motemote.html

だとタイトルは、「モテモテJavaScript」

https://pcmanabu.com/07javascript/motemote.html?mode=niku

だとタイトルは、「肉食JavaScript」

にしたため、Googleが正しく判断してくれると思っていました。

しかし、結果を見ると、全くタイトルは、認識していなく、

検索結果は、「<h1>JavaScriptを学んでモテモテになろう！</h1>を表示しています。

残念な結果

どうでしょうか。Googleでは、JavaScriptを理解しないため、<title>タグを無視しました。このままではコントロールすることができません。

そこでPHPを使って解決します。

改善案は、「モテないJavaScript」と「草食JavaScript」のどちらで検索しても一番に表示させたいと思います。

大丈夫な例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<?php
if(isset($_GET['mode']))
echo "<title>草食JavaScript</title>";
else
echo "<title>モテないJavaScript</title>";
?>
</head>
<body>
<h1>JavaScriptに縁があるのに学ばないとモテない人になるよ！</h1>
これは、JavaScriptによるSEO制御です。
<h2>草食系では、もったいない</h2>
ガツガツ行くべし
</body>
</html>

これでうまく制御できるはず。

JavaScriptでドキュメント書くと、Googleで認識してもらえない。

これは、覚えていてください！！

興味のあるかたは、「モテモテJavaScript」「モテないJavaScript」「肉食JavaScript」「草食JavaScript」それぞれご確認ください。

PHPなどサーバーサイドで制御すべし！

-その他
-