2. Web制作について
  3. SEO対策もバッチリ！head要素内のテンプレート
SEO対策もバッチリ！head要素内のテンプレート
web

SEO対策もバッチリ！head要素内のテンプレート

どうも、Tommy(@SitommyBlog)です。

制作してhead要素内って結局何が一番ベスト何だろうっと思うことがあります。
今回は、私なりにhead内を整理する目的と、何があるのか再確認も兼ねて記事にしました。

また、head要素内はSEOに直結している部分もあるため、その対策もして行きたいと思います。

文字エンコード設定

<meta charset="UTF-8">

文字エンコードを指定するためのもので、日本語サイトであれば必ず書いておきましょう。

文字エンコードを指定するためなので必須ですね。
一昔前までは、日本サイトでは『Shift-JIS』が使われていたけど、近年では世界共通のため『UTF-8』を使用するケースが多くなっています。

なので、必ず『UTF-8』を使用しましょう。

IE用設定

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

IEにはバージョンがあり過去のバージョンで表示させる互換モードの機能があり閲覧者がこれを有効にしていた場合、古いIEでサイトを見ることになりその場合デザインが大幅に崩れることがあります。

そのため、設定しておくことで、常に標準モードで表示させることができます。表記上『Edge』を表示するようにしています。

以前、これを設定していなかったため、こちらのWindowsでは問題ないのにクライアント側のWindowsだけデザイン崩れが発生した恐怖な出来事がありました。

Viewport設定

<meta name="viewport" content="width=device-width, initial-scale=1.0">

スマホ・タブレットの表示にも対応するレスポンシブサイトで必要になってきます。ただ、近年ではスマホ・タブレットの表示は当たり前になっているので必須でいいと思います。

電話番号変換設定

<meta name="format-detection" content="telephone=no">

Webサイトで、電話番号が記載されているページがあると思います。スマホで表示されているとブラウザが自動でリンクをつけてしまうケースがありタップすると電話がかかってしまう設定です。意図したリンクではないことがあるので自動でリンクをつけないように設定してくれます。

タイトル設定

<title>タイトル</title>

ここに、設定した内容は、検索結果・ブラウザのタブに表示されます。赤枠の部分が表示される場所です。この設定は必須となります。

画像：検索結果タイトル
画像：ブラウザのタブ

ディスクリプション設定

<meta name="description" content="ディスクリプション内容">

ページ内容を表す項目で100文字以下程度に書くと良いです。長すぎると『・・・』となってしまい内容が読み取りづらくなりクリックされづらくなる。赤枠の部分がdescription内容です。この設定は必須となります。

画像：description内容

キーワード設定

<meta name="keyword" content="キーワード">

ページ内容を表すキーワードを書いていきます。一昔前までは、キーワードを入れることでSEOの効果が上がり検索結果にも影響がありましたが、今は全くSEOの効果はありません。

ですので、このmetaタグはもう必要なくていいのかもしれないですね。
ただ、昔ながらのなごりで入れてしまうケースは多いと思います。

URL正規化設定

<link rel="canonical" href="正規化するURL">

PCとスマホで別々で（UAで）切り替わるサイトの場合、Google検索エンジンは同じ内容のページが複数存在しそれぞれに評価を与えてしまします。PCとスマホでデザインは違っていても内容は同じなので、評価は統一にされるべきなのでレスポンシブではなくUA（ユーザーエージェント）切り替えの場合はこの設定が必要になります。気をつけましょう。

ファビコン設定

<link rel="shortcut icon" href="画像のURL" type="image/png">

ファビコンとは、ブラウザのタブに表示されるタイトルの左側画像を指します。また、ブックマーク時に表示されるアイコンにも使われます。サイズはいろいろありそれぞれ微妙に異なります。

  • 16px × 16px = IE用
  • 24px × 24px = IE9ピン留め機能時
  • 32px × 32px = Chrome、Firefox、Safariなど
  • 48px × 48px = Windows
  • 64px × 64px = 高解像度Windows

