HTMLの基本を解説するうえで、絶対に欠かせないHTMLメタタグ（meta）。
というのも、メタタグは、うまく活用すればサイトのSEO効果を上げることができるからです。
この記事では、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 name="description" content="説明文の内容"/>
例）
<meta name="description" content="日本のゲームが海外で需要が高く、ベストセラーに選ばれるのには、それなりの理由があるはず。 その理由を見つけ出すために、今回、ウェブトレ＋広報部では海外のゲーマーから独自の聞き取り調査やリサーチを行いました。"/>
以上のように、meta descriptionに書いたメタタグが以下のように表示されます。
説明文の文字数は、何文字でも構いませんが、Google検索結果に表示されるのはおよそ120字までとなっています。
読者が記事の概要を一目で分るようにするための説明文なので、なるべく120字以内で要点をまとめるようにしましょう。
また、説明文は、SEO上最低110文字は必要とされています。説明文に使われている言葉がいかに惹き付け効果があるかによっても、クリック数は変わってきます。そのため、meta descriptionはタイトルの次に重要な部分であると言えるでしょう。
HTML メタタグでできること
【スマートフォン用に記事の表示方法を設定する】
スマートフォンの記事が、各端末にてどのように表示されるかを指定する場合は、を使用し、内容をcontent=でそれぞれ指定できるようになっています。
<meta name="viewport" content="content属性=役割">
例）各端末のスクリーン幅に合わせて表示させる場合
<meta name="viewport" content="width=device-width">
例）各端末のスクリーンの高さに合わせて表示させる場合
<meta name="viewport" content="height=device-height">
【アドレスを変更したウェブサイトへのリダイレクト】
ドメインの期限切れなどで、新しいアドレスにウェブサイトを変更しなくてはならない場合に、便利なのが「リダイレクト」機能。旧ウェブサイトを開いた読者が、自動的に新しいウェブサイトへ移動できるようにリダイレクトする機能です。
<meta http-equiv="refresh" content="秒数; URL=新ウェブサイトのアドレス">
例）旧ウェブサイトを開いてから15秒で新ウェブサイトへリダイレクトさせる場合
<meta http-equiv="refresh" content="15; URL=新ウェブサイトのアドレス">
HTML メタタグを確認するには？
HTMLメタタグは、ウェブサイト上には表示されませんが、ビューワーは、インターネット上で公開されているすべてのウェブサイトのメタタグを確認することが可能です。
他のプログラマーがどのようなメタタグを書いているのか、勉強になるので参考にしてみましょう。
方法は、
1.ウェブサイト上で（どこでも良い）右クリック。
2.「ページのソースを表示」をクリック。
これを実行することで、HTMLソースを見ることが可能です。
そのソース内のの中に何が書いてあるのかを見てみましょう。
HTML メタタグを活用しよう！
今回は、HTMLの基本メタタグについて初心者向けに簡単に紹介しました。
メタタグは、HTMLで構築したウェブサイトをSEO施策するためのベーシックツールです。
最初はmeta descriptionやkeywordsだけでも、十分にSEO効果が期待できますが、慣れてきたら、meta属性をたくさん覚えて、大いに活用してみましょう！
