みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

SEO対策のためのmetaタグはこう書く!効果のある記述方法を丁寧に解説

SEO対策のためのmetaタグはこう書く!効果のある記述方法を丁寧に解説

こんにちは。
サイトHTMLのhead内に書くmetaタグって、どうしてますか?

trouble
なんかいろいろ書くべきらしいけど、よくわからん

と思ってませんか?

確かに、ページのデザイン面には現れてこないので、サイト制作初心者であればあるほど見過ごしがちです。

でも、実はSEO対策などにかなり重要な「サイトの仕込み」になります。

metaタグに「何を」「どう」書くべきか知っていれば、基本的なSEO対策はカバーできます。

そこで、この記事では正しくmetaタグを書くために必要な手順を初心者でもわかるようにまとめました。

miyachi
この記事にあることを順にこなしていくだけで、SEO対策が簡単に出来るよ

【この記事の目次】

SEO対策のために欠かせないmetaタグとは何かを知る

question
てか、そもそもmetaタグって何?

metaタグとは、HTMLのhead部分に記載する、metaで始まるタグです。
「どんなサイトか」を宣言したり、システム上の設定を書いておいたりします。

このサイトのTOPページのhead部分は↓

<!-- 文字コード -->
<meta charset="UTF-8" />

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

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

<!-- 電話番号etcを自動でリンクにしない -->
<meta name="format-detection" content="email=no,telephone=no,address=no">

<meta name="description" content="未経験でもWEBサイト制作で稼げるようになるためのweb講座。専門用語を極力使わずに、初心者からでもスムーズにレベルアップするためのノウハウをまとめています" />
<link rel="canonical" href="https://miyachi-web.com/" />

<!-- OGP -->
<meta property="og:url" content="https://miyachi-web.com/" />
<meta property="og:title" content="みやちサイト制作所" />
<meta property="og:description" content="未経験でもWEBサイト制作で稼げるようになるためのweb講座" />
<meta property="og:image" content="https://miyachi-web.com/wp-content/themes/miyachive/assets/img/main.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@fujimiyachi" />
<meta property="og:site_name" content="みやちサイト制作所" />
<meta property="og:locale" content="ja_JP" />

<!-- favicon -->
<link rel="icon" href="assets/img/favicons/icon-16x16.png" sizes="16x16" type="image/png" /> 
<link rel="icon" href="assets/img/favicons/icon-32x32.png" sizes="32x32" type="image/png" />  
<link rel="icon" href="assets/img/favicons/icon-48x48.png" sizes="48x48" type="image/png" /> 
<link rel="icon" href="assets/img/favicons/icon-62x62.png" sizes="62x62" type="image/png" />
<link rel="apple-touch-icon-precomposed" href="assets/img/favicons/apple-touch-icon.png" />
trouble
なんか大量にあってわからん…

ぱっと見たところ多すぎて混乱するかもしれませんが、手順にのっとって機械的に設定してしまえばOKです。

システム設定として入れておくべき基本のmetaタグ

charset : 文字コード(文字エンコード)の宣言

まず最初に書くべきは、文字コードの宣言です。

<!-- 文字コード -->
<meta charset="UTF-8">

ざっくりいうと、システム的にどんな文字の種類を使って作っているか、を宣言するところです。
英語版のブラウザで日本語サイトを開いたときなどに文字化けしないよう、あらかじめ宣言しています。

wikipediaの文字化け
文字化けしたWikipediaのトップページ

日本語として設定できる文字コードは、主に以下の3種類があります。

  • UTF-8
  • SHIFT_JIS
  • EUC-JP

実際のところ上記3種類は役割が少しずつ違いますが、日本語のサイトならUTF-8で設定しておけば間違いありません

サイト内で日本語を使う前 = head開始タグの直後に、<meta charset="UTF-8">を差し込みましょう。

miyachi
<head>を書いたら、すぐ次に文字コードをUTF-8で宣言する!

実は、文字コードの宣言は100%必須の要素ではないですが、たった一行書いておくだけで万が一のエラーを防ぐことができるので書いておくのがオススメです。

viewport : スマホ対策

viewportとは「表示領域」のことです。

question
だから「表示領域」ってなんぞ?

わかりやすく言えば、画面に表示するエリアの設定で、入り切らないコンテンツをどう表示していくかをコントロールします。

何も設定しなければ、PCだとはみ出したコンテンツはスクロールで表示するようになりますが、スマホだと無理やり縮小することで表示しようとしてしまいます。

viewportの設定

レスポンシブ対応のサイトにするためには欠かせない部分となります。

viewportの設定には、以下のコードを入力するのがいいです。

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

↑によって、スマホ版での表示にもきちんと対応するサイトとなります。

miyachi
レスポンシブサイトにするためには、絶対欠かせない設定だよ

viewportの詳しい設定・理屈については知りたい方は以下の記事がおすすめ。

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

もう逃げない。HTMLのviewportをちゃんと理解する – Qiita

viewportをちゃんと理解する 今までviewportをよく理解せず、ごまかしごまかし &lt;meta name="viewport" c…

IE対策のためのmetaタグ

IE(Internet Explorer)は本当にやっかいなブラウザです。
なにせ、IEのみなかなか対応しないCSSがあったりして、表示崩れが起きやすい。

IEなんて……と嘆くサイト制作者も多いです。

そこで、IEでの崩れを防ぐために↓のコードをheadに入れておきます。

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

もとはIE利用者の場合で、どのバージョンを利用して画面表示するのかをコントロールするタグです。
IE=edge とすれば、その人のPCにインストールされているバージョンの中で最新のものを使用するようにします

miyachi
ある意味「少しでも表示崩れを防ぐための呪文」だね

ただし、IE11で非推奨となっているほか、Microsoft Edgeでは無視されます。

この先あまり意味はなくなっていくと思いますが、IE10以前のブラウザを利用している人を想定してhead内に念のため記述しておく形ですね。

format-detection : 電話番号・住所に関するスマホ対策

スマホでサイトを閲覧しているときに、何故か電話番号や住所部分が勝手に色が変わっている場合があります。

これは、スマホのブラウザが(いらない気をきかせて)「電話番号や住所をタップしたら電話をかけられたりマップ表示させるようにリンク貼っておいたほうが良いよね」というおせっかいを焼いてくれているからです。

確かに、電話番号をタップしたときに電話をかけられたら便利かもしれませんが、デザイン上想定外の部分で色が変わると困るケースもあります。

そこで、必要なときには手動で電話発信のためのリンク等を貼ることを前提として、自動設定はOFFにしておくのが一般的です。

<!-- 電話番号etcを自動でリンクにしない -->
<meta name="format-detection" content="email=no,telephone=no,address=no">
miyachi
自動設定をOFFにしておくと、スマホ版で見たときに想定外のリンクに驚くことがなくなるよ

Googleなどの検索エンジン向けの設定をするためのmetaタグ

description : ページのコンテンツについての要約

descriptionは、そのページにはどんな内容のものが掲載されているのかを要約して説明する部分です。

具体的には、Googleなどの検索結果の一覧で表示される説明文をコントロールする役割を持ちます。

descriptionの例
descriptionの例

もともとは検索結果の上位にあげるために重要な役割を果たしていましたが、現在は順位への影響はありません。
シンプルに、検索結果として表示された際に閲覧者がクリックするように誘導するためのテキストとして働きます。

descriptionとして入力できるのは最大124文字です。

PCからの流入をメインで考える場合は100文字程度、スマホの場合は50文字程度で入力するといいです。

あまり長すぎると「…」で省略されてしまい、大事なところが表示されきらない場合もあるので注意です。

ポイント

descriptionを変更してもすぐ検索結果には反映されません。
変更後、クローラーがサイトをチェックして初めて検索結果の一覧で反映されるので要注意です。

canonical : カノニカルURL

URLの正規化を設定する項目です。

question
URLの正規化って?

重複するコンテンツが複数あった場合に、どのURLのページが一番優先されるかを宣言するものです。

例えば、以下のような場合には同一コンテンツだがURLが複数存在するケースとなります。

  • PC用ページとスマホ用ページが別のURLで存在する
  • AMPを実装している
  • ABテストを行っているため、テスト箇所以外が同じコンテンツが複数ある

たまたまコンテンツが同じなのに、URLが複数ある場合は、クローラーなどの検索システムにすべてのページが別物として登録されてしまいます。
つまり、意図せず重複コンテンツとしてカウントされてしまうのです。

重複コンテンツとして認識されてしまえば、SEOに悪影響が出てしまいます。

trouble
知らないうちにSEOに響いてたなんて……

となる前に、重複コンテンツが存在する場合はカノニカルURLを設定しましょう。
重複ページの全てに同じURLを設定しておけば大丈夫です。

miyachi
この項目は必須ではないけど、状況に応じて設定が必要になるよ

サイトのコンテンツをSNSでシェアされたときのためにmetaタグでOGPを設定する

OGPとは「Open Graph Protcol」の略で、SNSで記事/サイトがシェアされたときに画像やタイトルなどの情報カードを表示するためにHTMLに仕込むもののことです。

例えば、このブログの記事をTwitterでシェアすると、ツイートの最下部にメインの画像・タイトル・テキストの一部が自動で挿入されます。

これは、TwitterがシェアされたページのOGP設定を読み込んで作成しています。

OGPの設定がされているかされていないかで、シェアされたときのクリック率が大きく変わってくるので設定は必須です!

必ず設定すべきOGPの項目

OGPの項目では、必ず設定すべきものがいくつかあります。

<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ユーザー名" />

各 content=”” の部分は、実際のサイトに合わせて書き換えます。

og:type(ページのタイプ)は、トップページなら「website」、それ以外なら「article」で設定。
twitter:card(カード種類)は、通常のブログなら「summary_large_image」とするのがオススメです。

設定が必須ではないが設定しておくといいOGPの設定