いろいろありますが、IEは今後サポートが切れるので、個人的には『32px × 32px』のサイズがベストだと思っています。

また、上記のコードはpng画像を使用する場合となり、gif画像を使用する場合は、

<link rel="shortcut icon" href="画像のURL" type="image/gif">

と書き換えることをお忘れなく。
jpg画像は使用しないように注意してください。
また、上記2つの設定だとIE8〜10には対応していません。そのため、もしIE8〜10を含むサイトを制作する場合は、拡張子を『.ico』にする必要があります。

<link rel="shortcut icon" href="画像のURL.ico" type="image/x-icon">

今後はEdgeだけになっていくので、あくまでも知識として覚えておくと良いと思います。このファビコン設定は今や必須だと思いますので、画像がない場合、デザイナーに説明して作成依頼してください。知らないデザイナーも多いです。

スマホ用アイコン画像設定

<link rel="apple-touch-icon-precomposed" href="画像のURL">

スマホのホーム画面にブックマークで保存した際に表示されるアイコンを設定できます。こちらの場合は、『150px × 150pxのサイズ』でpng形式になります。そこまで重要な設定ではないですが、このブログサイトみたいに愛読者を増やす媒体であれば設定しておいた方が、特徴だせるので良いと思います。

Windowsタイル用画像設定

<meta name="msapplication-TileImage" content="画像のURL">
<meta name="msapplication-TileColor" content="カラーコード（16進数）">

Windows8から登場しているピン留め機能時の設定になります。こちらも、そこまで重要な設定ではないですね。

CSSファイルの外部読み込み設定

<link rel="stylesheet" href="CSSファイルのURL" type="text/css">

当然ながら必須です。
CSSを読み込む設定ですのでお忘れなく。もし、CSSについてわからなければ

JavaScriptファイルの外部読み込み設定

<script type="text/javascript" src="JavaScriptファイルのURL"></script>

こちらも、当然ながら必須です。
ただ、JavaScriptに関しては、『head内で読み込むか』『/body直前で読み込むか』の2つのケースがあります。

コンピューターはコードを上から順に読み込んで行きます。そのため、HTMLなどのコンテンツをJavaScriptで変更する記述をしている場合、HTMLが全て読み込んでいないのにも関わらずJavaScriptが実行されてしまい変更されないケースを見かけます。その場合は、『/body直前』に書くか、

<script type="text/javascript" src="JavaScriptファイルのURL" defer></script>

このように、『defer』と記述しなければなりません。注意しましょう。

OGPタグ/twitterカード設定

<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋">
<meta property="og:image" content="画像のURL">
<meta name="twitter:card" content="カード種類">
<meta name="twitter:site" content="@Twitterユーザー名">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">

facebook、twitterなどSNSなどでシェアされた時に魅力的なリンクにしてくれます。これは必須の設定になってくると思います。

以上が、私が現段階で必要だと思うものを紹介してきました。また、追加事項等があった場合や、これはもう必要ないとかSEO上問題になるケースになった場合は追記します。
ちなみに全て入れると、

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>タイトル</title>
<meta name="description" content="ディスクリプション">
<meta name="keyword" content="キーワード">
<link rel="canonical" href="正規化するURL">
<link rel="shortcut icon" href="画像のURL" type="image/png">
<link rel="apple-touch-icon-precomposed" href="画像のURL">
<meta name="msapplication-TileImage" content="画像のURL">
<meta name="msapplication-TileColor" content="カラーコード（16進数）">
<link rel="stylesheet" href="CSSファイルのURL" type="text/css">
<script type="text/javascript" src="JavaScriptファイルのURL"></script>
 
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋">
<meta property="og:image" content="画像のURL">
<meta name="twitter:card" content="カード種類">
<meta name="twitter:site" content="@Twitterユーザー名">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">
</head>

という感じですね。
SEOに影響を与える部分ですので、しっかり把握してhead要素内を充実させて行きましょう。

web

Related

Ranking

目次