正しいHTML、CSS、Javascriptの記述が大事
SEOの基礎知識
正しくない記述や、雑な記述であってもある程度は評価されている昨今です。
Googleやブラウザは少々のことは多目に見てくれていますが、やはり技術的には好ましくありません。
それらについて触れていますので、誤記について改めて見直して頂くきっかけになればと思います。
「検索エンジン最適化」という意味があります。
簡単なような難しいような・・・一つ一つ紐解いていきたいと思います。
コンテンツインデックス
正しいHTML、CSS、Javascriptの記述が大事
HTMLにしてもCSSにしても正しい記述と正しくない記述の分かれ目って何だと思いますか？
文字列の誤記は言わずもがな読み取りエラーが出てしまいますよね。
HTMLやCSSのようなマークアップ記述にしても、PHPやPerlにしても、1字間違えただけでエラーが出てしまいます。
マークアップのエラーに関して言えば、ブラウザがフォローしてくれるため、表示崩れが出ないことがあります。
しかし、クローラーがデータを拾う時には、どうしても正しいデータとしては拾ってくれません。
そのため、やはりテキストの誤記は痛いところでしょう。
サイトの意図を検索エンジンに対して正確に伝えるのは必須です。
また、xthmlの記述を間違えると、パースエラーが出てしまうことがあります。
（※パースエラーについては、ここでは敢えて細かく説明は致しません。）
このパースエラーが出ると、全く表示されなくなります。
全く表示されなくなるため、制作途中で気づくことになるとは思いますが、いつ、どのようなタイミングでエラーが出るか分かりませんよね、、、ということです。
CSSやJavascriptにしても同じくです。
これらにおいてもエラーが出るような記述は好ましくありません。
特にJavascriptの場合、記述内容によってはリクエストが終わらない時があります。
リダイレクトやランダム出力のようなことをJavascriptで記述するような時には、余計に配慮したいモノですよね。
文字列の処理だけのため、ブラウザ上にエラーが直接表示されないことがありますが、上手く動作しているかどうかはきっちり確認したいモノです。
Jqueryのようなほとんどを外部ファイルに依存する場合、その外部ファイルが上手く動作しないとインターフェイスに表示されません。
どこに問題があるかをはっきりさせ、問題は解決しなければいけません。
正しい記述というレベルですが、タグの誤記、開始タグと終了タグの位置、その他W3Cで推奨されるマークアップルールはマスターしておきたいところです。
とは言っても、完璧にする必要はありません。
あくまで、クローラーに意図が伝わる構造であれば何も問題ございません。
例えば、リンクタグの終了がない場合でも、延々とリンク個所が続くわけではありません。
<div>や<h>タグも同じくです。
それらはブラウザがフォローしてくれるため、ブラウザ上では致命的な表示にはつながりません。
しかし、これらの誤記はキーワードの評価に直接繋がります。
<a>の終了タグがないとアンカーテキストがどこまで続いているのか分かりません。
<h1>の終了タグがないために、サイト名やサイトのメイン紹介文章がどこまで続いているのか分かりません。
また、それらの制作過程の中でソースコードなどの確認が出来てないというところです。
技術レベルで見ても、高いレベルにある諸々ではありません。
最も基本的なところでのミスは、やはり避けたいところです。
誤記例
<body>
<div>
<p>
SEOって難しいね。
</div>
</p>
</body>
<body>
<div
<p>SEOって難しいね。</p>
</div>
</body>
<body>
<div>
<a href="/test.html">SEOって難しいね。
</div>
</body>
上記程度のミスであれば、W3Cのソースチェッカーを通すことでエラーチェックが出来ます。
Firefoxで「htmlソース表示」をすると、修正の必要な個所が赤色になって表示されるため、どこで誤記が出ているのか発見しやすいです。
SEOを意識するならば、最低限チェックしておきたいところですが、これ以上に過剰に反応する必要はありません。
これらの誤記だけは必ず修正し、正しい記述にしておきましょう。
CSSで隠しテキストを作ってると、それはバレてしまいます。
Javascriptでコンテンツを表示させても、それはバレてしまいます。
結局、関係ないでは済まないところが出てきます。
ましてや、これからも技術レベルはどんどん上がることが予測されます。
関係ないと言って度外視して目に見えてる問題だけに取り組むというのは、SEOとして最も誤った判断です。
そのような短絡的な視点でSEOに取り組むことは絶対にやめましょう。
いずれ、自身の身に降りかかってくることです。
どちらが良いという問題ではありません。
表現の問題でしょう。
HTMLとは、そもそも論で言えば、ブラウザ上で文書や画像などのコンテンツを表示するために開発されたマークアップ言語です。
そのため、ブラウザに正確に情報を伝えるために、各タグの役割が決まっています。
昨今では、SEOのためにタグが出てきている気がしますが、もともとはSEOのために決められたタグなんてのはありません。
ブラウザに適宜文書の役割を伝えるためにあることは忘れてはいけないところです。
HTML5というのは、ブラウザ上でJavascriptやCSSの表現の幅を広げるために開発されたHTMLのバージョンです。
そのため、Javascriptを用いた表現では綺麗に正確に表示することが出来るタグが標準装備されています。
（※ここでは厳密な定義での説明はしていませんので、ご了承下さい。）
そのため、HTML5で記述するというだけでサイトの内容がSEO上有利になるというわけではありません。
XHTMLとは、HTMLとXMLを掛け合わせた要素を持つマークアップ言語です。
HTMLとは、ブラウザ上で文書や画像などを表現するためのマークアップ言語です。
XMLとは、HTMLで作成されたコンテンツの情報伝達を手早くするために開発されたマークアップ言語です。
そのため、タグの終了記述やタグにも若干の違いがあります。
XMLとHTMLのタグの違いについては「 .rss 」や「 .xml 」というファイルを見ることでよく分かります。
Wordpressで作成されたサイトは、これらのXML形式でのコンテンツの配信が自動で備わっています。
これらのページを開きソースを見て頂くと違いがよく分かります。
ここでは、厳密な説明は致しませんので、それらのソースを見て頂ければと思います。
XHTMLとは、つまりこれらを掛け合わせた表記をするために、若干の違いが出てくるというところです。
ですので、XHTMLで記述しているからと言って、HTMLで記述しているからと言って、SEOで有利になるということはありません。
これら両方ともに一長一短あるため、誤記がなく適宜タグを使い分けることが最もSEOで有利になるということです。
やはり、検索エンジンに意図的にコンテンツを伝えなければ何も意味がありません。
その点は忘れたくないところですね。
昨今では、大規模なサイトを作成する時のコーディングはほぼ制作ソフトを使用してサイトを構築されているのではないでしょうか。
弊社ではHTMLとCSSは全て手書きで行っています。
これにも理由がありますが、ここではその細かい理由については避けます。
最終的に手書きでないと不便なことが多く、把握できないことが多くなるため、手書きにしています。
とは言え、コンテンツを制作するにあたって便利な制作方法を選ばなければ時間を取られてしまうことがあります。
制作ソフトが得意な人もいらっしゃれば、一つ一つのタスクを完全に分けて制作する方もいらっしゃるかと思います。
しかし、どれだけ言っても制作ソフトのみで終始する作業というのは限界があります。
制作ソフトで制作しただけではやはり限界が来てしまうということだけは忘れたくはないところですね。
ここでは、凡その制作ソフトを使った時のメリットと手書きのメリットをそれぞれ挙げてみます。
ご自身にあった便利な使い勝手を見出して、一つ一つに時間がかかる作業の時間短縮を見出し、SEOに必要なコンテンツ作成の時間を作って頂ければと思います。
制作ソフトのイイところは、凡そ以下の事柄ではないでしょうか。
- 全HTMLファイル、CSSファイルを一括管理できる。
共通部分の変更を一括で修正することが出来る。 - デザインパーツを目で見て組み立てることが出来る。
（手書きの場合、ソースを書いてからインターフェイスをチェックするという流れです。） - ftp機能なども標準装備のため、それぞれのソフトを分けて管理しなくてもいい。
手書きのイイところは、凡そ以下の事柄ではないでしょうか。
- 自ら書いているため、全ての箇所において一字一句把握出来ている。
各種ブラウザの癖を把握するにはやはり手書きが一番。 - 最終段階に入ってからの最終調整は手書きの方が細かくしやすい。
制作ソフトでも最終的な調整は可能ですが、手書き程に細かくはない。
制作ソフトを使っても最後は手書き。 - 制作ソフトの操作を憶える必要がない。
FireworksとDreamweaverの連携ではありませんが、デザインファイルをコーディングレベルに落とし込む際の細かな操作は面倒になることが多い。 - 制作の際に起動させるプログラム一つ一つの動作が軽いため操作が捗る。
- Jqueryの組み込みなど、細かい仕様が必要になる箇所においては、制作ソフトでは修正を確認し難い場合がある。
- WordpressのようなCMSのテンプレートを制作する場合、制作ソフトを使う時間より手書きの時間の方が長くなる。
- 最近のテキストエディタは一括置換などの細かい便利な機能が搭載されてるため、制作ソフトとは大差がなくなってきている。
- 制作ソフトでもphpファイルならば修正が可能になってきているなど、テキストエディタに近い機能がある。
- テキストエディタには辞書機能があるため、テンプレート的な内容を保存することで、制作ソフトの管理機能に近い機能が備わっている。
- 制作ソフトにおいて、adobeソフトはMacとWinを問わず利用することが可能ですが、他の単体ソフトにおいてはMacよりWinの方がまだまだ使い勝手が優れている。
上記のように感じています。
それぞれ、一長一短あります。
それぞれのソフトの利用者の特性にもよるところがあります。
完全に手書きでしか出来ない方もいらっしゃると思いますし、制作ソフトだけで最終の落とし込みまで対応出来る方もいらっしゃるかと思います。
単なる工数だけで考えると思いもよらない落とし穴にはまることもあります。
いつも通り書いていてもどこからかズレが生じることもあります。
兎角、最初から最後まで、ご自身にあった制作の手法を身に着け、ミスなく誤記なく、最初から最後までコンテンツ制作に集中出来る環境をつくりたいところですね。
これらの内容はSEOを語るうえでは必要ないことかもしれませんが、このような細かい一つ一つに拘らないコンテンツで人を惹きつけることは不可能です。
コピペや簡単につくっただけのコンテンツでSEOをするというのは、もはや不可能な時代です。
競合が増えている昨今では猶更です。
クロールエラーが出ないような配慮をするためや、コンテンツ一つ一つにオリジナリティを出すためなど、一つ一つのレベルを上げるためには自分自身にあった制作環境をつくることも必要です。
そして、基礎となる土台はきっちりつくりこんでいくことが、SEOの最も基本的なことだと思います。
SEOに不要だと最初から決めてかからず基本に忠実に取り組みたいモノです。
