検索結果に表示！HTMLでmetaタグを使う方法【初心者向け】
初心者向けにHTMLでmetaタグを使う方法について解説しています。titleやdescription、keywordなどページの表面上には出ませんが、SEO対策においても重要なタグなので、しっかりと書き方を理解しておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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
<meta name="author" content="ジョン" />
content-language
content-languageは、そのサイトがどの言語で書かれているかを記載します。
<meta http-equiv="content-language" content="ja" />
実際に書いてみよう
それでは実際に書いてみましょう。「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では初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。
独学に限界を感じている場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
