SEO

文法チェッカーなどを活用してチェック

望み通りに表示されていても文法的に正しいとは限りません。文法チェッカーなどを活用してチェックしましょう。

正しく解釈させるために

HTMLやスタイルシートは、できるだけ文法に沿って正しく記述するようにしましょう。

正しい文法を使わなければ、機会である検索エンジンには正しく伝わらない可能性があります。

その結果、重視してほしい箇所が重視されなくなるなどSEO面での効果が出なくなってしまいます。

検索エンジンにページの中身を正しく解釈させるためには、できるだけ誤りのない文法でページを記述している必要があります。

また、HTMLの文法が正しくないと、HTMLの各要素に対してデザインを施すスタイルシートによる装飾もうまくいかない事があります。

文法に忠実に記述する事は、SEO面以外にも大きなメリットがありますので、こまめに文法チェックをして正しい文法で記述するようにしましょう。

ブラウザ上で望みどおり表示されていても、文法的に正しいとは限りません。

多くのブラウザは、文法的に誤っていても適当に解釈して旨く表示しようとします。その毛ｋk、誤った文法で記述していても、大体望みどおりの表示になっている事があります。

文法的に正しいかどうかの確認には、文法をチェックしてくれるサービスを活用しましょう。

文法チェッカーを使う

無料で利用できる文法チェックサービスがありますので、それらを利用して文法をチェックしましょう。

日本語で解説も読める文法ちぇかーとしては、「Another HTML lint」が有名で便利です。

また、HTMLなどのWebに関する様々な企画を策定しているW3C(Woerld Wide Web Consortium)が提供している文法チェッカーもあります。

こちらでは、文法的に問題が無ければ、正しい文法に準拠している事を示すボタンがダウンロードできます。

文法を意識して制作している事を示したい場合には、ダウンロードして掲載すると良いでしょう。

日本語で解説もよめる「Another HTML lint」を使う

「Another HTML lint」を使うと、調べたいページのURLを入力するだけで文法チェックができます。

文法の正しさが100点未満の点数で表示され、問題のある箇所は、どこが同おかしいかの解説が表示されます。 以下のような手順で操作します。

1. Webサイトにアクセスして調べたいURLを入力します。
   アップロードしていない場合は、HTMLの全文を直接入力することもできますし、ローカルにあるファイルを指定して送る事もできます。
   チェック用のオプションを様々に選択できますが、標準設定のままで特に問題ありません。
2. 数秒で結果が表示されます。
   問題の個数が表示されるほか、点数化もされます。
   エラーには、重要度の仕様が付いていて、数値の高いものほど問題が多きものです。
3. 指摘内容の横にある「解説」というリンクをクリックすると、その問題に対する解説を読む事ができます。
   日本語で説明されているので、よく参考にして修正しましょう。

W3Cの文法チェッカーを使う

W3Cが提供している文法チェッカーもあります。

文法的に問題が無ければ、文法に準拠している事を示すボタンをダウンロードできます（問題のある箇所についての指摘も行われますが、説明文は会え以後です）。

1. まずは、Webサイトにアクセスして、Address欄に8調べたいURLを入力します。
   その後「Check」簿r短を繰り句します。
2. すぐに結果が表示されます。
   問題が無ければ、正しい文法を用いている事を示すボタン画像のダウンロードが出来ます。
   問題があれば、問題がある箇所の指摘が表示されます。

スタイルシート（CSS)の文法チェック

HTML(XHTML)だけでなく、スタイルシートの文法チェックも可能です。

W3Cが提供している「CSS Validation Service」では、スタイルシートのURL（もしくはスタイルシートを利用しているHTMLのURL）を入力するだけで、文法の正しさをチェックしてくれます。

1. まずは、Webサイトにアクセスして調べたいURLを入力します。ページのURLでもスタイルシート（CSS）ファイルのURLでもかまいません。その後「検証する」ボタンをクリックします。
2. すぐに結果が表示されます。問題なければ正しい文法を用いている事を示すボタン画像のダウンロードなどができます。問題があれば、問題のある箇所の指摘が表示されます。

指摘されている箇所を1つずつ解決していく事で、100点を取ることは難しくありません。

このような点は、機械的にはチェックできないので、自らが気をつける必要があります。

検索エンジンの対応と同時にアクセシビリティの向上に

正しい文法でページを作成しておく事は、SEO面も含めて様々なメリットがあります。

HTMLを適切に活用して文章構造を表現する

Webページを構成する言語である「HTML」は、適切な要素（タグ）を使うことで文章構造を表現できます。

「見出し」や「強調」など、様々な意味を表現する要素が用意されており、それらを使うことで「そこで述べられている意図」を表現できます。

検索エンジンは、HTMLの文法を解釈する事で、その文章構造から内容を把握しようとします。

したがって、正しい文法と適切な構造でページを作成しておく事が重要です。

