2004年07月15日

第17回 JavaScript と SEO

今回はこのコラムの読者でもある、「無料ドット・コム」の管理人さんから「JavaScript と SEOというのはどうでしょうか？」と言う提案がありましたので、JavaScript と SEO について書いてみたいと思います。上級者には少し簡単な内容になるかも知れませんが、サーバサイドスクリプトとクライアントサイドスクリプトの動きを理解して、それぞれの特徴をうまく利用したサイト構築をしてもらえればなぁと思って書きました。「えー、YST 対策についてじゃないの？」という意見もありそうなので、YST 対策については下の方で少しだけ紹介したいと思います。

まず、何から書こうか悩みましたが、「スクリプト言語とは何か」ということから書いていきたいと思います。通常、プログラミング言語とはプログラマが書いたソースコードを、コンパイラという翻訳機によってマシン語 (コンピュータにわかる命令) に変換され、実行されます。しかし、翻訳作業を行わなくても実行できる簡易型の言語というのが登場しました。それが「スクリプト言語」です。

それでは、通常のプログラミング言語とスクリプト言語の違いを簡単に紹介したいと思います。

  • 通常のプログラミング言語の特徴
      　　
    • 実行速度が速い
    • 複雑な処理も可能
    • メンテナンスが大変
    • モジュールは不要な場合が多い

      例) C 言語、JAVA、Pascal 等

  • スクリプト言語の特徴
    • 実行速度が遅い
    • 複雑な処理は苦手
    • メンテナンスが楽
    • モジュールが必要な場合あり

      例) Perl、PHP、ASP、JavaScript 等

通常、アプリケーション (Word, Excel 等) は複雑な処理が要求されるため、ほぼ通常のプログラミング言語 (C 言語等) が用いられています。逆に Web で利用されるものはそれほど複雑な処理は必要ないためスクリプト言語が多く用いられています。

ここまで何言っているか全然わからない方、大丈夫です。ここまではわからなければ「へぇ〜」と流してもらってかまいません。

さて、スクリプト言語について微妙に学んだところで本題に入りましょう。スクリプト言語には Perl, PHP, ASP, JavaScript, VBScript 等があります。同じスクリプト言語の中でもサーバサイドスクリプトとクライアントサイドスクリプトに分けることが出来ます。例えば、Perl、PHP、ASP 等はサーバサイドスクリプトで、JavaScript、VBScript 等はクライアントサイドスクリプトです。

SEO を考える上で、このサーバサイドスクリプトとクライアントサイドスクリプトの違いを知っておくことは非常に重要です。一緒に勉強をしましょう。

まず、Web 上で使われるもっとも知られているクライアントサイドスクリプトは JavaScript です。また、Web 上でもっとも知られているサーバサイドスクリプトは Perl です。Perl と書くとわからない方もいるかも知れませんが CGI のことです。厳密に言うと CGI というのは Common Gateway Interface と言う仕様であり言語ではありませんので、スクリプト言語というのは Perl と言うことになります。

