【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をプログラミングスクールで教わりたいという方も中にはいます。

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

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

【最短30秒で完了】侍テラコヤの申し込み手順

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

STEP.1
アカウント作成

まずはアカウント作成を行いましょう!

入力項目は名前、メールアドレス、パスワードの3項目のみです!

GoogleまたはFacebookのアカウントを持っていると入力する手間を省くことができます。

STEP.2
請求情報の入力

あとは請求情報を入力するだけです!

カード番号、有効期限、セキュリティコードの3項目のみです!

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1
相談会予約

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント

相談会はオンライン(Google meet)で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2
相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

  • エンジニアを取り巻く環境
  • 挫折しないための学習の進め方
  • プログラミング言語について
  • 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

  • プログラミング学習に関して
  • 転職・副業・起業について

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント