metaタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

目次

metaタグとは

metaタグ(メタタグ)とは、Web サイトの情報を記述するHTMLタグです。

metaタグには様々な情報が載せられます。Webサイトのテーマやタイトル、どのような内容が掲載されているのかといった情報を記載し、検索エンジンやブラウザに伝えます。これらの特性からSEOにおいて必須知識となります。

metaタグはHTMLのヘッダー情報にあたる<head>~</head>要素内に記載するため、Webサイトを閲覧中のユーザーには見えません。

metaタグの役割

アクセス前のユーザーに伝える

metaタグにはページのタイトル(titleタグ)や、ページの概要を記述するタグ(descriptionタグ)があります。これらのタグで記述したテキストは、検索結果画面やSNSのシェア情報として表示され、アクセス前のユーザーにWebサイトの情報を一目で伝える役割を果たします。

ユーザーは自分が求めている情報があるコンテンツかどうかを、ページのタイトルや概要を見て判断するため、metaタグの設定はアクセス数に直結する重要な要素です。

検索エンジンに伝える

metaタグの中には、検索エンジンに向けたタグがあります。

Webサイトはサーバーに設置しておくと自動的に検索エンジンが巡回にやって来て、検索結果に表示されるようになります。そこで、巡回に来てほしくないページや、検索結果に載せたくないページがある場合、「巡回拒否」(nofollow)や、「検索結果に表示させない」(noindex)といった旨を検索エンジンに伝えるmetaタグがあります。これらのタグは主にSEO評価の低下を防ぎ、自サイトを守るために用いられます。

ブラウザに伝える

metaタグにはブラウザがページを表示させるために必要な情報を記載するタグがあります。CSSやフォントなどの外部ファイル読み込み、デバイスに応じた画面の幅(viewport)、文字化け対策(charset)などを設定できます。これらのタグはWebサイトを正しく表示させるために必須のタグです。SEO対策ではほぼ触る必要のない部分ですが、順番が変わるだけでWebサイトが正しく動作しなくなるなど、修正する際は注意が必要です。

SEO対策に重要なmetaタグ

metaタグには様々な種類がありますが、ここではSEO上、必須とも言えるmetaタグを紹介していきます。

title(タイトル)タグ

titleタグはページのタイトルを設定するタグです。検索結果画面に大きく表示される内容ですので、必ず設定しておきましょう。30文字程度が推奨されます。

設定する際はheadタグ内に以下のように記述します。

<title>ここにページのタイトルを記述 </title>

meta description(メタ ディスクリプション)

descriptionタグはWebサイトの内容を100~120文字程度で要約した文章を記述します。検索結果画面にページの概要として表示されます。文字数が長すぎると、表示しきれない部分は省略されますので、文章の前半(50文字目程度)に大事なキーワードを織り込むようにしましょう。

設定する際はheadタグ内に以下のように記述します。

<meta name=”description” content=”ここにメタディスクリプションを記述”>

文字コード

metaタグのcharset属性で、HTML文書をどの文字コードでエンコードするかを指定します。文字コードが合っていないと文字化けします。日本語の場合「utf-8」、「shift_JIS」、「euc-jp」が使用されるケースが多いですが、基本的にはutf-8で良いでしょう。utf-8は世界中のほとんどの言語をサポートしています。

設定する際はheadタグ内の上の方に以下のように記述します。

<meta charset=”utf-8”>

viewport タグ

viewportタグはPCやモバイルデバイスの画面サイズを最適化させるための設定で、レスポンシブデザインには必須のタグです。

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

noindex/nofollow

noindexタグを設定したページは検索エンジンにインデックスされず、SEO評価の対象外となります。サンクスページやエラーページ、コンテンツの質が低いページに設定し、サイトの評価が下がらないようします。

nofollowタグは、ページ内に設置した外部リンクをクロールさせないように検索エンジンに要求します。リンク一つ一つ個別にnofollowを設定することも可能ですが、metaタグにnofollowを設定すると、ページ内のすべてのリンクに対してnofollowが適用されます。

設定する際はheadタグ内に以下のように記述します。

<meta name=”robots” content=”noindex,nofollow”>

まとめ

metaタグはユーザーとしてWebサイトを閲覧しているだけだと、全く意識することは無いと思います。SEOやWebマーケティングにおいて、metaタグを最適化することで、クリック率向上や、検索結果上位表示の材料になるため、適切に設定するようにしましょう。

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

肩書:Webエンジニア兼Webライター
名前:さのくん
経歴:大学在学中にオペレーションズリサーチ分野を学ぶ過程でプログラミングを習得。
その後は不動産業界に従事しつつ、サイドビジネスとしてWebエンジニアを兼業。フロントエンド開発を得意とする。
Webライティング歴:1年超で執筆数は累計30記事を超える
使用言語:C言語, HTML/CSS/Sass, Javascript, Typescript, PHP, Shopify(Liquid HTML)

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次