- FLOW
必要なこと
05マークアップ・Google最適化 Googleに正しく伝える
コーディング
さて、ここまででWebサイトの設計・コンテンツの作成・デザイン制作まではできました。
次の段階は、実際にWebサイトとして稼働させるためにコーディングに入ります。
ホームページ制作を家を建てることに例えると、Webサイトの設計・コンテンツ作成・デザイン制作は主に建築士さんのお仕事、コーディングは主に大工さんのお仕事になります。
- ドメイン、サーバーについて
- 余談ですが、家を建てることに例えると、サーバーは土地、ドメインは住所になります。
コーディング担当者を業界ではコーダーやフロントエンド・エンジニアなどと呼びます。このコーディングという工程は、ある程度のスキルが必要です。一般の方での作業は難しく、また品質の良いコーディングができているかの判断はさらに難しくなります。
コーダーが100人いたら100人ともコーディング方法は異なります。その中で品質を判断する重要なポイントは下記の3点です。
- マークアップ
- 今後の運用を考えてのコーディング
- レスポンシブ(マルチデバイス対応)
マークアップ
GoogleのAIは時を経て大きく進化しました。以前のSEOには検索順位を上げるためのテクニックが存在しました。その小手先のテクニックはだんだん淘汰され、今となってはスパム行為と判断され、逆に検索順位を落とす要因にもなっています。
ただ現在も、WebサイトのコンテンツをGoogleへ効果的に伝えると言うテクニックは存在します。その手法のひとつがマークアップです。
労力をかけて作成したコンテンツの内容を漏らすことなく、Googleに効果的に伝えるコーディング手法がマークアップです。
マークアップについて
人は目で見てホームページの情報を得ていますが、GoogleのAIは、HTMLの記述を読み取ることによりWebサイトの内容を判断・解析しています。
例えば、見出しには大見出し・中見出し・小見出しがあります。人は文字サイズや文字の太さなどから直感で見出しの大きさを認識できますが、GoogleのAIには目がありませんので、見た目で認識するのは不可能です。そのため、GoogleのAIはHTMLの記述によって、大見出し・中見出し・小見出しを区別しているのです。
上記のことから、GoogleのAIでも判断できるように、大見出し・中見出し・小見出しを正しくマークアップすることがコーディングにおいて重要になります。
具体的に、どのように見出しをマークアップするかというのは下記の通りです。
見出し | HTML | 役割 |
---|---|---|
大見出し | h1タグ | ページの内容を簡潔にまとめた見出し |
中見出し | h2タグ | ページ内のセクションの内容を簡潔にまとめた見出し |
小見出し | h3タグ | ページ内セクション内の段落の見出し |
※HTMLには、h1タグはページ内に1つだけなどのルールがあります。(例外はあります)
※見出し(hタグ)はh6まで用意されています。
繰り返しになりますが、GoogleのAIはHTMLで判断します。このマークアップを間違ってしまったり怠ってしまうとページの内容がおかしくなってしまい、内容を正しくGoogleのAIに伝えられなくなってしまいます。
HTMLタグには他にもさまざまなタグがあります
要素 | HTML | 役割 |
---|---|---|
ヘッダー | header | ページ内のヘッダー、主にサイト名、グローバルメニューなどの共通パーツ |
フッター | footer | 主にコンバージョンページへのリンク、コピーライトなどの共通パーツ |
コンテンツ | main | ページ内の主なコンテンツ |
記事 | article | 主にページ内で完結しているコンテンツ |
セクション | section | ページ内のテーマ性ごとに使用 |
段落 | p | 段落ごとに使用 |
リスト(順番なし) | ul | 順番がないリスト 通常のリストや、下層ページの一覧などに使用します |
リスト(順番あり) | ol | 順番があるリスト 1、2、3などの順番があるリスト、階層のあるパンくずリストなどに使用します |
上記に挙げたHTMLタグ以外にも意味のあるHTMLタグは多数存在しますが、これらのHTMLタグを使用しなくてもコーディングはできてしまいます。しかし、それはあくまでもデザインを再現しただけの状態であり、GoogleのAIにページの内容やWebサイトの内容を正しく伝えられている状態ではありません。
マークアップはコンテンツの内容をGoogleへ正しく伝えるという通訳の役目も担っており、コンテンツマーケティングには欠かせないポイントになります。
多くのコーダーは、提供されたデザインデータに基づきコーディングを進めます。特に指示がなくても先述したマークアップを施してコーディングするのが基本ですが、コーダーによっては全く施さない場合や、マークアップの視点がずれている場合も多々あります。マークアップについてきちんと対応しているかどうか、可能な限りコーダーに確認をしましょう。
今後の運用を考えてのコーディング
収益向上のページ、導線設計(UI)・デザインページでもご説明しましたが、事前にどんなに勉強・調査・設計をし、自信を持ってホームページを公開しても、それはあくまでも想定に基づいたものに過ぎません。結果はアクセス解析から見えてくる数字が教えてくれます。
多くの場合はアクセス解析を見ながら改善点を分析し、調整が必要になります。ページのレイアウトや、コンテンツの内容が変更になる場合もあります。
コーダーのコーディング方法は百人百様です。コーダーによっては公開時をゴールと考え、後からの変更を想定せずコーディングしてしまっていることもあります。その場合、変更が必要になった場合に想定以上に工数(費用)が発生してしまう場合があります。
そのため、コーダーには公開後の効果測定や解析によって変更が入る可能性があることを予め伝えておき、変更が入る前提でのコーディングを心がけていただくように伝えましょう。
レスポンシブ(マルチデバイス対応)
導線設計(UI)・デザインページでご説明しておりますのでここでは割愛しますが、多くの場合GoogleのAIはスマートフォン表示時で解析を行い、検索結果の表示順位を決定しています。
そのためスマートフォン表示に最適化したWebデザインとコーディングは、コンテンツ・マーケティングにおいて非常に重要です。
metaタイトル、metaディスクリプション
Googleの検索結果には、Webページの見出しと説明文が表示されます。この見出しがmetaタイトル、説明文がmetaディスクリプションです。それぞれのページで、metaタイトルとmetaディスクリプションを設定することができます。
せっかくGoogleの検索結果の上位に表示されていても、クリックされなければ全く意味はありません。少なくともmetaタイトルは検討し、設定するようにしましょう。metaディスクリプションは設定がない場合、GoogleのAIがそのページ内を解析し自動生成したものが表示されますが、表示されたものがあまり簡潔でない場合や分かりづらい場合などは、こちらも設定するようにしましょう。
Googleの検索結果において、metaタイトルとmetaディスクリプションはクリック率を上げる重要なポイントですが、注意しなくてはいけない点もあります。
metaタイトルとmetaディスクリプションがページの内容とあまりに乖離がある場合などは、逆にペナルティポイントとなってしまいます。下記のように正しく設定しましょう。
metaタイトル | ページの内容を簡潔に表した見出し |
---|---|
metaディスクリプション | ページの内容を簡潔に説明した説明文 |