SEO FRIENDLY

01検索に効果的なSEOに強いHTMLコーディングとは

検索エンジンの仕組み

SEOに強いコーディングを知る上でも、SEOそのものについて知る上でも、まず検索エンジンとは何者であるかを理解することが重要なのは言うまでもありません。
世界で最も利用されているであろうWebサイトの検索エンジン「Google」は、年間500回以上アルゴリズムを更新するという最強の検索エンジンですが、namazuやapache solrといったオープンソースの検索エンジンであっても、基本的なロジックは同じです。
検索エンジンは検索対象となる文章から、その文章の「言いたいこと」を把握し、文章間の関連性を 「言いたいこと」が同じかどうか という基準で数値評価する、そういったプロセスを用いて検索を提供しています。
言葉で書くとわかりづらいですが、とある話題=ユーザの入力した検索キーワード について書かれているWebページはこれだけありますよ ということを、Googleやいろんな検索エンジンは理解しているのです。

コンピュータは言葉がわからない

Webページの「言いたいこと」をコンピュータが理解している、これは実は非常に高度な、そして挑戦的な技術が必要となります。

人間同士でも相手の言いたいことを確実に理解することは難しいですね。人間は言語の違い(日本語、英語、ベトナム語 等)から、各言語においても方言や言い回し、前の文脈から引き継ぐ韻や前提条件となる知識、そしてそれらがもたらす会話全体の、言葉にならない心理的感情まで操作しながら日々コミュニケーションをとります。

コンピュータがこれを理解するとなると、まず言語や単語の理解(持つ 言う 歩く という単語自体の選別と、各言葉が持つ実際の動作、表現、心情等との関連)、その後、前後の文脈を元に意味を絞り込み(例えば飴をなめる と 辛酸をなめるは異なる)、文一つを理解する。これを繰り返し、、、となるわけですが、0か1しかわからないコンピュータがこれを扱うには膨大な時間がかかります。現実的には不可能な時間(※1)になるでしょう。
※1 自然言語に対する意味の推定にはいろいろな論、アルゴリズムがあります。ここでは今のところ現実的に利用されやすい例を用いています

02HTMLは定義づけのルール

人の手による定義づけ

ではGoogleは裏側で人がせっせと働いているのか、もちろんそんなわけはありません。

こういった「人が使う言葉をコンピュータで扱おう」と試みる学問領域を自然言語処理学と称します。
この名前が表す通り、今現在のアプローチは「言葉を理解させる」のではなく(※2)「言葉を処理する」という方向です。
つまり言葉自体の意味はどうでもよく、ただ同じ仲間かどうか、類似する文脈で使われるかどうか等、言葉と言葉の関係に「絞り込め」ば、コンピュータは現実的な時間内で処理できるだろう。
そうすれば、コンピュータがまるで言葉を理解したかのように振る舞うことができるだろう、という考え方です。
ここで大事になるのは処理を「絞り込む」方法です。色々な手法や考え方がありますが、ことインターネットの検索エンジンでは「定義づけ」は非常に大事な要素です。

「定義づけ」とは、どれと関連づいている、どれに内包される、どれとは異なる等の情報は人の手で与えようという作戦です。
例えば
「飴をなめる」は「食べる」の仲間
「人間」は「食べる」ができるが、「コンピュータ」は「食べる」ができない
等のように、文章以外の情報を追加することで、コンピュータの負荷が減り、現実的な時間で処理できるようになるわけです。

Googleの検索エンジンや、iOSのSiri、漢字変換ツールなど、これらはもれなく自然言語処理学の恩恵を受けて実装されています。
※2 自然言語理解学といった分野もありますが、近年の技術進歩により徐々に差がなくなっているとする研究者もいます

HTMLで「定義づけ」された文章を好む検索エンジン

現在はバージョン5.2が議論されているHTMLですが、この仕組みも本来は「定義づけ」のためのものとして生み出されました。
インターネットに広がる色々な文章に定義づけを行うことで、コンピュータをインターネットに参加させ、色々な情報処理を行おうという思想から生み出された定義づけのルールだったのです。

