HTML5 - 主要なmetaタグ一覧 (メタデータ・コンテンツタグ)
HTMLのメタタグについて解説する。ここではよく使われるまたは使った方がよいmetaタグのみ記述しているので、そこまで使われないニッチなmetaタグは省いているぞ。
当サイトの実際のこのページのmetaタグ
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML5のメタタグについて、サイト制作に使えるmetaタグを解説します。">
<meta name="keywords" content="HTML5 メタタグ, HTML5 metaタグ">
<meta name="author" content="Yiガオ">
<meta name="date" content="2024/09/09">
<meta property="og:title" content="HTML5 - 「メタデータ・コンテンツ」タグ - metaタグの一覧">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yigao.jp/website/html5/basic/4/">
<meta property="og:image" content="https://yigao.jp/images-og/website/html5/html-basic.jpg">
<meta property="og:site_name" content="IT知識の秘伝書">
<meta property="og:description" content="HTML5のメタタグについて、サイト制作に使えるmetaタグを解説します。">
<meta property="og:locale" content="ja_JP">
<link rel="canonical" href="https://yigao.jp/website/html5/basic/4/">
<link rel="icon" href="/images-base/favicon//favicon32.ico?ver=1.1" sizes="32x32" type="image/x-icon">
<link rel="icon" href="/images-base/favicon/favicon16.ico?ver=1.1" sizes="16x16" type="image/x-icon">
<link rel="icon" href="/images-base/favicon/android-chrome-192x192.png?ver=1.1" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="/images-base/favicon/apple-touch-icon.png?ver=1.1" sizes="180x180" type="image/png">
<link rel="stylesheet" href="/css/destyle.min.css" type="text/css">
<link rel="stylesheet" href="/css/fonts.min.css?v=200" type="text/css">
<link rel="stylesheet" href="/lib/slick.min.css?v=100" type="text/css">
<link rel="stylesheet" href="/lib/slick-theme.min.css" type="text/css">
<link rel="stylesheet" href="/js/myplugin/texthighlightdesigner/texthighlightdesigner.css" type="text/css">
<link rel="stylesheet" href="/js/myplugin/ImagePopViewer/imagepopviewer.css" type="text/css">
<link rel="stylesheet" href="/js/myplugin/tooltip/tooltip.css?v=10" type="text/css">
<link rel="stylesheet" href="/css/style.css?v=124" type="text/css">
<script src="/lib/jquery-3.7.1.min.js" defer></script>
<script src="/js/common_script-nav.min.js?v=109" defer></script>
<script src="/lib/slick.min.js" defer></script>
<script src="/js/myplugin/texthighlightdesigner/texthighlightdesigner.js?v=10" defer></script>
<script src="/js/top_script-ajax.js?v=100" defer></script>
<script src="/js/common_script-side.js?v=100" defer></script>
<script src="/js/page-script.js?v=10" defer></script>
<title>HTML5 - 「メタデータ・コンテンツ」タグ - metaタグの一覧</title>
</head>
量が多くて面食らうかもしれないが大丈夫。一つ一つ解説する。必要な個所を修正して使ってくれ。
metaタグ一覧
文字コード指定
文字コードは特別な理由がない限りutf-8でよいだろう。
<meta charset="utf-8">
言語指定
文字コードは特別な理由がない限りja(日本語)でよいだろう。
<meta http-equiv="content-language" content="ja">
ビューポート
特別な理由がない限りそのまま使うとよい。このタグはブラウザの表示サイズに影響するようだ。例えばinitial-scaleを0.5とすると本来の画面サイズより疑似的に2倍の表示領域で描画されるので、コンテンツの表示がとても小さくなるのだ。また、1以外を指定すると予期せぬバグが起こる可能性があるので、値は変えない事をお勧めする。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ページの説明
作成した記事やサイトまたはそのページが何なのかを説明をする。検索で君達のサイトがヒットしたら、このdescriptionの説明が表示される可能性がある。
<meta name="description" content="ここにそのページの説明を記載">
キーワード
検索にヒットさせたいキーワードを記述するが、最近の検索エンジンはこれを無視する動きがあるらしい。しかし、検索のアルゴリズムはいつ変わるのか分らない為、あった方が絶対によい。
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">
著者または作成者
記事を書いた人の名前やサイトの管理者の名前を記述する。自分のSNSのペンネームでもよいかも。
<meta name="author" content="著者名">
日付
作成日時または記事執筆日時を記述する。更新日のmetaタグもあるが、当サイトでは割愛する。
<meta name="date" content="yyyy-mm-dd">
タイトル
サイトや記事のタイトルを記述。これはメタタグに入るのだろうか。とりあえず絶対に必要なタグなので忘れずに記述する事。
<title>サイトや記事のタイトル</title>
metaタグのリンクタグ 一覧
サイトのアイコンを指定
サイトのアイコンのURLを記述する。iOSやAndroidに対応させたいなら下記も参照してくれ。
<link rel="icon" href="32pxのアイコンURL" sizes="32x32" type="image/x-icon">
<link rel="icon" href="16pxのアイコンURL" sizes="16x16" type="image/x-icon">
<link rel="icon" href="Android対応のアイコンのURL、ファイル名はandroid-chrome-192x192.png" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="iOS対応のアイコンのURL、ファイル名はapple-touch-icon.png" sizes="180x180" type="image/png">
canonical(カノニカル)でURL明示
これは非常に重要なタグなので、必ずルールを決めて記述するように。例えばサイトにアクセスする場合
・http://www.yigao.jp
・http://www.yigao.jp/
・https://www.yigao.jp
・https://www.yigao.jp/
・http://yigao.jp
・http://yigao.jp/
・https://yigao.jp
・https://yigao.jp/
と何種類もあるが、検索エンジンの評価が上記の場合は8つに分かれてしまう。これを阻止する為に明示的に一番重要なページのURLはcanonicalで指定したこのURLだと示す事ができる。
<link rel="canonical" href="URL">
CSSのリンク
CSSファイルの読み込み方法だ。
<link rel="stylesheet" href="URL" type="text/css">
metaタグのスクリプトタグ
JavaScriptファイルの読み込み方法だ。
<script src="URL"></script>
OGPのタグ一覧
OGPはSNS、例えばXやfacebook、またはLINEなど作成したページのURLを投稿するだけで、OGPのタグで記述した情報が形成されて他の人に注意を引く事ができる最近では無くてはならないタグだ。基本的に上のmetaタグと同じ情報を記述したらOK。
og:title - タイトルタグ
SNSで表示するタイトル。
<meta property="og:title" content="タイトル">
og:type - ページのタイプ
下記のいずれかを指定する。
website ： サイトのページ
article ： ブログやニュースの記事
profile ： プロフィール
book ： 書籍関係
music ： 音楽関係
video ： 動画関係
<meta property="og:type" content="website">
og:url - ページのURLタグ
上のcanonical(カノニカル)で指定したURLが望ましい。
<meta property="og:url" content="URL">
og:image - ページ画像のタグ
最も重要だ。横が1200pxと縦が630pxの画像を用意してサーバに配置し、そのURLを記述する。画像の作成がとても難儀だが、SNSでリンクを貼るとこのタグが正しく機能した場合に指定した画像がSNSで表示され、それをクリックするとそのページのURLへ飛ぶ。視覚効果は絶大だ。
<meta property="og:image" content="画像URL">
og:site_name - サイト名のタグ
サイト名を記述。ページタイトルではなくサイト名だ。
<meta property="og:site_name" content="サイト名">
og:description - ページの説明
上にあるページ説明と同じものを記述したらOK。
<meta property="og:description" content="サイトやページの説明を記述">
og:locale - 地域と言語
日本語を使っているならそのまま下記を記述でOK。
<meta property="og:locale" content="ja_JP">