ではクライアントサイドスクリプトとサーバサイドスクリプトの動きを JavaScript と Perl を例にして説明したいと思います。

  1. クライアントサイドスクリプト (JavaScript の例)

    ab
    A
    		→
    ←
    B
    		→
    ←
    C
    dc

    1. あなた
    2. あなたのブラウザ (Internet Explorer 等)
    3. Web サーバプログラム (Apache 等)
    1. あなたがブラウザに JavaScript のソースコードがあるページの URL を入力する。
    2. ブラウザがソースコードをダウンロードする要求を出す。
    3. Web サーバプログラムが結果を返す。
    4. ダウンロードが完了したらブラウザがソースコードを解析し、表示する。もし JavaScript が含まれていたら JavaScript を実行する。

  2. サーバサイドスクリプト (Perl の例)

    abc
    A
    		→
    ←
    B
    		→
    ←
    C
    		→
    ←
    D
    fed



    1. あなた
    2. あなたのブラウザ (Internet Explorer 等)
    3. Web サーバプログラム (Apache 等)
    4. Perl モジュール


    1. あなたがブラウザに Perl のソースコードがあるページの URL を入力する。
    2. ブラウザがソースコードをダウンロードする要求を出す。
    3. Web サーバプログラムは Perl のソースコードを理解できないため、Perl モジュールに解析を依頼する。
    4. Perl モジュールが解析結果を返す (この解析結果は HTML となる)。
    5. Web サーバプログラムが Perl モジュールが解析した結果を返す。
    6. ダウンロードが完了したらブラウザがソースコードを解析し、表示する。もし JavaScript が含まれていたら JavaScript を実行する。

    ポイントは、クローラの仕事は 1-d, 2-f の「ダウンロードが完了したら」で終了することです。それ以降の解析・表示は行いません。従って、ブラウザは JavaScript を実行しますが、クローラは JavaScriptを実行しません。逆に、1-d, 2-f までの処理はクローラ、ブラウザにかかわらず行われる処理です。

    たとえば、外部 JavaScript でメニューを作成し、全てのファイルでそれを呼び出している場合と、Perl でメニューを作成し、それを全てのページで呼び出している場合は、前者の方はクローラがメニューをたどることはない (JavaScript を実行しない) ため、メニューからリンクされているページが検索にはヒットすることはありません。後者の方はクローラがメニューにあるリンクをたどってくれますのでメニューにあるリンクページは検索にヒットします。

    実際のサンプルを見てみましょう。下記のサンプルは外部メニューを JavaScript で表示する場合と、PHP で表示する場合の例です。

    1. クライアントサイドスクリプト (JavaScript の例)

    2. サーバサイドスクリプト (PHP の例)

    ブラウザでアクセスしたときには JavaScript と PHP の文字が違う以外は同じ表示になりましたね？

    では、実際のソースコードとクローラでのアクセス結果を見てみましょう。

    上記のページを表示しながらみて下さい。JavaScript の方は A の 5 行目で B のメニューを呼び出しています。C を見ると 14 行目は特に変化はありません。しかしブラウザで表示すると B のメニューが表示されます。これはブラウザが JavaScript を実行しているためです。クローラはこの JavaScript を実行しないため B に含まれる「SEO」や「ツール」等の文字やリンクを取得することはありません。

    次に PHP はどうでしょうか？D は 7 行目で E を呼び出しています。F の 16 行目を見ると D の 7 行目が E に置き換わっていますね。と言うことは、外部で定義した E に含まれる「SEO」や「ツール」等の文字やリンクをクローラは取得することになります。

    ちょっと初めての方は混乱するかもしれませんが、ここは非常に重要ですのでわかるまで確認してくださいね。

    また、外部で JavaScript を定義しない場合も、JavaScript 内に記述されているキーワードは無視されるため、検索にヒットさせたいキーワードは JavaScript で書かない方が良いと言うことです。逆に、検索にヒットさせたくないキーワードを JavaScript にするとキーワード出現率を変更することができます。たとえば、「What's new」等はころころ変えているとせっかく頑張って最適化したページのキーワード出現率が変わってしまいますよね。そんなときには、JavaScript にすると「What's new」内のキーワードはキーワード出現率には含まれません。もちろん iframe 等でも同じことができます。

    クライアントサイドスクリプトとサーバサイドスクリプトの動きがわかりましたか？この違いがわかると効果的な対策を施せると思います。


    さて、YST についてです。商用サイトの管理人さんは不安な毎日だと思います。しかし、YST はもう少し枯れるまで待つしかないと思います。ただ待つだけではさらに不安ですよね。そこで、Su-Jine も YST 対策について検証するページを作成しました。

    上記ページには、YST のクローラのアクセス頻度、順位変動、対策方法をアップしています。施した対策方法は、「キーワード出現率を上げ、主要キーワードを論理タグで囲む」と言うことだけです。もちろん META タグ等もちゃんと記述しています。ただし、外部リンクはありません。

    この対策だけで約 10 万ページ中 20 位以内にはなれるので、リンクの対策をすればもう少し上位を狙えるのではないかと思います。と言うことで基本的に Google の対策と変わりませんね。


    次回は良く来る質問について書きたいと思います。たいていは「Su-Jine のサイトに書いてある対策を全て行ったけど上位表示が出来ない」というものです。Su-Jine では 4 つの対策を推奨しています。この対策をしたにもかかわらず、なぜ上位表示できないのかを説明したいと思います。

    【補足】- 2004/07/22

    掲示板で質問が来ましたのでその内容を書きたいと思います。下記のようなスクリプトがあった場合 (外部 JavaScript ではない) でもクローラは中の文字を読みませんか？と言う質問です。

    <body>
    <script language="JavaScript>
    <!--
    document.write('ここのテキストは検索エンジンは読み取る？');
    // -->
    </script>
    </body>

    結論から書くと上記の「ここのテキストは検索エンジンは読み取る？」と言う文字は検索でヒットすることはほぼありません。

    実際のサンプルページを見てみましょう (もし、このサンプルページの作者の方が見ていて、リンクをやめて欲しいと言うことであればお手数ですがご連絡下さい。)

    上記のページのソースを見てもらえるとわかりますが、アクセスした時間によってメッセージを変えるスクリプトです。ソース中には時間毎のメッセージが書かれています。これを URL で検索するとこのようになります。

    通常はサイトの説明が出ますが、タイトルしか出てないですよね。要するに JavaScript を外部ファイルにしなくても JavaScript 内のキーワードは無視されているわけです。これは、JavaScript が無視されているわけではなく、JavaScript の構文に原因があります。通常 Web ページを作成するときに、HTML 内でコメントを書く時には下記のように書きます。

    <!-- ここはコメントです -->

    もう一度上記のサンプルを見てみてください。JavaScript 内の document.write の部分はコメントと判断されるわけです。なぜ <!--　// --> をつけているかというと、JavaScript に対応していないブラウザの場合はそのまま表示してしまうための配慮です。従って、<!--　// --> をはずすと「ここのテキストは検索エンジンは読み取る？」を検索したときにヒットするようになります。

    <body>
    <script language="JavaScript>
    document.write('ここのテキストは検索エンジンは読み取る？');
    </script>
    </body>

    ただし、「ここのテキストは検索エンジンは読み取る？」と言うキーワードだけでなく、"document.write" と言う文字も検索にヒットするようになってしまいます。当然 document write と言うキーワードが入りますので、キーワード出現率が変わってしまいます。結局の所、<!--　// --> を付けて、中のキーワードをコメントアウトしておいた方が SEO 的にも良いですし、検索結果も美しくなります。

投稿者 Su-Jine : 2004年07月15日 10:16

↑第16回 YST (Yahoo Search Technology) のキャッシュが古いのは思い込み等の検証結果
　Su-Jine の独り言
↓Su-Jine 自己紹介

トラックバック

このエントリーのトラックバックURL:

コメント コメントしてください




保存しますか?