HTMLでは、タグという記述方法を用いて、文章に様々な意味を付加します。例えばh1タグに囲まれた範囲はもっとも上位の見出しという意味になります。

正しい文法を使うメリット

正しい文法を使って記述する事は、検索エンジンの対応というだけでなく、同時にアクセシビリティの向上にもつながります。

なぜなら、正しい文法を使うことで、より多くの環境で不具合無く閲覧できるようになるからです。

また、HTMLの文法が正しければ、CSS（スタイルシート）を用いてのデザインもしやすくなるというメリットもあります。

これは、スタイルシートが主にHTMLの要素に対して装飾を加えるよう記述するからです。

装飾対象になるHTMLが文法的に正しければ、より多くの環境で同じように正しく装飾が行えます。

文法的に誤っていると、閲覧環境によって表示のされ方が異なる原因になります。

ブラウザ上でそれなりに表示できているからといって、必ずしも文法が正しいとは限りません。

ブラウザ上で表示確認を行うだけではなく、文法をチェックできるサービスなどを活用して、文法上のミスがないかどうか確認しておきましょう。

表示されない箇所も重要

HTMLには大きく分けてhead部分とbody部分があり、先頭にはDOCTYPE宣言を記述します。

head部分にはページタイトルや概略文、読み込みたいスタイルシートやスクリプトなどの各種情報を記述します。

body部部には、実際に表示される本文などを記述します。先頭のDOCTYPE宣言は「どのバージョンのHTMLを用いて記述しているのか」を示す記述です。

HTMLのhead部分には、ページタイトルなど本文以外の情報を記述します。

実際の表示には直接関係しないものもありますが、書いておくべき情報が幾つかあります。

検索エンジン向けに重要なmeta要素もここに記述します。

ブラウザでの表示にはあまり関係ないものが多いので省略してしまいがちですが、必要な情報は省略せずに書いておくようにしましょう。

「何についてのページなのか」を検索エンジンに伝える

キーワードを強調する事で、「何についてのページなのか」を検索エンジンに伝えやすくなります。

強調されている単語は検索エンジンに重視される

検索エンジンは、そのページで語られている内容を判断するために、本文中で強調表示されている単語を参考にします。

なぜなら、起用長されているからには、そのページの話題に関して重要な単語だと考えられるからです。

ですから、本文中に登場する最適化したいキーワードを強調する事で、ページの内容を検索エンジンに伝える事ができます。

HTMLには、強調を表現するための要素が2週類用意されていますので、これらを旨く活用しましょう。

強調を表現する要素は「em要素」と「strong要素」で、前者が強調、後者が強い強調を表します。

代表的なブラウザは、em要素を斜体。strong要素を太字で表示します。

強調の度合いに応じてem要素とstrong要素を使い分ければよいのですが、最初からstrong要素だけを使うように決めておいても良いでしょう。

日本語の文字が斜体で表示されると読みにくくなる可能性があるからです。

本文中のキーワードは必ず強調する

本文中に登場する最適化したいキーワードは、強調させておきましょう。

強調するには、強調したい単語をstrong要素またはem要素に含めればよいだけです。

強調する箇所は絞る

強調箇所が重視されるとはいえ、文章全体を強調しても意味はありません。

強調の度合いは、そのページ内に存在する単語間で相対的に評されるだけだからです。

ページ内の全てを強調した場合は、どの単語の強調度合いも一緒になるため、何も強調していないのと同じことになってしまいます。

ですから、重視させたいキーワードのみを強調するように記述し増しよう。

b要素よりはstrong要素を使う

強調目的で使われる要素として、emやstrong要素のほかに、b要素があります。

これは「太字で表示する」ための要素です。

代表的なブラウザでは、strong要素を使ってもb要素を使っても、表示は全く同じになります。

しかし、b要素にはHTMLの文法的に「強調」を表す意味があるわけではありません。

ただ「太字にする」という効果だけです。

しかし、b要素は強調目的で使われることもあるため、検索園児はこの要素も重視します。

ただ、HTMLでは文章構造だけを表現するほうが好ましいので、b要素は使わないほうが良いでしょう。

strong要素など、「強調」を表現するための要素があるのですから、それらを使っておきましょう。

尚、強調目的ではなく、デザイン目的で太字にしたい場合は、b要素ではなくスタイルシートを使いましょう。

強調の要素を使わない強調には効果がない

ページデザインによっては、強調を「太字ではなく」「赤色の文字」で表現したいと思う事もあるでしょう。

しかし、視覚的な装飾だけで強調を表現しても、検索エンジンには伝わりません。なぜなら、検索エンジンには「強調の意図があって赤く強いる」とはわからないからです。

拝見に蛍光色を使ったり、文字サイズを大きくしたりする装飾は、ブラウザで閲覧している人間には強調の効果があります。

しかし、ソースを読んで内容を判断するだけの検索エンジンには効果がありません。

強調したい文字を赤色で表示させたい場合は、強調を示す要素（emまたはstrong）を使った上で、その要素に対して、スタイルシートでも辞職を赤色に指定しましょう。

そのほかの装飾でも同様です。HTMLでは意味のみを表現し、望みの装飾はスタイルシートで行います。

装飾はスタイルシートで

代表的なブラウザでは、em要素は斜体で、strong要素は太字で表示されます。

これらの装飾はスタイルシートで変更する事ができます。

「強調はしたいが太字にはしたくない」という場合は、スタイルシートで太字を無効にしたうえで、望みの装飾を加えればよいでしょう。

日本語では、斜体で強調が表現される事はあまりありませんから、em要素を強調に使う際には、スタイルシートで斜体を無効に指定しておくと良いでしょう。

strong要素の装飾を太字にしたくない場合は、font-weightプロパティの値にnormalを指定します。

これによって太字を解除できます。

同様に強調を文字サイズを大きくする事で表現したい場合は、font-sizeプロパティで文字サイズを指定します。

SEO面でもアクセシビリティ面でも重要

画像には、必ず代替文字を指定しておきましょう。SEO面でもアクセシビリティ面でも重要です。

画像の意味を文字で表現する代替文字（alt属性）

HTML上で画像を表示させるためのimg要素には、何らかの原因で画像が表示できなかった場合のために、画像の代わりに表示する文字を指定できます。

その文字の事を「代替文字」といいます。

以下のように、imgタグの中にファイル名（src属性）やサイズ（width属性・height属性）と並べて、「alt」属性を使って記述します。

この代替文字は、画像が何らかの原因で読み込めなかった場合のほか、もともと画像が表示できない環境で閲覧された場合は、音声読み上げブラウザでアクセスした場合などで使われます。

また、通信速度の遅い環境では、画像の表示が完了するまでの間、代替文字が表示されている事もあります。

このように、アクセシビリティの面でも重要なので忘れずに記述しておきましょう。

尚、代替文字には、画像の代わりに表示されても意味が通じる内容を記述しておかなければなりません。

例えば、画像のファイル名を入れたり、ただ「画像」とだけ書いたりしても全く意味がない点に注意してください。 画像の代替文字として望ましいのは、画像の代わりとして正確に意味が伝わる内容です。

代替文字は検索エンジンにも有効

この代替文字は、画像そのものの内容を文字で表現したものとして、検索エンジンも解釈します。

したがって、キーワードを含んでも文脈上問題がないのなら、画像の代替文字にもキーワードを含めておくと良いでしょう。

弊社がインストールしたDrupalは本文中に画像を挿入する再、代替文字を入力するフォームが表示されます。

そうする事で、ページ内でのキーワードの出現頻度を高める事ができ、SEO面で有効です。

例えば、東京国際展示場について説明しているページで、有明の海を撮影した写真を掲載する事を考えます。

この場合、代替文字に「有明の海」とだけ記述するよりは、「東京国際展示場から見える有明の海」のように、キーワードを含ませておくほうがページ内のキーワード出現頻度を向上させられます。

代替文字は、ページの内容を判断する材料のほか、画像検索機能にも活用されます。

GoogleやYahoo! JAPANなどでは、検索後を単語で入力して画像を検索する機能があります。こ

れらの検索には、画像に指定されている代替文字も、検索結果を表示する材料として使われています。

適切な代替文字を書いておく事は、画像検索の検索結果からのアクセスを増やす効果も期待できるでしょう。

スパム的な記述は避ける

画像が表示される限り、代替文字はアクセス者には見えません。

そこを悪用して、検索エンジン向けに大量の無関係な文字列を含めてはいけません。

それは検索エンジンスパムと判断されて、ペナルティの対象になる可能性があります。

代替文字には、画像を正しく表現する文字列だけを記述するようにしましょう。

表現がおかしくならない程度にキーワードを含めるようにする事で、SEO面でも旨く活用できます。

例えば、次のような代替文字は避けるようにします。

• 同じ単語を何度も列挙する。
• 小さな画像に大量の文章を記述する。

同じ単語を大量に列挙しても意味がありません。

これは、本文内の単語でも代替文字内の単語でも同じ事です。

大量に列挙されすぎている単語は、特に重要な単語だとは判断されません。

悪質な場合には、ページそのものにペナルティが科せられる可能性もあります。

また、画像サイズを考えて明らかに代替文字が多すぎる場合も、スパムとして判定される可能性があります。

代替文字に長い説明文を入れないように注意しましょう。

画像の面積が本当に大きくて、表現する内容が多く、代替文字が長くなってしまう場合は問題ありません。

ただし、本当に画像化が必要かどうか再検討する必要はあるでしょう。

デザイン目的の画像はalt属性を空にする

デザイン目的で使用している（言葉としての）意味がない画像のalt属性値には、何も指定しないでおきます。

alt属性は文法上は省略できないので、「alt=""」のように値の中身を空にして記述します。

そうする事で、「特に問題はない画像だ」という事を伝える事ができます。