検索結果に表示!HTMLでmetaタグを使う方法【初心者向け】

初心者向けにHTMLでmetaタグを使う方法について解説しています。titleやdescription、keywordなどページの表面上には出ませんが、SEO対策においても重要なタグなので、しっかりと書き方を理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLでmetaタグを使う方法について解説しています。

Webページを作る上では目に見えない部分ですが、どのサイトでも設定されているものなので、書き方を覚えておきましょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

metaタグとは

metaタグは、そのサイトに関する様々な情報を指定するためのタグです。

WebサイトのSEO対策をする上でも重要なタグになるので、Web担当者の方などはプログラムを書く仕事でなくても知っておいて損はないでしょう。

以下は、本サイトTechAcademyマガジンの検索結果に表示されるタイトルとディスクリプションですが、後に紹介するmetaタグなどで設定されています。

 

metaの書き方

metaタグはheadタグの間に記述します。例外もありますが、基本的には次のように記述します。

<meta name="メタデータ名" content="メタデータ" />

metaタグでよく使うものの一例を紹介します。

 

charset

charsetは、文字コードを指定する時に使用します。

<meta charset="utf-8" />

 

description

descriptionは、そのサイトの内容の要約を記述します。

<meta name="description" content="このサイトはHTMLについて紹介しているとてもいいサイトです。" />

 

keywords

keywordsは、そのサイトがどのようなサイトかをキーワードで指し示すのに使います。複数指定する場合は、コンマで区切ります。

<meta name="keywords" content="HTML,CSS,Javascript,プログラミング" />

 

author

authorは、そのサイトの作成者の名前を記述します。
<meta name="author" content="ジョン" />

 

content-language

content-languageは、そのサイトがどの言語で書かれているかを記載します。

<meta http-equiv="content-language" content="ja" />

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。「meta.html」というファイルを作成して、以下を記述します。

meta.html
--------------------------------------------------------
<html>
  <head>
    <title>わたしのホームページ</title>
    <meta charset="utf-8" />
    <meta name="description" content="このサイトはHTMLについて紹介しているとてもいいサイトです。" />
    <meta name="keywords" content="HTML,CSS,Javascript,プログラミング" />
    <meta name="author" content="ジョン" />
    <meta http-equiv="content-language" content="ja" /> 
  </head>
  <body>
    <h1>私のホームページへようこそ</h1>
  </body>
</html>
--------------------------------------------------------

ブラウザで開いてみます。

metaタグの情報は表示されませんが、検索エンジンなどで解析するときにはきちんと読まれます。

 

まとめ

metaタグはSEO対策には必ず使われます。どのような情報が格納できるかを知っておくことと良いでしょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。