リファレンス

<meta>要素の使い方・サンプルコード

Sara

<meta>

<meta>要素は、HTML 文書に関する情報であるメタデータを記述するために使用します。

<head>要素内に記述します。

属性

charset

HTML 文書の文字コードを指定します。UTF-8 を指定するのが一般的です。

<meta charset="UTF-8">

content

http-equiv 属性や name 属性に関連する値を指定します。

http-equiv

リダイレクトやデフォルトのスタイルシートなどを content 属性と合わせて指定します。

content-security-policyページのコンテンツポリシーを定義します。
refreshページをリロードするまでの秒数や、リダイレクト先のURLを指定します。

* content-language, content-type, set-cookie は非推奨・廃止になっています。

以下のサンプルでは、3秒後に http://example.com にリダイレクトしています。

<meta http-equiv="refresh" content="3; url=http://example.com">

name

name 属性でメタデータ名を定義して、content 属性で内容を指定します。

* charset 属性, http-equiv 属性, itemprop 属性(グローバル属性)のいずれかを設定している場合は使用できません。

<meta name="メタデータ名" content="内容を指定">
namecontent
application-nameアプリケーションの名前
authorHTML 文書の作者名
descriptionHTML 文書についての説明文や概要
generatorソフトウェアの識別名
keywordsHTML 文書の内容に関するキーワード
theme-color推奨される色
color-scheme色の系統normal, light, dark, only light
creatorHTML 文書の制作者
googlebotGoogle の検索クローラーに関する指定
publisherHTML 文書の発行者
robots検索エンジンのクローラーに関する指定index, noindex, follow, nofollow, none, noodp, noarchive, nosnippet, noimageindex, nocache *1
slurpYahoo の検索クローラーに関する指定
viewportモバイル端末のサイズに関する指定width, height, initial-scale, maximum-scale, minimum-scale, user-scalable *2

*1 name=”robots” にした場合の content 属性値

<meta name="robots" content="content属性値">

複数の値を指定する場合は ,(カンマ)で区切ります。

content属性値対応検索エンジン
GoogleYahooBing
indexインデックスを許可(規定値)
noindexインデックスを許可しない
followリンクの追跡を許可(規定値)
nofollowリンクの追跡を許可しない
nonenoindex, nofollow と同じ
noarchiveコンテンツのキャッシュを許可しない
nosnippet検索結果に説明を表示させない
noimageindex画像の参照元としてページを表示しない
nocachenoarchive と同じ
noodpOpen Directory Project の説明文を使用しない

*2 name=”viewport” にした場合の content 属性値

<meta name="viewport" content="content内容=値">

複数指定する場合は ,(カンマ)で区切ります。

content内容
widthビューポートの幅のピクセル値、または、device-width を指定します。
例)content=”width=device-width”
heightビューポートの高さのピクセル値、または、device-height を指定します。
initial-scaleデバイスの幅とビューポートとの比率を 0.0 から 10.0 までの数値で指定します。
maximum-scaleズームの最大値を 0.0 から 10.0 までの数値で指定します。
minimum-scaleズームの最小値を 0.0 から 10.0 までの数値で指定します。
user-scalableユーザーがページをズームできるようにするかをyes か no で指定します。既定値は yes です。

グローバル属性

全ての HTML 要素に共通して使用できるグローバル属性はこちら

使用例

例① 検索エンジンにインデックスさせないようにする

<meta name="robots" content="noindex, nofollow">

例② HTML 文書の説明文を指定する

Google 検索などの検索結果に表示される説明文を指定します。

<meta name="description" content="ここに説明文を書きます">

例③ HTML 文書のキーワードを指定する

HTML文書の内容をキーワードで指定します。複数のキーワードを指定するときは ,(半角カンマ)で区切ります。

<meta name="keywords" content="HTML,CSS,PHP">

例④ スマートフォンに対応させる指定

<meta name="viewport" content="width=device-width,initial-scale=1">

例⑤ ページをリダイレクトさせる

3秒後に http://example.com にリダイレクトさせる例です。

<meta http-equiv="refresh" content="3; url=http://example.com">

上記のコードをまとめる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="robots" content="noindex, nofollow">
  <meta name="description" content="ここに説明文を書きます">
  <meta name="keywords" content="HTML,CSS,PHP">
  <meta http-equiv="refresh" content="3" url="http://example.com">
  <title>タイトル</title>
</head>
<body>
</body>
</html>

対応ブラウザ

関連するタグ

HTML タグ一覧はこちら

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました