メタタグ(metaタグ)とは？
メタタグ（metaタグ） とは、HTMLのタグ内に記述する情報で、ウェブサイトの設定や内容を検索エンジンやブラウザに伝えるためのタグのことです。
通常のユーザーがブラウザで見ることはほとんどありませんが、検索結果の表示形式やページの動作、
SNSでシェアする際の見え方などに大きく影響します。
メタタグ(metaタグ)はSEOに有効か
例えば、HTMLのタグ内にmetaタグを正しく設定できれば、ページの内容を検索エンジンにわかりやすく伝えることができます。
こうすることで、クローラーがコンテンツの情報を正確に理解し、Googleからの評価も受けやす
くなります。その結果、インデックスされやすくなったり、検索順位が上がってユーザーからの
流入が増えるなど、SEOに良い影響が期待できるというわけです。
逆に、metaタグを設定しなかったり、誤字脱字などで不適切な設定になっている場合、クローラーは
内容をうまく読み取れません。そうなってしまうと、ページが適切に評価されにくくなり、自ずと検索
順位や流入数にも影響を与えてしまう結果となってしまいます。
メタタグ(metaタグ)の設定方法
metaタグの設定には、大きく分けて
- HTMLに直接書く方法
- WordPressなどでプラグインを使う方法
があります。
コードに慣れている方はheadタグ内に書くのが一番簡単ですが、コーディングやサイト運営に慣れていない場合は、専用のプラグインで管理するとミスが少なく安心です。
それぞれの特徴と設定の流れをわかりやすく紹介していきます。
HTMLのhead内に設置
HTMLでWEBサイトを制作している場合、もっとも基本的な方法がこのやり方です。
ページの headの中に、必要なmetaタグを直接書き込みます。
例えば、説明文を設定したい場合は次のように記述します。
<head> <meta name="description" content="ここにページの説明文を入れます"></head>WordPressプラグインで設置
WordPress構築をしている場合は、直接コードを触らなくてもmetaタグを設定できます。
今回は私も普段、クライアント様サイトでも使用しているSEO系プラグイン「All in One SEO」をご紹介しましょう。
「All in One SEO」をインストールすれば、管理画面の専用欄に文章を入力するだけで自動的にheadにタグを挿入してくれます。
他のプラグインでは、管理画面が英語で分かりづらかったりするものなんですが、「All in One SEO」は海外製ではあるものの日本語対応されているので、バッチリです。
メタタグ(metaタグ)はSEOに有効か
SEOに影響が大きいメタタグは以下になります。
メタタグ(metaタグ)一覧
他にもいくつかあるんですが、必須項目としてはこれくらいで十分かと思います。
それでは一つずつ解説していきます。
文字コード（charset属性）
<head> <meta charset="utf-8"></head>Webページの文字コード（文字の保存形式）をブラウザに伝えるためのタグです。
Webページでは、同じ文字でも文字コードが合っていないと「文字化け」が発生してしまいます。
特に日本語サイトでは、UTF-8で統一することでどの端末・ブラウザでも安定して正しく表示されるようになります。
互換性指定（http-equiv属性）
<head><meta http-equiv="X-UA-Compatible" content="IE=edge"></head>Webページの文字コード（文字の保存形式）をブラウザに伝えるためのタグです。
Webページでは、同じ文字でも文字コードが合っていないと「文字化け」が発生してしまいます。
特に日本語サイトでは、UTF-8で統一することでどの端末・ブラウザでも安定して正しく表示される
ようになります。
viewport（ビューポート）
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>スマートフォンやタブレットなど、画面のサイズが異なるデバイスでページをどのように表示するかを指定するためのタグです。モバイルSEOでも非常に重要なタグの1つです。
title（タイトル）
<head><title>サイトのタイトル</title></head>ページのタイトルを検索エンジンやブラウザに伝えるための最重要タグです。
検索結果のクリックできる青いリンク部分（タイトル）として表示されるため、SEOにも大きな影響を与えます。
description（ディスクリプション）
<head><meta name="description" content="説明文"></head>ページの内容を短く要約して検索エンジンに伝えるための最重要タグです。
検索結果のスニペット（タイトルの下に表示される説明文）として利用されることが多いので、クリック率にも大きく関わる重要な要素です。
favicon（ファビコン）
<head><link rel="icon" href="/favicon.ico"></head>ブラウザのタブやブックマーク、検索結果の横などに表示される「サイトの小さなアイコン」を設定するためのタグです。ちなみに画像形式は.ico が一般的ですが、PNG形式やSVG形式を指定することもできます。ブランドの統一感を出すためにも、必ず設定しておきたい項目です。
apple-touch-icon（スマホ用アイコン）
<head><link rel="apple-touch-icon" href="/apple-touch-icon.png"></head>iPhoneやiPadで、Webサイトをホーム画面に追加した時に表示されるアイコンを指定するタグです。
アイコン画像がぼやけないよう、専用の高解像度アイコンを用意しておくと良いですね。一般的には180×180pxのPNG形式が推奨されます。
LINEやInstagramのアプリのアイコンありますよね。それです！
OGP（SNSでの表示を整えるタグ）
<head><meta property="og:title" content="ページのタイトル"><meta property="og:description" content="ページ内容の説明"><meta property="og:image" content="サムネイル画像URL"><meta property="og:url" content="ページURL"><meta property="og:site_name" content="サイト名"><meta property="og:locale" content="ja_JP"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"></head>OGP（Open Graph Protocol）は、SNSでページURLをシェアした時に表示されるタイトル・説明文・画像などを正しく伝えるためのタグです。
X（旧Twitter）、Facebook、LINEなどでリンクを貼った時の「サムネイル付きカード表示」の見え方はこのOGPタグをきちんと設定できれば、一目でどんな情報のURLなのか判別できるというわけです。
og:title（ページタイトル）
SNSでシェアされた際に表示されるタイトルです。
基本的にはtitleタグと同じ内容でOKですが、SNS向けに少し短くまとめるとクリックされやすくなります。文字数は大体40字以内には押さえましょう。
og:description（ページ説明）
SNSでシェアされた際に表示される概要文です。
こちらもmeta name=”description”と同じ内容で良いですが、同様にSNS向けに短く要点をまとめると良いかと思います。
og:image（サムネイル画像）
SNSでシェアされた際に表示される画像です。1200×630px程度の画像が好ましいでしょう。
og:url（ページURL）
シェアされるページのURLを指定します。注意するべきなのは、ここのURLは必ず絶対パスで記述する必要があります。（httpsから始まるURL）
og:site_name（サイト名）
シェアされた際に表示されるサイト名を指定します。
og:locale（ページの言語）
ページの言語を指定します。日本語の場合は ja_JP、英語なら en_US などですが、日本に住んでいれば基本的にja_JPでOKです。
og:type（ページ種類）
ページの種類を指定します。代表的な種類としては、
・website：サイトのトップページ
・blog：ブログトップ
・article：記事ページやコンテンツページ
twitter:card（Twitterカードの種類）
Twitterでのカード表示形式を指定します。
一般的な記事やページは summary_large_image が推奨です。
主な種類としては
・summary：一般的なカード（タイトル・説明・画像）
・summary_large_image：画像が大きく表示されるカード
・app：アプリ用カード（アプリ名・アイコンなど表示）
・player：動画や音声コンテンツ用
があります。
robots（インデックスしないように）
<head><meta name="robots" content="noindex, nofollow"></head>メタタグのcontent属性の値を変更することで、検索エンジンの挙動を制御できます。noindexはページをインデックスさせない設定、nofollowはページ内のリンクをたどらせない設定を指しています。index,followはデフォルトでインデックスさせリンクも追跡させる設定です。
All in One SEOでmetaタグを簡単設置
ウェブサイトのSEO対策は重要だけど、「コードを書くのはちょっと不安…」という方も多いはず。
そんなときに便利なのが、WordPress用のSEOプラグインAll in One SEO（AIOSEO） です。
このプラグインを使えば、metaタグの設置はもちろん、タイトルやディスクリプションの最適化、OGP設定、XMLサイトマップの生成まで、すべてノーコードで管理できます。
もちろん、細かい調整も可能なので、プロ仕様のSEO対策も実現できます。私自身もAll in One SEOを使うことで、効率よくSEOを整えながら、本来のコンテンツ制作に集中できています。
詳しく、All in One SEOでできることを分かりやすくまとめてくれているページがあります。
設定方法や各機能の活用例も載っているので、気になる方はこちらをチェックしてみてください。
All in One SEOの設定と使い方を6ステップで解説
まとめ
以上がメタタグのSEO対策で必須のmetaタグの種類と設定方法でした！
逆に、基礎がわからないままだと、属性値の設定ミスや必要なタグの漏れなど、ちょっとした間違いが起こりやすくなります。そうなると、検索エンジンのクローラーがページの内容をうまく理解できず、せっかく作ったサイトが正しく評価されないことも…。
せっかく時間をかけて作ったあなたのサイトが、しっかり伝わり、ちゃんと評価されるように。だからこそ、メタタグの基本はきちんと押さえて、適切に設置していきましょう！