コピー＆マーケティング株式会社 代表取締役
山田 秀平（やまだ しゅうへい）
24歳で起業後、世界トップクラスのマーケッターやコピーライターからビジネスを学び、年商3000万円に満たない企業をすぐに約17倍の年商5億まで成長させる。コンテンツマーケティングでは、累計で12万人以上を集客してきた。現在はコンテンツマーケティングのインハウス支援に取り組んでいる。
SEO対策において、ユーザーが入力した検索キーワードに適した質の高いコンテンツを作ることが大原則です。
ただ「どんなことが書かれているwebサイトなのか検索エンジンに適切に伝える」ということができていないと、そもそも検索エンジンに評価してもらえません。
せっかく作成したwebページを検索エンジンに見つけてもらいやすくするために記述するタグは、webページのお作法のようなものでSEO対策の基本です。
今回はHTMLの基本的な構造について説明し、SEO対策において検索エンジンにwebサイトの情報を伝えるために最低限必要なhead要素についてまとめます。
なお本ページでは最新のバージョンであるHTML5に準拠して解説します。
目次
SEOの基本！HTMLの基本構造であるhead要素とbody要素とは
検索エンジンに情報を適切に伝えるために、まずはwebページがどのようにつくられているのか知っておく必要があります。
HTMLの基本構造を知っておきましょう。
webページはHTMLというマークアップ言語で作られていることを示す html ~ /html というエリア内に構成される以下を記述することで作成されています。
DOCTYPE宣言―
HTMLがどのバージョンで記述されているのか宣言するものでHTMLの先頭に記述する。HTML5は
head要素―
body要素―
例えば、皆さんが面白そうな本を探しに本屋に行ったとしましょう。
その際にまず手に取ってみようかどうかの判断材料にするのは本のタイトルや表紙だと思います。
ここがwebページでいうhead要素の部分です。
また面白そうだと思って、手にとって本をパラパラとめくってみます。
ここがwebページでいうと本の中身に相当するbody要素になります。
DOCTYPE宣言は、本屋の例になぞらえるなら書かれている言語に相当し、日本人が読むことができる日本語で書いている、ということを宣言していることになります。
webページはバージョンによって記述方法が変わるので、忘れてはならない記述だと覚えておきましょう。
要チェック！head内に必ず書くべきタグまとめ
ではここからはSEO対策におけるhead内に必ず書いておきたい基本的なタグをまとめます。
(1)title
|
1 |
<title>webページのタイトル</title> |
titleタグはSEO対策において最も重要なタグです。
検索エンジンが検索キーワードに対して、webページの内容が合致しているかどうかを判断する時、一番参考にしている部分です。
titleに書かれたテキストはブラウザ上部と検索結果に表示され、ユーザーのクリック率にも影響がでます。
titleに入っているキーワードや順序を変えるだけで検索結果の順位に影響するため、十分検討してtitleのテキストをつけるとともに、webページの内容に合致するよう気を付けましょう。
titleタグの詳しい書き方やポイントについては、こちらに詳しい記載があるので見てみてください。
(2)metaname=”description”
|
1 |
<metaname="description"content="webページの概要"> |
metadescriptionタグは、そのwebページに何が書かれているのか内容を簡潔にまとめた概要を書くタグです。
検索結果画面でwebページのタイトルの下にある「スニペット」と言われる表示エリアに入り、ユーザーがwebサイトを訪問する前にwebページの内容をより具体的に伝えることができます。
metadescriptionは直接SEOの順位に変動があるものではなく、書かなくても検索エンジンがwebページの内容から説明文を抜粋してスニペットにテキストを表示してくれます。
また書いたからといって必ずしもスニペットに表示してくれるわけでもありません。
しかし、書かなければ検索エンジンが内容を抜き出したテキストが表示されてしまうのは確実です。
よりユーザーが理解しやすい適切な文章にし、狙っている検索キーワードを入れておくことでコンテンツの関連性を高めるなど副次的な効果があるので必ず記述しておきましょう。
metadescriptionタグの詳しい書き方やポイントについては、こちらに詳しい記載があるので見てみてください。
(3)metacharset
|
1 |
<metacharset="文字コード"> |
metacharsetタグはwebページが記述している文字の形式を設定することで、文字化けを防ぐことができるタグです。
正しい文字コードを指定しないと文字化けの原因になり、SEOの評価が大きく下がる可能性があるので、head内の冒頭に書いておくものだと覚えておきましょう。
文字コードには「Shift_JIS」や「EUC-JP」、「UTF-8」など様々な種類がありますが、大きな理由がないのであればwebで標準的に使われているUnicode（ユニコード）の「UTF-8」を使用しましょう。
UTF-8なら特殊記号や絵文字などもそのままHTMLに記述できる特性があるため、文字化けのリスクをより減らすことができます。
(4)metahttp-equiv
|
1 |
<metahttp-equiv="X-UA-Compatible"content="IE=edge"> |
metahttp-equivタグはwebブラウザのひとつであるInternetExplorer(以下IE)用に最適化するためのタグです。
IEの機能のひとつにIEの過去のバージョンの表示をサポートするために「互換モード」があるのですが、ユーザーが知らないまま使っている状態でwebページを閲覧するとwebページのデザインが崩れてしまうことがあります。
上記のタグは、「IEでこのwebページを表示するときは常に最新バージョンで表示してください」という指示になるので、デザイン・レイアウト崩れを防ぐためにも書いておきたいタグになります。
(5)metaname=”viewport”
|
1 |
<metaname="viewport"content="表示サイズの指定"> |
metaviewportタグは、1つのhtmlで複数のデバイスに最適化されたwebページを作成する際に書かれるレスポンシブwebデザインを採用した際に、デバイスの画面サイズに合わせてwebページを表示されるために記述するタグです。
モバイルフレンドリーを提唱しているGoogleもviewportの設定をするように促しています。
参照：ビューポートを設定する|PageSpeedInsights|GoogleDevelopers「推奨される解決方法」
metaviewportの設定は、スマートフォンやタブレットなどのモバイル端末でwebサイトをみたときの見やすさやわかりやすさなどの視認性に大きく寄与し、合わせて回遊率や離脱率にも影響します。
必ず適切なサイズで設定しておきましょう。
(6)OGPタグ
|
1 2 3 4 5 |
<metaproperty="og:title"content="(タイトル名)"> <metaproperty="og:type"content="(種別名)"> <metaproperty="og:image"content="(画像のURL)"> <metaproperty="og:url"content="(ページのURL)"> <metaproperty="og:description"content="(ページの紹介文:任意)"> |
OGP（オージーピー：OpenGraphProtocol）タグとは、webページをFacebookやTwitterなどのSNSでシェア（共有）する際に、どのように表示させてシェアするのかを指定できるタグです。
OGPタグがあると、シェアされるときにリンク先の内容を画像で訴求できたり、概要文を書いて興味を持ってもらったりと表現に幅をもたせることができます。
OGPタグの設定がない場合、シェアされるのはURLリンクの文字列だけなので、SNS上での拡散と集客に大きな差がでます。
SNSは大事な流入チャネルの一つです。
必ず記述しておきましょう。
まとめ
SEO対策において大変重要な役割をもつhead内に記述する、個別のタグについて解説しました。
HTML基本構造のイメージ図で書いたようにhead要素はwebサイトを訪れたユーザーから見えるコンテンツではないため、チェックの際におろそかになりがちな部分です。
またCMS(コンテンツマネージメントシステム:ContentsManagementSystem)を使ってwebサイトを管理している場合に、head要素は自動生成される機能がありますので、web制作の際に要件として意識することがないため、SEO対策として最適化されないままリリースされてしまうことがあります。
そして、リリース後しばらくしてから「思ったよりページビューが伸びない…」ということになってしまい、SEO対策が後手に回ってしまうのです。
これは大変もったいないことです。
検索エンジンにwebサイトの情報をhead要素を通じてしっかりと伝え、有益なコンテンツをユーザーに届けることができるようにしましょう。
