fbpx

SEO

SEO対策の基本!<head>で必ず書くべきHTMLのタグとは?

この記事の監修

コピー&マーケティング株式会社 代表取締役
山田 秀平(やまだ しゅうへい)

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要素―
~に囲まれたエリア内に書く「webページの概要」「コンテンツ以外の情報を制御する要素」を記述する箇所

body要素―
~に囲まれたエリア内に書く「webページの本文・コンテンツ」を記述する箇所

例えば、皆さんが面白そうな本を探しに本屋に行ったとしましょう。

その際にまず手に取ってみようかどうかの判断材料にするのは本のタイトル表紙だと思います。

ここがwebページでいうhead要素の部分です

また面白そうだと思って、手にとって本をパラパラとめくってみます

ここがwebページでいうと本の中身に相当するbody要素になります

DOCTYPE宣言は、本屋の例になぞらえるなら書かれている言語に相当し、日本人が読むことができる日本語で書いている、ということを宣言していることになります。

webページはバージョンによって記述方法が変わるので、忘れてはならない記述だと覚えておきましょう

要チェック!head内に必ず書くべきタグまとめ


ではここからはSEO対策におけるhead内に必ず書いておきたい基本的なタグをまとめます。

(1)title

titleタグはSEO対策において最も重要なタグです

検索エンジンが検索キーワードに対して、webページの内容が合致しているかどうかを判断する時、一番参考にしている部分です

titleに書かれたテキストはブラウザ上部と検索結果に表示され、ユーザーのクリック率にも影響がでます

titleに入っているキーワードや順序を変えるだけで検索結果の順位に影響するため、十分検討してtitleのテキストをつけるとともに、webページの内容に合致するよう気を付けましょう

titleタグの詳しい書き方やポイントについては、こちらに詳しい記載があるので見てみてください。

(2)metaname=”description”

metadescriptionタグは、そのwebページに何が書かれているのか内容を簡潔にまとめた概要を書くタグです

検索結果画面でwebページのタイトルの下にある「スニペット」と言われる表示エリアに入り、ユーザーがwebサイトを訪問する前にwebページの内容をより具体的に伝えることができます

metadescriptionは直接SEOの順位に変動があるものではなく、書かなくても検索エンジンがwebページの内容から説明文を抜粋してスニペットにテキストを表示してくれます

また書いたからといって必ずしもスニペットに表示してくれるわけでもありません。

しかし、書かなければ検索エンジンが内容を抜き出したテキストが表示されてしまうのは確実です。

よりユーザーが理解しやすい適切な文章にし、狙っている検索キーワードを入れておくことでコンテンツの関連性を高めるなど副次的な効果があるので必ず記述しておきましょう

metadescriptionタグの詳しい書き方やポイントについては、こちらに詳しい記載があるので見てみてください。

(3)metacharset

metacharsetタグはwebページが記述している文字の形式を設定することで、文字化けを防ぐことができるタグです

正しい文字コードを指定しないと文字化けの原因になり、SEOの評価が大きく下がる可能性があるので、head内の冒頭に書いておくものだと覚えておきましょう。

文字コードには「Shift_JIS」「EUC-JP」「UTF-8」など様々な種類がありますが、大きな理由がないのであればwebで標準的に使われているUnicode(ユニコード)の「UTF-8」を使用しましょう。

UTF-8なら特殊記号や絵文字などもそのままHTMLに記述できる特性があるため、文字化けのリスクをより減らすことができます

(4)metahttp-equiv

metahttp-equivタグはwebブラウザのひとつであるInternetExplorer(以下IE)用に最適化するためのタグです

IEの機能のひとつにIEの過去のバージョンの表示をサポートするために「互換モード」があるのですが、ユーザーが知らないまま使っている状態でwebページを閲覧するとwebページのデザインが崩れてしまうことがあります

上記のタグは、「IEでこのwebページを表示するときは常に最新バージョンで表示してください」という指示になるので、デザイン・レイアウト崩れを防ぐためにも書いておきたいタグになります

(5)metaname=”viewport”

metaviewportタグは、1つのhtmlで複数のデバイスに最適化されたwebページを作成する際に書かれるレスポンシブwebデザインを採用した際に、デバイスの画面サイズに合わせてwebページを表示されるために記述するタグです

モバイルフレンドリーを提唱しているGoogleviewportの設定をするように促しています。

参照:ビューポートを設定する|PageSpeedInsights|GoogleDevelopers「推奨される解決方法」

metaviewportの設定は、スマートフォンやタブレットなどのモバイル端末でwebサイトをみたときの見やすさやわかりやすさなどの視認性に大きく寄与し、合わせて回遊率や離脱率にも影響します

必ず適切なサイズで設定しておきましょう

(6)OGPタグ

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要素を通じてしっかりと伝え、有益なコンテンツをユーザーに届けることができるようにしましょう

関連記事

  1. SEO

    インデックス数とは?SEOに影響する理由、確認方法と増やし方

    webサイトにおいて、検索結果の表示対象として情報登録されているweb…

  2. SEO

    ドメイン評価でSEO順位が変わる?ドメイン評価を上げる5つのコツ

    ドメインパワーによる評価がSEOにどう関係するのか知りたい。ド…

  3. SEO

    SEO的に良いのはページ分割?1ページにまとめる?おすすめの方法

    SEO効果が見込めるような内容の充実したwebページを作成しようとする…

  4. SEO

    404エラーページを工夫してSEO評価につなげよう

    検索結果に表示された気になるタイトルのリンクを開いたとき、webサイト…

  5. SEO

    WordPressのSEOプラグイン3選!入れるときの判断基準も解説

    webサイトを運営・管理するにあたって、有名なブログソフトウェア「Wo…

  6. SEO

    SEOスパムと判断される代表的な行為とは?4つのタイプ別に解説

    自社サイトの順位を上げようと、日々SEO対策に取り組んでいる担当者も多…

最近の記事

最近の記事

  1. WordPressのSEOプラグイン3選!入れるときの判断基…
  2. インデックス数とは?SEOに影響する理由、確認方法と増やし方…
  3. SEOの攻略本「ガイドライン」を解説!最近のGoogle傾向…
  4. 必読!Google公式の「SEOスターターガイド」を解説しま…
  5. SEO評価を上げるディレクトリ構造とは?その効果と構築のポイ…
  1. SEO

    SEO評価をアップさせる内部施策と外部施策とは
  2. SEO

    404エラーページを工夫してSEO評価につなげよう
  3. SEO

    SEO対策になるリライトの方法5つをご紹介します!
  4. SEO

    SEOのために重要な検索結果ランキング取得ツールおすすめ7選
  5. SEO

    SEO対策になるmetaタグの設定!その効果と実装例
PAGE TOP