HTML

The vocab attribute is like a guide that tells computers which dictionary to look at to understand special words on the page.

vocab 属性

vocab は「このページ（またはこの範囲）で使う用語は、どの辞書（語彙集）に従って解釈してね」と機械（検索エンジンや支援技術など）に伝えるための指定です。

指定する値（例：https://schema.org/ や https://purl.org/dc/terms/）は「語彙URI」と呼ばれ、その辞書（語彙）の場所を示すアドレスです。「その辞書の単語帳を見てね」という意味になります。

主に RDFa（Resource Description Framework in Attributes）で使われ、ページ内のデータ（例：「著者」「作品名」「出版日」など）に“意味”をもたせるときに役立ちます。

補足：現在、検索エンジン向けのリッチリザルトでは JSON-LD 方式が主流です。RDFa と vocab でも表現できますが、実運用では JSON-LD を使うケースが増えています（本ページでは両方の例を示します）。

どこに効く？（適用範囲）

vocab は、その属性を書いた要素と、その中に含まれる子孫要素すべてに効きます（＝その範囲では同じ辞書を使う、という意味になります）。

さらに、内側の要素であらためて vocab を書けば、そこで上書きされます（内側は別の辞書を使う、という指定に切り替わります）。

HTML

<div vocab="https://schema.org/" typeof="Book">
	<span property="name">吾輩は猫である</span>
	<span property="author">夏目漱石</span>

	<!-- ここだけ別の辞書を使いたい場合（例：Dublin Core Terms） -->
	<div vocab="https://purl.org/dc/terms/" typeof="BibliographicResource">
		<span property="title">吾輩は猫である（別辞書での表現）</span>
	</div>
</div>

どうやって“意味”をつける？（typeof と property）

RDFa では、typeof と property を組み合わせて意味づけを行います。

typeof
その要素が何の種類（タイプ）なのかを伝えます（例：本、人物、記事など）。
property
その要素がどんな項目（性質）なのかを伝えます（例：タイトル、著者、公開日など）。

つまり、vocab で「どの辞書を見るか」を決め、typeof で「モノの種類」を示し、property で「そのモノの項目名」を付ける、という流れです。

これらの属性は、<span> だけでなく <h1> や <time> など、どの要素にも付けられます。見た目は変わらず、意味（メタデータ）だけを機械に伝えます。

HTML

<article vocab="https://schema.org/" typeof="NewsArticle">
	<h1 property="headline">見出しタイトル</h1>
	<p>本文……</p>
	<p>著者：<span property="author">山田 太郎</span></p>
	<time property="datePublished" datetime="2025-09-01">2025-09-01</time>
</article>

実務ではいつ使う？（かんたんな目安）

検索エンジン向けの構造化データ
まずは JSON-LD を優先（公式ドキュメントやガイドでも推奨が多い）。
HTMLの断片に意味を直書きしたい／CMSのテンプレで出力したい
RDFa（＝vocab）が便利。
見た目は変わらない
これらは「意味（メタデータ）」を機械に伝えるためのものなので、表示は通常どおりです。

HTML

<div vocab="https://schema.org/" typeof="Book">
	<span property="name">吾輩は猫である</span>
	<span property="author">夏目漱石</span>
</div>

このように書くと、「これはBook（本）という種類で、その中にname（名前）とauthor（著者）がある」と機械が理解できます。