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>webページのタイトル</title>

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

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

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

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

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

(2)metaname=”description”

<metaname="description"content="webページの概要">

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

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

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

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

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

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

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

(3)metacharset

<metacharset="文字コード">

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

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

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

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

(4)metahttp-equiv

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

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

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

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

(5)metaname=”viewport”

<metaname="viewport"content="表示サイズの指定">

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

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

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

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

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

(6)OGPタグ

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

関連記事

  1. SEO

    サブドメインはSEOに効果的?メリット・デメリットとは

    SEO対策をするために、サブドメインの利用を検討されている方も多いでし…

  2. SEO

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

    SEO対策を行う目的は、広告費をかけずにwebサイトを検索結果画面の上…

  3. SEO

    必読!Google公式の「SEOスターターガイド」を解説します

    SEO対策についての情報をキャッチアップする中で、webの管理者が最も…

  4. SEO

    SEO初心者でもできる!ページタイトルが決まる簡単3ステップ

    検索結果に表示され、ユーザーの目につきやすい「ページタイトル」は、SE…

  5. SEO

    クロール:SEO評価に直結する情報取り込み作業とは?

    検索エンジンの検索順位を決めるための情報を集める自動巡回ロボット「クロ…

  6. SEO

    SEO対策とは?意味がない施策と今すぐできるたった3つのこと

    SEO対策という言葉は聞いたことがあっても、具体的に何をすればいいのか…

最近の記事

最近の記事

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

    厳選!SEOライティングのコツはたった3つだけ!
  2. SEO

    SEO対策になる「h1(見出しタグ)」の取り扱いポイント5つ!
  3. SEO

    SEO対策のキーワードの正しい選び方【5つの手順と注意点】
  4. SEO

    クロール:SEO評価に直結する情報取り込み作業とは?
  5. SEO

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