以下は、必須ではないけれど余力があれば設定しておくといい項目となります。

<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">

最後のfb:app_id(FacebookのアプリID)は、Facebookでの解析につかわれるIDです。

Facebookの開発者向けページにて発行する必要がありますが、ちょっと手順は面倒なのでお時間のあるときにどうぞ。

最終的なOGP設定

上記を行ったこのサイトのトップページにおけるOGP設定は以下のとおりです。

<!-- OGP -->
<meta property="og:url" content="https://miyachi-web.com/" />
<meta property="og:title" content="みやちサイト制作所" />
<meta property="og:description" content="未経験でもWEBサイト制作で稼げるようになるためのweb講座" />
<meta property="og:image" content="https://miyachi-web.com/wp-content/themes/miyachive/assets/img/main.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@fujimiyachi" />
<meta property="og:site_name" content="みやちサイト制作所" />
<meta property="og:locale" content="ja_JP" />
miyachi
面倒だったので、FacebookのアプリIDは省略してるよ

必須ではないが設定が推奨されるmetaタグ

SEOなどに直接大きな影響はなくても、通常のwebサイトでカバーされるべき項目があります。

faviconを設定する

サイトのデザイン・機能ばかりに目をやってしまうと見落としがちですが、ブラウザでページを開いたときのタブタイトルに表示されるサイトのアイコン(favicon)も設定しておくことが望ましいです。

favicon
このサイトのfavicon「み」

faviconが設定されていないと、人によっては「きちんと最後まで作り込まれていないな……」という印象になってしまうので、設定しておきましょう。

サイトアイコンの設定自体は難しくありません。

私は基本となる正方形のアイコンを大きめで1つ作成し、無料のウェブツールを使って一斉にリサイズ版を作成します。

様々なファビコンを一括生成

様々なファビコンを一括生成

使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.pn…

faviconジェネレーター

「画像ファイルを選択」ボタンで作成した正方形のアイコンを選び、下の「ファビコン一括生成」のボタンでリサイズ版を一括生成。

faviconを一括ダウンロード

少しわかりにくいですが、ページの中ほどに「ファビコンダウンロード」のボタンが出現するので、このボタンでアイコンをまとめてダウンロードします。

上記のツールでfaviconが作成できたら、htmlのHEAD部分にfaviconを読み込んでもらうためのタグを挿入します(↓例)。

<!-- favicon -->
<link rel="icon" href="assets/img/favicons/icon-16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="assets/img/favicons/icon-32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="assets/img/favicons/icon-48x48.png" sizes="48x48" type="image/png" />
<link rel="icon" href="assets/img/favicons/icon-62x62.png" sizes="62x62" type="image/png" />
<link rel="apple-touch-icon-precomposed" href="assets/img/favicons/apple-touch-icon.png" />

ツールではすごく多くのサイズのアイコンが生成されますが、上記のように

  • 16×16
  • 32×32
  • 48×48
  • 62×62
  • apple-touch-icon

の5種類を宣言しておけば大丈夫です。

href=””の部分は、実際に画像を入れた場所に合わせて変更してください。

コードを仕込んだあとに、改めてブラウザで開くとタブ部分にアイコンが表示されていると思います。

miyachi
最初に作るアイコンは512×512サイズで作っておくのがオススメ

SEO対策のために絶対忘れてはならない重要なタグ

title : サイト名を記述

SEO対策で必ず必要になるのがタイトル(title)。
サイトの内容をGoogleなどの検索システムに伝える部分で、検索順位などにも影響する非常に重要なタグです。

<title>みやちサイト制作所 ー 未経験でもWEBサイト制作で稼げるようになるためのweb講座</title>

タイトルタグでは、そのページで重要なキーワードをなるべく先頭に入れつつ、全角で35文字程度で設定するのがオススメ。

なぜ35文字なのかというと、あまり長すぎるタイトルはGoogleなどの検索結果一覧で「…」と省略されてしまうためです。
重要な部分が省略されてしまうと、結局「何のサイトなのか?」を示せないですよね。

miyachi
titleタグは、重要なキーワードを含めつつなるべく簡潔に書こう!

SEO対策などに必要なhead部分のmetaタグは、もれのないようにきっちり設定しよう

miyachi
お疲れさまでした!

これで、必要なmetaタグの設定が終了です。

慣れないうちは、

trouble
量が多くて大変…

と思うかもしれませんが、一度設定してしまえば終わるのでさっさと済ませてしまいましょう!

設定すべきmetaタグは以下の通りです。

  • charset : 文字コードの宣言
  • viewport : スマホ対策
  • IE対策
  • format-detection : 電話番号・住所に関するスマホ対策
  • description : ページのコンテンツについての要約
  • canonical : カノニカルURL(※必要であれば)
  • OGP設定
  • favicon
  • title : サイト名を記述

そして、このあとでCSSやJavaScript(jQuery)の読み込みをします。

miyachi
正しくmetaタグを設定して、SEO対策をしよう

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア