2026.10.02
- HTML
HTML metaタグ一覧｜SEO・OGP・viewportのコピペ用テンプレート
metaタグとは、HTMLの <head> 内に書く「ページについての情報（メタデータ）」で、ブラウザ・検索エンジン・SNSにページの文字コードや説明文、表示方法を伝えるタグです。 画面には表示されませんが、検索結果の説明文、スマートフォンでの表示倍率、SNSでシェアされたときのカード表示などを左右します。
この記事では、よく使う meta タグと関連する link タグを1つの一覧表にまとめ、「必須／推奨／状況により／不要」を Google 検索セントラルの記載をもとに判定しました。そのうえで、そのまま貼れる head の完成テンプレート、robots の値一覧、OGP と X（旧Twitter）用タグの書き方を紹介します。さらに、作ったテンプレートを Python 3.11 の標準ライブラリだけで解析し、必須タグの有無や間違いを自動チェックしたスクリプトと実行結果も載せています。
metaタグの早見表（必須・推奨・不要の判定つき）
| タグ | 書き方の例 | 判定 | 役割と根拠 |
|---|---|---|---|
| charset | <meta charset="utf-8"> |
必須 | 文字コードの宣言。HTML仕様で先頭1024バイト以内に置く |
| viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> |
必須 | スマホでの表示幅。Google のサポート対象 meta |
| title（要素） | <title>ページ名｜サイト名</title> |
必須 | 検索結果のタイトルリンクの主な元。ページごとに固有に |
| description | <meta name="description" content="…"> |
推奨 | 検索結果のスニペットに使われることがある。ページごとに固有に |
| canonical（link） | <link rel="canonical" href="https://…/"> |
推奨 | 重複URLの正規版を示す。絶対URLで |
| robots | <meta name="robots" content="noindex"> |
状況により | インデックスや表示の制御。公開ページには不要（既定は all） |
| googlebot | <meta name="googlebot" content="nosnippet"> |
状況により | Google にだけ指示したいとき |
| alternate / hreflang（link） | <link rel="alternate" hreflang="en" href="…"> |
状況により | 言語・地域違いのページがあるとき |
| og:title / og:type / og:image / og:url | <meta property="og:title" content="…"> |
推奨 | SNSのシェア表示。Open Graph の基本4項目 |
| og:description / og:site_name / og:locale | <meta property="og:description" content="…"> |
推奨 | カードの説明文・サイト名・言語 |
| og:image:width / height / alt | <meta property="og:image:width" content="1200"> |
推奨 | 画像サイズの事前通知と代替テキスト |
| twitter:card | <meta name="twitter:card" content="summary_large_image"> |
推奨 | X のカード種類。タイトル等は OGP で代用される |
| twitter:site / twitter:creator | <meta name="twitter:site" content="@アカウント"> |
状況により | サイト・作者のアカウント |
| theme-color | <meta name="theme-color" content="#ffffff"> |
状況により | ブラウザUIの色。media で明暗を出し分け可 |
| color-scheme | <meta name="color-scheme" content="light dark"> |
状況により | フォーム部品などの既定色を明暗に対応 |
| referrer | <meta name="referrer" content="strict-origin-when-cross-origin"> |
状況により | リファラーの送り方。現在のブラウザ既定値と同じ |
| format-detection | <meta name="format-detection" content="telephone=no"> |
状況により | iOS Safari の電話番号自動リンクを止める |
| icon（link） | <link rel="icon" href="/favicon.ico"> |
推奨 | ファビコン。検索結果のサイトアイコンにも使われる |
| apple-touch-icon（link） | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
推奨 | iOS のホーム画面アイコン |
| manifest（link） | <link rel="manifest" href="/manifest.webmanifest"> |
状況により | PWA としてインストールさせるとき |
| google-site-verification | <meta name="google-site-verification" content="…"> |
状況により | Search Console の所有権確認（大文字小文字も一致させる） |
| notranslate | <meta name="googlebot" content="notranslate"> |
状況により | 検索結果での翻訳リンクを出さない |
| rating | <meta name="rating" content="adult"> |
状況により | セーフサーチ向けの成人向け表示 |
| refresh | <meta http-equiv="refresh" content="0; url=…"> |
原則不要 | Google はサーバー側の 301 リダイレクトを推奨 |
| keywords | <meta name="keywords" content="…"> |
不要 | Google 検索では使われず、インデックスに影響しない |
rel="next" / rel="prev"（link） |
<link rel="next" href="…"> |
不要（Google向けには） | Google はもう使っていない |
noarchive / nositelinkssearchbox |
robots の値 | 不要 | Google 検索ではもう使われていない |
判定の根拠は Google 検索セントラルの「Google がサポートしている meta タグ」と「robots meta タグの仕様」 です。keywords や rel="next" は Google の文書に「使っていない」と明記されています。title と description は「文字数の上限はなく、検索結果では端末の幅に合わせて必要に応じて省略される」と書かれており、公式に決まった文字数はありません。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「HTML metaタグ一覧｜SEO・OGP・viewportのコピペ用テンプレート」
コピペ用 head 完成テンプレート
一般的なページ（記事ページ・OGP・X 対応）
上から順に「文字コード → 表示 → 検索 → SNS → アイコン」 と並べると、抜け漏れを確認しやすくなります。架空のサイト「サンプル書店」の記事ページの例です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在庫管理の始め方｜備品を表で整理する手順 - サンプル書店</title>
<meta name="description" content="備品や在庫を表計算で管理する手順を、項目の決め方から棚卸しのタイミングまで順番に紹介します。テンプレートの列構成と、よくある入力ミスの防ぎ方もまとめました。">
<link rel="canonical" href="https://www.example.com/articles/inventory-basics/">
<meta name="robots" content="max-image-preview:large">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)">
<meta name="color-scheme" content="light dark">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="format-detection" content="telephone=no">
<!-- OGP -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="サンプル書店">
<meta property="og:title" content="在庫管理の始め方｜備品を表で整理する手順">
<meta property="og:description" content="備品や在庫を表計算で管理する手順を、項目の決め方から棚卸しまで紹介します。">
<meta property="og:url" content="https://www.example.com/articles/inventory-basics/">
<meta property="og:image" content="https://www.example.com/og/inventory-basics.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="在庫管理表のサンプル画面">
<meta property="og:locale" content="ja_JP">
<meta property="article:published_time" content="2026-10-01T09:00:00+09:00">
<meta property="article:modified_time" content="2026-10-01T09:00:00+09:00">
<!-- X（旧Twitter） -->
<meta name="twitter:card" content="summary_large_image">
<!-- アイコン・マニフェスト -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<!-- 多言語版がある場合のみ -->
<link rel="alternate" hreflang="ja" href="https://www.example.com/articles/inventory-basics/">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/articles/inventory-basics/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/en/articles/inventory-basics/">
</head>
<body>
<h1>在庫管理の始め方</h1>
</body>
</html>
最小構成でよい場合は、charset・viewport・title・description・canonical・og:title・og:type・og:url・og:image・twitter:card・icon の11行から始めると十分です。
トップページ・一般ページで変えるところ
| 項目 | 記事ページ | トップページ・会社案内など |
|---|---|---|
og:type |
article |
website |
article:published_time |
書く | 書かない |
title |
記事名｜サイト名 | サイト名｜何のサイトかの一言 |
canonical |
記事のURL | トップは https://www.example.com/ |
robots |
通常は不要 | 検索結果ページ・会員ページなどは noindex を検討 |
WordPress で使うときの注意
WordPress は wp_head() の中で、いくつかのタグを自動で出力します。テーマに手書きすると二重になりやすいので、先に出力済みのタグを確認します。
| タグ | WordPress 本体の出力 | 注意点 |
|---|---|---|
<title> |
テーマが add_theme_support( 'title-tag' ) を宣言していれば自動出力 |
header.php に <title> を手書きしない |
| canonical | 投稿・固定ページで rel_canonical() が自動出力 |
SEO プラグインを入れるとプラグイン側が出力 |
| robots | wp_robots() が出力（5.7 以降。既定で max-image-preview:large） |
「検索エンジンでの表示」設定で noindex が入る |
| description / OGP | 本体は出力しない | SEO プラグインとテーマの両方で出すと重複する |
| アイコン | 「サイトアイコン」設定から自動出力 | テーマの手書きと重複しやすい |
SEO プラグインを使う場合は、description・OGP・canonical はプラグインに任せ、テーマ側では書かないのが分かりやすい分担です。ブラウザでページを開き「ページのソースを表示」で name="description" を検索し、1件だけになっているかを確認します。
Python で head をチェックするスクリプト（実行結果つき）
作ったテンプレートに抜けや間違いがないかを、Python 3.11 の標準ライブラリ（html.parser）だけで確認するスクリプトです。追加のインストールは要りません。
確認する内容
| # | チェック項目 | NG になる例 |
|---|---|---|
| 1 | charset が head の先頭にある | title の後に置いている |
| 2 | viewport があり、拡大を制限していない | user-scalable=no・maximum-scale=1 |
| 3 | title がある | 空・なし |
| 4 | description が1つだけある | 2つある・なし |
| 5 | canonical が絶対URL | /articles/… のような相対パス |
| 6 | robots に noindex が入っていない | 公開したいページに noindex |
| 7 | keywords がない | <meta name="keywords"> |
| 8 | OGP の基本タグがそろい、og:image が絶対URL | property ではなく name で書いている |
| 9 | twitter:card がある | なし |
| 10 | 同じ name の meta が重複していない | 同じ viewport が2つ |
スクリプト本体（check_head.py）
"""head の meta タグをチェックする（Python 3.11 標準ライブラリのみ）
使い方: python3 check_head.py ファイル.html [...]
"""
import sys
from collections import Counter
from html.parser import HTMLParser
from urllib.parse import urlparse
class HeadParser(HTMLParser):
def __init__(self):
super().__init__()
self.in_head = False
self.in_title = False
self.title = ""
self.order = [] # head 内のタグの順番
self.metas = [] # meta の属性 dict
self.links = [] # link の属性 dict
def handle_starttag(self, tag, attrs):
a = dict(attrs)
if tag == "head":
self.in_head = True
elif self.in_head:
self.order.append(tag)
if tag == "meta":
self.metas.append(a)
elif tag == "link":
self.links.append(a)
elif tag == "title":
self.in_title = True
def handle_endtag(self, tag):
if tag == "head":
self.in_head = False
elif tag == "title":
self.in_title = False
def handle_data(self, data):
if self.in_title:
self.title += data
def is_absolute(url: str) -> bool:
u = urlparse(url or "")
return u.scheme in ("http", "https") and bool(u.netloc)
def check(path: str) -> None:
p = HeadParser()
p.feed(open(path, encoding="utf-8").read())
named = lambda n: [m.get("content", "") for m in p.metas if m.get("name", "").lower() == n]
prop = lambda n: [m.get("content", "") for m in p.metas if m.get("property", "").lower() == n]
rel = lambda r: [l.get("href", "") for l in p.links if r in l.get("rel", "").lower().split()]
ok, ng = [], []
# 1. charset は head の先頭（最初の1024バイト以内が仕様上の条件）
has_charset = any("charset" in m for m in p.metas)
if has_charset and p.order and p.order[0] == "meta" and "charset" in p.metas[0]:
ok.append("charset が head の先頭にある")
elif has_charset:
ng.append("charset が head の先頭にない（title より前に置く）")
else:
ng.append("charset がない")
# 2. viewport
vp = named("viewport")
if not vp:
ng.append("viewport がない")
else:
v = vp[0].replace(" ", "").lower()
if "user-scalable=no" in v or "maximum-scale=1" in v:
ng.append(f"viewport が拡大を制限している: {vp[0]}")
else:
ok.append("viewport あり（拡大制限なし）")
# 3. title
t = p.title.strip()
ok.append(f"title {len(t)}文字: {t}") if t else ng.append("title がない")
# 4. description（1つだけ・空でない）
d = named("description")
if len(d) == 1 and d[0].strip():
ok.append(f"description {len(d[0])}文字")
elif len(d) > 1:
ng.append(f"description が {len(d)} 個ある")
else:
ng.append("description がない")
# 5. canonical は絶対URL
c = rel("canonical")
if not c:
ng.append("canonical がない")
elif not is_absolute(c[0]):
ng.append(f"canonical が相対パス: {c[0]}")
else:
ok.append("canonical は絶対URL")
# 6. robots の noindex
for r in named("robots") + named("googlebot"):
if "noindex" in r.lower() or "none" in r.lower().split(","):
ng.append(f"robots に noindex が入っている: {r}（公開ページなら外す）")
# 7. keywords（Google は使っていない）
if named("keywords"):
ng.append("keywords がある（Google 検索では使われないため不要）")
# 8. OGP
for key in ("og:title", "og:type", "og:url", "og:image", "og:description"):
if not prop(key):
ng.append(f"{key} がない")
for img in prop("og:image"):
if not is_absolute(img):
ng.append(f"og:image が相対パス: {img}")
wrong = [m["name"] for m in p.metas if m.get("name", "").startswith("og:")]
if wrong:
ng.append(f"OGP を name 属性で書いている: {wrong}（property 属性にする）")
if prop("og:image") and all(is_absolute(i) for i in prop("og:image")):
ok.append("og:image は絶対URL")
# 9. twitter:card
named("twitter:card") and ok.append(f"twitter:card={named('twitter:card')[0]}")
if not named("twitter:card"):
ng.append("twitter:card がない")
# 10. 同じ name の重複（theme-color は media 違いで複数可）
dup = [k for k, v in Counter(m.get("name", "").lower() for m in p.metas if m.get("name")).items()
if v > 1 and k not in ("theme-color", "description", "robots")]
if dup:
ng.append(f"同じ name の meta が重複: {dup}")
print(f"== {path} (meta {len(p.metas)}個 / link {len(p.links)}個)")
for s in ok:
print(" OK ", s)
for s in ng:
print(" NG ", s)
print(f" 結果: OK {len(ok)} / NG {len(ng)}")
if __name__ == "__main__":
for f in sys.argv[1:]:
check(f)
チェック用の「よくある間違い」入りの head（bad.html）
<!doctype html>
<html lang="ja">
<head>
<title>サンプル書店</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="keywords" content="在庫,備品,管理">
<meta name="description" content="サンプル書店の公式サイトです。">
<meta name="description" content="サンプル書店の公式サイトです。">
<link rel="canonical" href="/articles/inventory-basics/">
<meta name="robots" content="noindex">
<meta property="og:title" content="在庫管理の始め方">
<meta property="og:image" content="/og/inventory-basics.png">
<meta name="og:description" content="nameで書いてしまったOGP">
</head>
<body></body>
</html>
実行結果
$ python3 --version
Python 3.11.15
$ python3 check_head.py good.html bad.html
== good.html (meta 22個 / link 8個)
OK charset が head の先頭にある
OK viewport あり（拡大制限なし）
OK title 29文字: 在庫管理の始め方｜備品を表で整理する手順 - サンプル書店
OK description 78文字
OK canonical は絶対URL
OK og:image は絶対URL
OK twitter:card=summary_large_image
結果: OK 7 / NG 0
== bad.html (meta 9個 / link 1個)
OK title 6文字: サンプル書店
NG charset が head の先頭にない（title より前に置く）
NG viewport が拡大を制限している: width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no
NG description が 2 個ある
NG canonical が相対パス: /articles/inventory-basics/
NG robots に noindex が入っている: noindex（公開ページなら外す）
NG keywords がある（Google 検索では使われないため不要）
NG og:type がない
NG og:url がない
NG og:description がない
NG og:image が相対パス: /og/inventory-basics.png
NG OGP を name 属性で書いている: ['og:description']（property 属性にする）
NG twitter:card がない
結果: OK 1 / NG 12
完成テンプレート（good.html）は NG 0、間違い入りの bad.html は 12 件を検出しました。公開前やテンプレート変更時に、書き出した HTML に対して実行すると確認の手間が減ります。
複数ページで description の重複を探す
description は「ページごとに固有に」が Google の推奨です。テンプレートの初期値のまま公開すると全ページ同じ説明文になることがあるので、書き出した HTML をまとめて比べると見つけやすくなります。
import re, sys
from collections import defaultdict
pages = defaultdict(list)
for path in sys.argv[1:]:
html = open(path, encoding="utf-8").read()
m = re.search(r'<meta\s+name="description"\s+content="([^"]*)"', html)
pages[m.group(1) if m else "(なし)"].append(path)
for desc, files in pages.items():
mark = "重複" if len(files) > 1 else "OK"
print(f"[{mark}] {desc[:30]}… -> {files}")
$ python3 dup_desc.py good.html page2.html bad.html
[重複] 備品や在庫を表計算で管理する手順を、項目の決め方から棚卸しの… -> ['good.html', 'page2.html']
[OK] サンプル書店の公式サイトです。… -> ['bad.html']
page2.html は good.html の URL だけを変えたコピーで、説明文が同じため「重複」と判定されました。
robots メタタグの値一覧
robots メタタグは、検索エンジンにインデックスや検索結果での表示方法を指示するタグです。何も書かなければ既定値 all（制限なし）として扱われます。
| 値 | 意味 | 使う場面の例 |
|---|---|---|
all |
制限なし（既定値） | 書かなくてよい |
noindex |
検索結果に表示しない | 社内向け案内、検索結果ページ、会員ページ |
nofollow |
ページ内のリンクをたどらない | 利用者が投稿したリンクが多いページ |
none |
noindex, nofollow と同じ |
まとめて止めたいとき |
nosnippet |
テキストのスニペットや動画プレビューを出さない | 説明文を表示させたくないページ |
max-snippet:[数値] |
スニペットの最大文字数。0 は表示なし、-1 は上限なし |
max-snippet:120 |
max-image-preview:[設定] |
画像プレビューの大きさ：none / standard / large |
大きい画像を見せたいとき large |
max-video-preview:[数値] |
動画プレビューの最大秒数。0 は静止画のみ、-1 は上限なし |
max-video-preview:10 |
notranslate |
検索結果で翻訳を提案しない | 原文のまま読んでほしいページ |
noimageindex |
ページ内の画像をインデックスしない | 画像検索に出したくないとき |
indexifembedded |
noindex でも iframe で埋め込まれた内容はインデックスを許可 |
埋め込み用ページ（noindex と併用） |
unavailable_after:[日時] |
指定日時以降は検索結果に表示しない | 期間限定の告知ページ |
noarchive / nocache |
Google 検索ではもう使われていない | 書かなくてよい |
<!-- 複数の値はカンマ区切り。値の大文字小文字は区別されない -->
<meta name="robots" content="noindex, nofollow">
<!-- 分けて書いても同じ -->
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<!-- Google にだけ指示する -->
<meta name="googlebot" content="nosnippet">
<!-- 段落の一部だけスニペットから外す（span・div・section に使える） -->
<p>公開情報です。<span data-nosnippet>この部分はスニペットに出しません。</span></p>
指示が食い違ったときは、より制限の強い方が適用されます（例：nosnippet と max-snippet:50 なら nosnippet）。また、robots メタタグはクローラーがページを取得できて初めて読まれるため、robots.txt でクロールを止めたページに noindex を書いても伝わりません。検索結果から外したいページは、robots.txt ではなく noindex で指定します。
| やりたいこと | 使うもの |
|---|---|
| 検索結果に出さない | <meta name="robots" content="noindex">（クロールは許可したまま） |
| クロール自体を減らす | robots.txt の Disallow |
| PDF・画像など HTML 以外に noindex | HTTP ヘッダー X-Robots-Tag: noindex |
| 重複ページを1つにまとめる | <link rel="canonical"> |
OGP と X（旧Twitter）カードの書き方
OGP（Open Graph Protocol）は、SNS でURLがシェアされたときのタイトル・画像・説明文を指定する仕組みです。name ではなく property 属性で書きます。
| プロパティ | 内容 | ポイント |
|---|---|---|
og:title |
カードのタイトル | サイト名は付けなくてもよい（og:site_name で別に指定） |
og:type |
種類 | 記事は article、それ以外は website |
og:url |
ページの正規URL | canonical と同じURLにそろえる |
og:image |
カード画像 | https:// から始まる絶対URL |
og:image:width / og:image:height |
画像の幅・高さ | 1200×630 が横長カードでよく使われる比率 |
og:image:alt |
画像の代替テキスト | 読み上げ用 |
og:description |
説明文 | description と同じでも別でもよい |
og:site_name |
サイト名 | |
og:locale |
言語 | ja_JP |
article:published_time / article:modified_time |
公開・更新日時 | ISO 8601 形式 |
| X 用タグ | 値 | 備考 |
|---|---|---|
twitter:card |
summary / summary_large_image |
大きい画像のカードは summary_large_image |
twitter:site |
@サイトのアカウント |
任意 |
twitter:creator |
@作者のアカウント |
任意 |
twitter:title / twitter:description / twitter:image |
各内容 | 書かなければ OGP の値が使われるため、通常は省略できる |
X 用には twitter:card だけを書き、タイトル・説明・画像は OGP と共通にすると、管理するタグが少なく済みます。シェア表示を確認するときは、各 SNS のキャッシュが残ることがあるため、URL にクエリを付けて試すと最新の状態を見られます。
よくある間違いと直し方
| 間違い | どうなるか | 直し方 |
|---|---|---|
| 全ページ同じ description | 検索結果で各ページの違いが伝わりにくい | ページごとに内容に沿った説明文を書く |
| description を2つ書く（テーマとプラグイン） | どちらが使われるか分かりにくい | どちらか一方で出力する |
og:image が相対パス |
SNS が画像を取得できずカードに画像が出ない | https:// からの絶対URLにする |
OGP を name="og:…" で書く |
OGP として読まれないことがある | property="og:…" にする |
| canonical が相対パス | 仕様上は使えるが、解釈のずれが起きやすい | 絶対URLで書く |
user-scalable=no / maximum-scale=1 |
利用者がピンチで拡大できない。Lighthouse のアクセシビリティ監査でも指摘される | width=device-width, initial-scale=1 だけにする |
| charset が title の後 | 文字コードの判定前に日本語が読まれることがある | head の最初の行に置く |
| 公開ページに noindex が残る | 検索結果に表示されない | テスト環境用の設定を本番で外す |
| robots.txt でブロック＋noindex | noindex が読まれない | クロールを許可して noindex を読ませる |
| keywords を丁寧に書く | Google 検索では使われない | 削除してよい（他の検索エンジン向けに残すのは任意） |
直す前と後（viewport）
<!-- 直す前：拡大できない -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 直した後 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
直す前と後（og:image）
<!-- 直す前：相対パス -->
<meta property="og:image" content="/og/inventory-basics.png">
<!-- 直した後：絶対URL＋サイズと代替テキスト -->
<meta property="og:image" content="https://www.example.com/og/inventory-basics.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="在庫管理表のサンプル画面">
公開前チェックリスト
| 確認項目 | 確認方法 |
|---|---|
| charset・viewport・title・description・canonical がそろっている | 上の check_head.py |
| description がページごとに異なる | dup_desc.py、または Search Console |
| canonical と og:url が同じ絶対URL | ソース表示で確認 |
| 公開ページに noindex がない | Search Console の URL 検査 |
| og:image が表示される | 各SNSのシェアプレビュー |
| スマホでピンチ拡大できる | 実機または DevTools のデバイスモード |
| WordPress で title・description が二重になっていない | ソース表示で <title と name="description" を検索 |
フレームワークを使う場合は、Next.js の Metadata API や Nuxt の useSeoMeta のように、同じタグを関数や設定から出力する仕組みがあります。どの方法でも、最終的に書き出される HTML が上の表と同じ内容になっていれば問題ありません。
よくある質問
Q. title と description は何文字にすればよいですか？ A. Google は上限の文字数を定めていません。 公式には「長さの制限はなく、検索結果では端末の幅に合わせて必要に応じて省略される」と書かれています。大事な言葉を前の方に置き、ページの内容が伝わる長さにすると、省略されても意味が通ります。
Q. meta keywords は書いた方がよいですか？ A. Google 検索では使われておらず、インデックスにも影響しません（Google 検索セントラルに明記）。新しく書く必要はありません。
Q. description を書いても検索結果に別の文章が出ます。 A. Google はページ本文から、検索した語句に合う部分をスニペットとして表示することがあります。description は候補の1つとして使われるため、ページの要点が伝わる説明文を書いておくと採用されやすくなります。
Q. OGP を書けば X のカードも表示されますか？
A. twitter:card があれば、タイトル・説明・画像は OGP の値で表示されます。twitter:card だけは X 専用なので追加しておくと、大きい画像のカードを指定できます。
まとめ
- 必須は charset・viewport・title、推奨は description・canonical・OGP・twitter:card・icon
- keywords・
rel="next"・noarchive は Google 検索では使われていないため不要 - title・description に公式の文字数上限はない。ページごとに固有の内容にする
- robots は既定で
all。noindex は robots.txt でブロックせずに書く - og:image は絶対URL、OGP は
property属性で書く - Python 標準ライブラリのチェックスクリプトで、間違い入りの head から 12 件を自動検出できた
- WordPress では title・canonical・robots が自動出力されるので、プラグインとの二重出力に注意
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「HTML metaタグ一覧｜SEO・OGP・viewportのコピペ用テンプレート」
株式会社RJCでは、HTMLとSEOの基本を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか？
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください！
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ！
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨（休暇 or 金一封）、11期連続の黒字決算。