しかしながらHTML5以前は、定義づけのためのHTMLタグが「意味」ではなく「飾りつけ」の定義に使われてしまいました。
例えばpタグは段落を意味し、tableはデータが含まれる表を意味したわけですが、実際には余白やレイアウトの調整に使われたわけです。
その結果、検索エンジンはこれらのタグをできない状態になりました。本来ならば意味の定義に利用されるべきHTMLタグについて、その使用方法を(どちらかといえばブラウザベンダーが)間違えたため、検索エンジンは文章の意味が分からなくなってしまったのです。
pタグの中がただの空白、H1タグには単に大きく表示したい文章が含まれている・・・・とあれば、もはやこれらのタグを無視するしかありません。
結果的にこの時代は、バックリンクを大量に用意したり、ページ下部に多量の隠しテキストを挿入する等の、裏技的なSEOが大変流行いたしました。
この流れはHTML5の登場にて大きく改善されます。

03セマンティックコーディングと構造化データ

HTML5でセマンティックコーディング

HTML5(およびCSS3)では、HTMLタグを本来の定義づけに利用するため、いくつかのタグ定義が追加されました。 header,footer,nav,article,aside 等がその一例です。
過去のHTMLと後方互換性も残しつつ、データ量が半端なく増えているこの現状に対して、もう一度しっかりとした定義づけを行い、コンピュータの理解できるインターネットを作ろう、そういったメッセージが含まれているのではないかと思います。
弊社ではこのHTML5で導入されたHTMLタグを利用して文章の意味/構造を明確にし、しかしながら表現の自由度は損なわないようCSS3やJavaScriptを用いてWebページを実装する「セマンティックコーディング」を基本としております。

セマンティックコーディングされたHTMLの「わかりやすさ」は、例えばCSSや画像表示を無効化すると一目瞭然です。
Webサイトが見出し、小見出し、本文とその付録、といった形で定義されていることがわかります。
見た目の装飾は一切ありませんが、文章自体を理解するには逆に読みやすいと思われないでしょうか?
実際、検索エンジンはこの状態のWebページを見ています。ここから見出しや要約文、ナビゲーション情報などを抜き出して検索結果に表示をしているわけです。

構造化データの重要性

しかし検索エンジンの利用者は要望は日に日に細かくなります。例えば

映画 渋谷 5時

と調べれば、今日5時から渋谷で観ることのできる映画を一覧で出してほしいのです。

レシピ ビールに合う パクチー

と調べれば、ビールに合うパクチーを使ったレシピを出してほしいのです。

でも残念ながらHTML5にはというタグはありませんし、都度都度W3Cが勧告するわけにもいきません。

こういった流れで生まれたのが、構造化データになります。
以前よりmetaタグというものがありました。metaというのは、その情報に関する補足情報を意味します。
これを用いて、Facebookでシェアされたときの画像はこれにする、このページの作者は誰々である等の、Webページに対する補足情報を追加しようというわけです。
現在ではこの細かな要望に対応するため、Google、Microsoft、Yahooの3社が共同で、Scheme.orgという活動を通じてメタデータの種類を定義しています。
このメタ情報を、metaタグやmicrodata、JSON-LDといったHTMLタグの派生形式で記述することで、より細かな定義づけができるようになりました。
弊社ではこのメタ情報は非常に重要と考えており、お客様と相談しながら適切なメタ情報をページに埋め込むことを推奨しております。

04SEOに強いHTMLコーディングを使って、
効果を生み出すWebサイト制作を

こうしたセマンティックコーディングや構造化データを用いてWebページを実装することは、弊社では当たり前と考えています。
その上でマルチデバイスに対応したレスポンシブ化、運用しやすいCSSパーツ設計、WordPressやMovableTypeへの最適な組み込み、サーバの配置やサイト全体の応答スピード、セキュリティへの対応など、全体最適を取ってサイトを構築することが重要です。

弊社は元来の検索エンジンに対する知見に加え、日々お客様からご相談いただく「現場の課題」に取り組み、SEOに強いHTMLコーディングを元に運用しやすいWebサイト制作を実施いたします。

CONTACT US

FASTCODINGのサービスは、「基本料金」・「CSS作成費」、
更には「JavaScript」・「WordPress」のオプション費用について一切料金がかかりません。

サービス料金はページ数×ページ単価のシンプルな料金で提供いたします。