【SEO的に重要】htmlのmeta要素(metaタグ)とは? 種類・書き方も分かりやすく解説!

meta要素について知りたい人

meta要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

meta要素とは?
meta要素の書き方
metaタグはSEOに効果的なの?
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

meta要素は検索エンジンやブラウザにWebページの情報を伝えるタグです。

具体的にはWebページの概要、文字コード、キーワード、タイトルなどのHTML基本情報を記述していきます。

meta要素はhead要素内に記述します。

タイトル以外、ユーザーの目には触れませんが、SEO的にとても重要な役割を担っています。

そこでこの記事ではmeta要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

meta要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.meta要素とは?

meta要素は、HTML文書の文字コードや概要、キーワードなど、HTML文書におけるさまざまなメタデータを表します。

つまり、meta要素は検索エンジンやブラウザにWebページの情報を伝えるHTMLタグのことです。

meta要素の記述箇所はWebページの「<head>~</head>」に囲われている範囲です。

基本的にユーザーは見ることができませんが、SEOの観点でも重要な役割を担っています。

2.meta要素の書き方

それではmeta要素の書き方をみていきましょう。

文字コードを指定する

<meta charset="文字コード">

文字コードの指定が無い場合、Webページが文字化けしてしまうことがあります。

検索エンジンに適切に収集されないことがあるので、そのような事態を避けるためにも文字コードの指定を忘れないようにしましょう。

日本では、「UTF-8」、「Shift_JIS」、「EUC-JP」の3つがよく使われている文字コードです。

なお、HTMLでは「UTF-8」を使用することが推奨されています。

文書の著作者を記述する

<meta name="author" content="著作者">

上記のように記述することで「このWebページは誰々が作りました」という情報を表すことができます。

例えば、「<meta name=”author” content=”HTML&CSS辞典”>」と記述することで「このWebページはHTML&CSS辞典が作りました」と表すことができます。

文書の説明文を記述する

<meta name="description" content="説明文">

上記のように記述することで「このWebページはこのような内容です」と表すことができます。

この説明文は検索エンジンに読み取られ、検索結果にも表示されます。

説明文は120文字程度で記述するようにしましょう。

直接SEOに関係はしていませんが、ユーザーがクリックするのか左右するので簡潔にまとめるようにしましょう。

文書のキーワードを記述する

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

上記のように記述することで「このWebページのキーワードはこれです」と表すことができます。

content属性の値はカンマで区切り、複数のキーワードを入力できます。

スマートフォン向けの文書表示方法を指定する

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

上記のように「width=device-width」と指定することで、端末の画面幅に合わせてWebページが表示されます。

同時にカンマで区切って「initial-scale=1.0」と記述することで倍率を1で指定しています。

クローラーのアクセスを制御する

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

上記のように記述することで検索エンジンのクローラーによるWebページへのアクセスを制御することができます。

例えば、ユーザーに見せたくないページ、内容が重複しているページなどに使用します。

これはSEOのマイナス評価を受けないようにするためにとても効果的です。

3.metaタグはSEOに効果的なの?

metaタグは、Webページの情報を記載するタグのことです。

SEO対策をするにあたり、metaタグを設定するのが効果的だとよく言われています。

Webサイトにアクセスしてきたユーザーではなく、検索エンジンやブラウザに向けて、Webページの内容を提示することができます。

適切にmetaタグを設定することでユーザー数の増加につながるというメリットもあります。

次にSEO対策に役立つメタタグをご紹介します。

meta description

meta descriptionとはWebサイトの概要を記述する場所です。

以下は当サイトを検索したときに表示される概要文です。

簡潔に概要文を記述することでユーザーが興味を引き、クリックしてくれる可能性が高まります。

検索結果に表示されることを考えると、120文字程度で書くのがよいとされています。

SEOに直接関係ないと言われていますが、簡潔に記述することでユーザーを引くことができるのでmeta descriptionを書くメリットがあります。

title

titleとは検索エンジンとユーザーにWebページの内容を伝えるものです。

titleは30文字程度で書くのがよいとされています。

これはSEOに関係しているのでしっかりとキーワードをいれてSEO対策を行っていきましょう。

charset

charsetとはどの文字コードでWebページを表示するか指定するものです。

文字化けが発生しないように、head要素で設定しておきましょう。

OGP

OGPとはFacebookやTwitterなどのSNSでシェアした際に、Webページのタイトルやイメージ画像、詳細などを伝えるための要素です。

OGPを適切に設定することで、どのようなページで何を伝えたいのかが明確になります。

そうすることでより多くの人に記事を見てもらうことが可能になります。

メタタグは、検索エンジンに必要な指示をだせる有効な手段です。

SEOについてもっと詳しく知りたい方は是非「沈黙のWebライティング —Webマーケッターボーンの激闘」をご覧ください。

「沈黙のWebライティング —Webマーケッターボーンの激闘」はWebで「成果を上げる」ための文章の書き方を解説した実用入門書です。

とても為になる本なので是非利用してみてはいかがでしょうか!?

リンク

本だけでなく、優秀なライターさんから学びたいという方は「Writing Hacks(ライティングハックス)」がオススメです!

「Writing Hacks(ライティングハックス)」は質問対応に関してもカリキュラム内のことであれば無制限、無期限に対応可能となっています。

また、他スクールよりも圧倒的に安い価格でのスクール提供ができています。

とても為になるスクールなので是非「Writing Hacks(ライティングハックス)」を利用してみてはいかがでしょうか!?

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント