HTMLの基本を解説するうえで、絶対に欠かせないHTMLメタタグ(meta)。
というのも、メタタグは、うまく活用すればサイトのSEO効果を上げることができるからです。
この記事では、HTML初心者のために、HTML メタタグの基本中を一つひとつ丁寧にご紹介します!

ウェブトレの人
ジニオくんHTMLのメタタグって知ってる??

ジニ男
メタタグ、、、なんか強そうですね。

ウェブトレの人
んー、きっとメタルっぽいってことかな?
そんなジニオくんには是非今回の記事を読んでいただきたい。


HTMLのメタタグとは?

HTMLのメタタグとは?

メタタグとは、HTMLに使用されているタグのひとつで、主に、「meta description(メタディスクリプション)」や「keywords(メタキーワード)」として使用されています。
これらをGoogleなどの検索アルゴリズムに合わせて書くことで、SEO施策の効果が期待されています。
メタタグは、Googleのほかにも、ブラウザや、SNSなど、システムに向けて書くものであるため、基本的にはウェブサイトにはメタタグの内用は表示されません。

meta descriptionと?は

メタディスクリプションとは、HTMLメタタグのひとつで、ウェブサイトの冒頭部分に記載する「説明文」のことです。この説明文は、Google検索の結果ページにて、各ウェブサイトの記事の概要として表示されます。

Meta keywordsとは?

メタキーワードとは、ウェブサイトの重要キーワードを検索アルゴリズムに知らせるための、システム上のキーワードです。
ウェブサイトや記事の内容において、重要だと思われるキーワードを3つ程設定しましょう。
現在の検索アルゴリズムにおいては、キーワードはさほど重要視されていないとの情報もありますが、念のため設定しておくことをおすすめします。

HTML メタタグの基本的な使い方

メタタグの基本的な使い方
HTMLメタタグは基本的にはhead内に書きます。Head内とは、HTMLの一番冒頭部分でビューワーには見えない部分です。

【Meta descriptionを書く場合】


例)


以上のように、meta descriptionに書いたメタタグが以下のように表示されます。

説明文の文字数は、何文字でも構いませんが、Google検索結果に表示されるのはおよそ120字までとなっています。
読者が記事の概要を一目で分るようにするための説明文なので、なるべく120字以内で要点をまとめるようにしましょう。

また、説明文は、SEO上最低110文字は必要とされています。説明文に使われている言葉がいかに惹き付け効果があるかによっても、クリック数は変わってきます。そのため、meta descriptionはタイトルの次に重要な部分であると言えるでしょう。

HTML メタタグでできること

【スマートフォン用に記事の表示方法を設定する】
スマートフォンの記事が、各端末にてどのように表示されるかを指定する場合は、を使用し、内容をcontent=でそれぞれ指定できるようになっています。


例)各端末のスクリーン幅に合わせて表示させる場合


例)各端末のスクリーンの高さに合わせて表示させる場合


【アドレスを変更したウェブサイトへのリダイレクト】
ドメインの期限切れなどで、新しいアドレスにウェブサイトを変更しなくてはならない場合に、便利なのが「リダイレクト」機能。旧ウェブサイトを開いた読者が、自動的に新しいウェブサイトへ移動できるようにリダイレクトする機能です。


例)旧ウェブサイトを開いてから15秒で新ウェブサイトへリダイレクトさせる場合

HTML メタタグを確認するには?

メタタグを確認するには?
HTMLメタタグは、ウェブサイト上には表示されませんが、ビューワーは、インターネット上で公開されているすべてのウェブサイトのメタタグを確認することが可能です。
他のプログラマーがどのようなメタタグを書いているのか、勉強になるので参考にしてみましょう。

方法は、
1.ウェブサイト上で(どこでも良い)右クリック。
2.「ページのソースを表示」をクリック。

これを実行することで、HTMLソースを見ることが可能です。
そのソース内のの中に何が書いてあるのかを見てみましょう。

HTML メタタグを活用しよう!

今回は、HTMLの基本メタタグについて初心者向けに簡単に紹介しました。
メタタグは、HTMLで構築したウェブサイトをSEO施策するためのベーシックツールです。
最初はmeta descriptionやkeywordsだけでも、十分にSEO効果が期待できますが、慣れてきたら、meta属性をたくさん覚えて、大いに活用してみましょう!

プログラミングスキル習得を目指す方必見!!

挫折者が多いプログラミング学習。
最適な環境、最適な手順、最適な学習方法で学ぶことで、
スキル習得まで最短で到達することが可能に!


LINE@追加キャンペーン

LINE@追加で、プログラミング学習の攻略本をプレゼント!

おすすめの記事