List of Semantic - text.Baldanders.info
tag:text.Baldanders.info,2017-11-17:/tags
2017-11-17T23:40:05+09:00
帰ってきた「しっぽのさきっちょ」
https://text.baldanders.info/images/avatar.jpg
https://text.baldanders.info/images/avatar.jpg
JSON-LD に対応してみた
tag:text.Baldanders.info,2017-11-17:/remark/2017/11/json-ld/
2017-11-17T14:40:05+00:00
2019-07-01T13:48:09+00:00
以前,このサイトを Twitter Cards に対応させたのだが,今回も思いつきで JSON-LD に対応させることにした。
Spiegel
https://baldanders.info/profile/
<p>以前,このサイトを <a href="https://text.baldanders.info/remark/2017/10/twitter-card-metadata/" title="Twitter Card メタデータに対応した">Twitter Cards に対応させた</a>のだが,今回も思いつきで <a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> に対応させることにした。</p>
<ul>
<li><a href="https://json-ld.org/">JSON-LD - JSON for Linking Data</a></li>
</ul>
<p><a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> の特徴は複数の情報のかたまりを IRI<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> で繋ぐことで複雑なデータ構造を記述できる点にある。
これを使ってネット上のリソースのメタデータとその関係を表現するわけだ。</p>
<p>ただし Web ページの場合は, RDFa や Microdata などと違って,語彙を HTML の要素に埋め込むことが出来ないため冗長にならざるを得ない。
まぁ CMS を使ってサイトや Web ページを管理しているなら,一度テンプレート等を作ってしまえば済む話なので,大した手間ではないかもしれないが。</p>
<p>逆に RESTful API でメタデータを提供する場合は <a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> はかなり有力な手段となるだろう。</p>
<p>真面目に <a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> を扱うとなると相当凝ったことができるみたいだが<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>,今回は軽めに Google の検索サービスが解釈できる範囲で調整してみようと思う。</p>
<ul>
<li><a href="https://developers.google.com/search/docs/guides/intro-structured-data">Introduction to Structured Data | Search | Google Developers</a></li>
<li><a href="https://search.google.com/structured-data/testing-tool">構造化データ テストツール</a></li>
</ul>
<p>なお <a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> を導入するのなら Microdata の記述はページから削除することをお勧めする。
Microdata は未完成のまま開発が終了しており,もはや推奨されない。</p>
<h2>Web ページに <a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> を埋め込む</h2>
<p><a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> を Web ページに埋め込む際は,以下のように <code><script></code> 要素で囲む。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="p">...</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>メディア・タイプに注意すること。
どうやらこの記述はページ内にいくつ置いてもいいようだ(少なくとも Google の<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>には怒られなかった)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="p">...</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="p">...</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><h2><a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> の詳細</h2>
<p><a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> の中身だが,まずは <code>@context</code> と <code>@type</code> を指定する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@context"</span><span class="o">:</span> <span class="s2">"http://schema.org"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"WebSite"</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p><code>@context</code> で語彙を定義するのだが,どうやら Google は Microdata の語彙(のひとつ)である <a href="http://schema.org/">schema.org</a> を前提にしているらしい。
<code>@type</code> には <a href="http://schema.org/">schema.org</a> で定義される content type を指定する。
このサイトは一応ブログサイトなので,以下の content type を使うことにする。</p>
<ul>
<li><a href="http://schema.org/WebSite" title="WebSite - schema.org">WebSite</a></li>
<li><a href="http://schema.org/Blog" title="Blog - schema.org">Blog</a></li>
<li><a href="http://schema.org/BlogPosting" title="BlogPosting - schema.org">BlogPosting</a></li>
<li><a href="http://schema.org/BreadcrumbList" title="BreadcrumbList - schema.org">BreadcrumbList</a></li>
</ul>
<p>更に,これらが参照する content type として以下も使用する。</p>
<ul>
<li><a href="http://schema.org/Organization" title="Organization - schema.org">Organization</a></li>
<li><a href="http://schema.org/Person" title="Person - schema.org">Person</a></li>
<li><a href="http://schema.org/ImageObject" title="ImageObject - schema.org">ImageObject</a></li>
</ul>
<p>まずは <a href="http://schema.org/WebSite" title="WebSite - schema.org">WebSite</a> から。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@context"</span><span class="o">:</span> <span class="s2">"http://schema.org"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"WebSite"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"inLanguage"</span><span class="o">:</span> <span class="s2">"ja"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"text.Baldanders.info"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"url"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"publisher"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/#org"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"author"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Person"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/#maker"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"Spiegel"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"url"</span><span class="o">:</span> <span class="s2">"https://baldanders.info/profile/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"image"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/images/avatar.jpg"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"image"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/images/avatar.jpg"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"帰ってきた「しっぽのさきっちょ」"</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@context"</span><span class="o">:</span> <span class="s2">"http://schema.org"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Organization"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/#org"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"text.Baldanders.info"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"logo"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"ImageObject"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/#logo"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"url"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/images/avatar.jpg"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p><code>@id</code> は IRI を定義または参照する。
<code>@id</code> によって <a href="http://schema.org/Organization" title="Organization - schema.org">Organization</a> のデータを <code>publisher</code> から参照しているのがお分かりだろうか。
これを<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>にかけるとこんな感じになる。</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/38448664942/"><img src="https://photo.baldanders.info/flickr/image/38448664942_m.png" srcset="https://photo.baldanders.info/flickr/image/38448664942_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Structured Data Testing Tool (1)" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/38448664942/">Structured Data Testing Tool (1)</a></div></figcaption>
</figure>
<p><code>publisher</code> に <a href="http://schema.org/Organization" title="Organization - schema.org">Organization</a> のデータが入っているのがわかると思う。</p>
<p>本来の <a href="http://schema.org/">schema.org</a> の定義では <code>publisher</code> には <a href="http://schema.org/Organization" title="Organization - schema.org">Organization</a> と <a href="http://schema.org/Person" title="Person - schema.org">Person</a> のどちらも有効な筈なのだが,<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>は <a href="http://schema.org/Organization" title="Organization - schema.org">Organization</a> しか受け付けないようだ。
これではうちのような個人サイトは大変に困るのだが,しょうがないので <a href="http://schema.org/Organization" title="Organization - schema.org">Organization</a> にテキトーな情報を入れてお茶を濁している。
何とかしてよ Google 先生!</p>
<p>次は <a href="http://schema.org/Blog" title="Blog - schema.org">Blog</a> の情報をセットする。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@context"</span><span class="o">:</span> <span class="s2">"http://schema.org"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Blog"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"url"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"inLanguage"</span><span class="o">:</span> <span class="s2">"ja"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"しっぽのさきっちょ"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"とりとめのない四方山話。"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"image"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/images/attention/remark.jpg"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"publisher"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/#org"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"author"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Person"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/#maker"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"Spiegel"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"url"</span><span class="o">:</span> <span class="s2">"https://baldanders.info/profile/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"image"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/images/avatar.jpg"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p><code>publisher</code> の参照先は <a href="http://schema.org/WebSite" title="WebSite - schema.org">WebSite</a> と同じなので省略する。
これを<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>にかけるとこんな感じになる。</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/37593823405/"><img src="https://photo.baldanders.info/flickr/image/37593823405_m.png" srcset="https://photo.baldanders.info/flickr/image/37593823405_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Structured Data Testing Tool (2)" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/37593823405/">Structured Data Testing Tool (2)</a></div></figcaption>
</figure>
<p>どんどん行こう。
<a href="http://schema.org/BlogPosting" title="BlogPosting - schema.org">BlogPosting</a> はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@context"</span><span class="o">:</span> <span class="s2">"http://schema.org"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"BlogPosting"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/2017/11/qiitadon/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"url"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/2017/11/qiitadon/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"mainEntityOfPage"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/2017/11/qiitadon/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"inLanguage"</span><span class="o">:</span> <span class="s2">"ja"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"Qiita って Mastodon やってたのか"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"私にとって今年最初の大外しは「GW 過ぎたら Mastodon のことなんかみんな忘れてる」だったが,本当に忘れていたのは私だけだったようだ。"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"headline"</span><span class="o">:</span> <span class="s2">"私にとって今年最初の大外しは「GW 過ぎたら Mastodon のことなんかみんな忘れてる」だったが,本当に忘れていたのは私だけだったようだ。"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"keywords"</span><span class="o">:</span> <span class="s2">"mastodon, communication"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"image"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/images/attention/remark.jpg"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"datePublished"</span><span class="o">:</span> <span class="s2">"2017-11-10T13:49:58+09:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"dateModified"</span><span class="o">:</span> <span class="s2">"2017-11-16T10:09:40+09:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"publisher"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/#org"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"author"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Person"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/2017/11/qiitadon/#maker"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"Spiegel"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"url"</span><span class="o">:</span> <span class="s2">"https://baldanders.info/profile/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"image"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/images/avatar.jpg"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"license"</span><span class="o">:</span> <span class="s2">"https://creativecommons.org/licenses/by-sa/4.0/"</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>Google 検索は <a href="http://schema.org/BlogPosting" title="BlogPosting - schema.org">BlogPosting</a> の内容を参照している。
Google 検索が <a href="http://schema.org/BlogPosting" title="BlogPosting - schema.org">BlogPosting</a> で要求するプロパティは以下の通り。</p>
<table>
<thead>
<tr>
<th style="text-align:left">Properties</th>
<th style="text-align:center">Data Type</th>
<th style="text-align:center">AMP</th>
<th style="text-align:center">non-AMP</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>mainEntityOfPage</code></td>
<td style="text-align:center"><code>URL</code></td>
<td style="text-align:center">recommended</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>headline</code></td>
<td style="text-align:center"><code>Text</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">recommended</td>
</tr>
<tr>
<td style="text-align:left"><code>image</code></td>
<td style="text-align:center"><code> ImageObject</code> or <code>URL</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">recommended</td>
</tr>
<tr>
<td style="text-align:left"><code>publisher</code></td>
<td style="text-align:center"><code> Organization</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>publisher.name</code></td>
<td style="text-align:center"><code> Text</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>publisher.logo</code></td>
<td style="text-align:center"><code> ImageObject</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>publisher.logo.url</code></td>
<td style="text-align:center"><code> URL</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>publisher.logo.height</code></td>
<td style="text-align:center"><code> Number</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>publisher.logo.width</code></td>
<td style="text-align:center"><code> Number</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>datePublished</code></td>
<td style="text-align:center"><code> DateTime</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>dateModified</code></td>
<td style="text-align:center"><code> DateTime</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>author</code></td>
<td style="text-align:center"><code> Person</code> or <code>Organization</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>author.name</code></td>
<td style="text-align:center"><code> Text</code></td>
<td style="text-align:center">required</td>
<td style="text-align:center">ignored</td>
</tr>
<tr>
<td style="text-align:left"><code>description</code></td>
<td style="text-align:center"><code> Text</code></td>
<td style="text-align:center">recommended</td>
<td style="text-align:center">ignored</td>
</tr>
</tbody>
</table>
<p>AMP (Accelerated Mobile Pages) と non-AMP で要求が異なるが,<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>は AMP を前提にしているようで,これらのプロパティがないとエラーまたは警告を吐く<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。</p>
<p>これも<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>にかけてみよう。
こんな感じ。</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/37594061745/"><img src="https://photo.baldanders.info/flickr/image/37594061745_m.png" srcset="https://photo.baldanders.info/flickr/image/37594061745_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Structured Data Testing Tool (3)" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/37594061745/">Structured Data Testing Tool (3)</a></div></figcaption>
</figure>
<p>最後に <a href="http://schema.org/BreadcrumbList" title="BreadcrumbList - schema.org">BreadcrumbList</a> (パンくずリスト<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>)はこんな感じになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@context"</span><span class="o">:</span> <span class="s2">"http://schema.org"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"BreadcrumbList"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/2017/11/qiitadon/#breadcrumb-list"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"itemListElement"</span><span class="o">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"ListItem"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"position"</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"item"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"ListItem"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"position"</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"item"</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"@id"</span><span class="o">:</span> <span class="s2">"https://text.baldanders.info/remark/"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><p>Google 検索は <a href="http://schema.org/BreadcrumbList" title="BreadcrumbList - schema.org">BreadcrumbList</a> の内容も参照している。
Google 検索が <a href="http://schema.org/BreadcrumbList" title="BreadcrumbList - schema.org">BreadcrumbList</a> で要求するプロパティは以下の通り。</p>
<table>
<thead>
<tr>
<th style="text-align:left">Properties</th>
<th style="text-align:center">Data Type</th>
<th style="text-align:center">Requirement</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>image</code></td>
<td style="text-align:center"><code>URL</code></td>
<td style="text-align:center">optional</td>
</tr>
<tr>
<td style="text-align:left"><code>item</code></td>
<td style="text-align:center"><code>Thing</code></td>
<td style="text-align:center">required</td>
</tr>
<tr>
<td style="text-align:left"><code>name</code></td>
<td style="text-align:center"><code>Text</code></td>
<td style="text-align:center">required</td>
</tr>
<tr>
<td style="text-align:left"><code>position</code></td>
<td style="text-align:center"><code>Integer</code></td>
<td style="text-align:center">required</td>
</tr>
</tbody>
</table>
<p>上述のコードでは <code>item</code> を <code>@id</code> の参照先と繋げている。
具体的には,最初の階層に <a href="http://schema.org/WebSite" title="WebSite - schema.org">WebSite</a> データの <code>@id</code> を,2番目の階層に <a href="http://schema.org/Blog" title="Blog - schema.org">Blog</a> データの <code>@id</code> を指定している。
これによって <code>item</code> の中に <code>name</code> や <code>image</code> が含まれるため,不足なく情報を網羅できている。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://qiita.com/narumana/items/b66969b80cce848b2ddf">Google推奨「JSON-LD」で構造化マークアップ - Qiita</a></li>
<li><a href="https://qiita.com/ko8@github/items/d2cf8786032972d7d090">Google リッチカードの導入 - Qiita</a></li>
<li><a href="https://www.suzukikenichi.com/blog/google-finally-supports-breadcrumbs-with-schema-org/">schema.orgのパンくずリストをようやくGoogleがサポート開始 | 海外SEO情報ブログ</a></li>
<li><a href="https://blog.mizukmb.net/post/apply-json-ld/">JSON-LDによるブログの構造化データをHugoで実現する | TRIAL DANCE</a></li>
<li><a href="https://qiita.com/1000k/items/2f2258cbbe9c9493551e">Hugo で JSON-LD 内の URL がなぜかエスケープされる問題 - Qiita</a></li>
<li><a href="https://qiita.com/y_hokkey/items/f9d8b66b3770a82d4c1c">HUGOで作れるCMSっぽいパーツ:関連記事・目次・JSON-LDなど - Qiita</a></li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>IRI (Internationalized Resource Indicator) というのは <a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> 独自の用語のようだが,ここでは大雑把に URL (Uniform Resource Locator) や URI (Uniform Resource Indicator) と同じようにネット上のリソースを一意に識別する識別子であると理解しておけばよい。なお,<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>を見るかぎり Google 検索では IRI からメタデータの場所(URL または URI)を推測して取得するといったことはしないようだ。したがって Web ページに <a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> を設置する場合には,関連する全てのメタデータを記述する必要がある。冗長すぎるやろ。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p><a href="https://json-ld.org/" title="JSON-LD - JSON for Linking Data">JSON-LD</a> の仕様を見るかぎり,Microdata や RDFa の語彙を流用したり自前で語彙を作ったりできるっぽい。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>ただし <code>publisher.logo.height</code> と <code>publisher.logo.width</code> は例外のようで,これらのプロパティがなくても<a href="https://search.google.com/structured-data/testing-tool" title="構造化データ テストツール">テストツール</a>ではエラーにならなかった。まぁ画像のサイズは画像データから読み取れるからね。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p>一応説明しておくと「パンくずリスト」とはサイト内のページ位置を見失わないようにするためのナビゲーション表示を指す。名前で想像される通り「ヘンゼルとグレーテル」の童話が語源になっているらしい。まぁ,いまどきパンくずリストがないと迷子になってしまうようなダサい構成のサイトは少なくなってると思うけど。 <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
Twitter Card メタデータに対応した
tag:text.Baldanders.info,2017-10-29:/remark/2017/10/twitter-card-metadata/
2017-10-29T07:00:38+00:00
2020-01-05T11:59:50+00:00
もう Semantic Web なんか誰も見向きもしなくなってるみたいだし, Web コンテンツを解析する手段は AI 技術を利用したものへシフトしてるようだし,もう(どうでも)いいかな,と。
Spiegel
https://baldanders.info/profile/
<p>なんとなく思いついてこのブログをいわゆる “<a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview" title="Summary card — Twitter Developers">Twitter Cards</a>” に対応させた。</p>
<p>実は <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview" title="Summary card — Twitter Developers">Twitter Cards</a> が登場し始めたときに Tumblr などで適用していたのだが,あまりに酷い仕様で <a href="https://validator.w3.org/" title="The W3C Markup Validation Service">HTML Validator</a> にかけるとエラーの嵐になるし,そもそも Semantic Web を無視した設計に腹が立って忌避していたのだ。
しかし,まぁ,もう Semantic Web なんか誰も見向きもしなくなってるみたいだし, Web コンテンツを解析する手段は AI 技術を利用したものへシフトしてるようだし,もう(どうでも)いいかな,と。</p>
<p><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview" title="Summary card — Twitter Developers">Twitter Cards</a> の仕様も随分シンプルになった。
まず,カード種別が以下の4種類のみになった。</p>
<ul>
<li><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary" title="Summary card — Twitter Developers">Summary card</a></li>
<li><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" title="Summary with large image — Twitter Developers">Summary card with large image</a></li>
<li><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card" title="Player card — Twitter Developers">Player card</a></li>
<li><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/app-card" title="App card — Twitter Developers">App card</a></li>
</ul>
<p><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card" title="Player card — Twitter Developers">Player card</a> は動画やスライドショウのページ用, <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/app-card" title="App card — Twitter Developers">App card</a> はアプリページ用なので,それ以外の Web ページでは <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary" title="Summary card — Twitter Developers">Summary card</a> か <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" title="Summary with large image — Twitter Developers">Summary card with large image</a> を選択することになる。</p>
<p><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" title="Summary with large image — Twitter Developers">Summary card with large image</a> はアイキャッチ<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> 用の大きめの画像(300×157から4096×4096で5MB以下)を含むカードで,メディア・サイトなどが多用するあの<strong>ウザい</strong>やつである。
とはいえ,写真やイラストなどを中心としたサイトでは <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" title="Summary with large image — Twitter Developers">Summary card with large image</a> が向いているだろう。</p>
<p><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" title="Summary with large image — Twitter Developers">Summary card with large image</a> にしないのなら <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary" title="Summary card — Twitter Developers">Summary card</a> を選択する。
うちのブログはもちろん<del>オリーブオイル</del>おっと <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary" title="Summary card — Twitter Developers">Summary card</a> で<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<p><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary" title="Summary card — Twitter Developers">Summary card</a> で必須のメタデータは以下の2つである。
これを指定しないと,そもそもカードが表示されない。</p>
<ul>
<li><code>twitter:card</code></li>
<li><code>twitter:title</code></li>
</ul>
<p>具体的には <code><meta></code> 要素の <code>name</code>-<code>content</code> 属性の組み合わせを使って以下のように記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:card"</span> <span class="na">content</span><span class="o">=</span><span class="s">"summary"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:title"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Codic API を利用するパッケージを作ってみた — プログラミング言語 Go | text.Baldanders.info"</span><span class="p">></span>
</span></span></code></pre></div><p>ちなみに <code>twitter:card</code> の値はカード種別ごとに以下の通り。</p>
<table>
<thead>
<tr>
<th style="text-align:left">カード種別</th>
<th style="text-align:left">twitter:card 値</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary" title="Summary card — Twitter Developers">Summary card</a></td>
<td style="text-align:left"><code>summary</code></td>
</tr>
<tr>
<td style="text-align:left"><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" title="Summary with large image — Twitter Developers">Summary card with large image</a></td>
<td style="text-align:left"><code>summary_large_image</code></td>
</tr>
<tr>
<td style="text-align:left"><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card" title="Player card — Twitter Developers">Player card</a></td>
<td style="text-align:left"><code>player</code></td>
</tr>
<tr>
<td style="text-align:left"><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/app-card" title="App card — Twitter Developers">App card</a></td>
<td style="text-align:left"><code>app</code></td>
</tr>
</tbody>
</table>
<p>ただ,このままではページの説明(description)やアイコン画像が表示されないため(何故 optional なのに無理くり表示しようとするのだろう),以下のメタデータも追加する。</p>
<ul>
<li><code>twitter:description</code></li>
<li><code>twitter:image</code></li>
</ul>
<p>アイコン画像には144×144から4096×4096までのサイズで5MB以下のデータが使える。
これらを合わせると以下の記述が最低限必要と言える。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:card"</span> <span class="na">content</span><span class="o">=</span><span class="s">"summary"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:title"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Codic API を利用するパッケージを作ってみた — プログラミング言語 Go | text.Baldanders.info"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"spf13/viper を使ってみたかったのだ。"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:image"</span> <span class="na">content</span><span class="o">=</span><span class="s">"https://text.baldanders.info/images/attention/go-code.png"</span><span class="p">></span>
</span></span></code></pre></div><p>以上のメタデータを <code><head></code> 要素内に設置する。
これで以下のように表示される(筈)。</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/37949847556/"><img src="https://photo.baldanders.info/flickr/image/37949847556_m.png" srcset="https://photo.baldanders.info/flickr/image/37949847556_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Twitter Card: Summary" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/37949847556/">Twitter Card: Summary</a></div></figcaption>
</figure>
<p>以前は <code>twitter:image</code> 等を <code>property</code>-<code>content</code> 属性の組み合わせで記述させようとしていたが(これのせいで <a href="https://validator.w3.org/" title="The W3C Markup Validation Service">HTML Validator</a> がエラーを吐いていた),さすがに改心したようである(笑)</p>
<p>サイトのオーナーやページの作成者が Twitter ユーザの場合は以下のメタデータも使える。</p>
<ul>
<li><code>twitter:site</code></li>
<li><code>twitter:creator</code></li>
</ul>
<p>これも同じように</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:site"</span> <span class="na">content</span><span class="o">=</span><span class="s">"@spiegel_2007"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"twitter:creator"</span> <span class="na">content</span><span class="o">=</span><span class="s">"@spiegel_2007"</span><span class="p">></span>
</span></span></code></pre></div><p>とすればよい。
カードの見た目には全く関係ないが Twitter アナリティクスか何かで使うのだろう,多分。</p>
<p>メタデータの幾つかは <a href="http://ogp.me/" title="The Open Graph protocol">OGP</a> の語彙と置き換えることができる。</p>
<p>一応説明しておくと, <a href="http://ogp.me/" title="The Open Graph protocol">OGP</a> は Facebook が最初に考えた仕様で,元々はネット上のコンテンツと Facebook のアプリを関連付けて制御する仕組みだったのだが</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://baldanders.info/spiegel/rdfa/ogp.svg"><img src="https://baldanders.info/spiegel/rdfa/ogp.svg" srcset="https://baldanders.info/spiegel/rdfa/ogp.svg 500w" sizes="(min-width:600px) 500px, 80vw" alt="Open Graph の相関図" loading="lazy"></a><figcaption><div><a href="https://baldanders.info/spiegel/rdfa/ogp.svg">Open Graph の相関図</a></div></figcaption>
</figure>
<p>RDFa の仕様の一部を借用した大変筋の悪いもので,本来の目的は明後日方向に飛んでいき,現在は <code><head></code> 要素内にメタデータを記述するための迂遠な手段に堕している<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。
ただし <a href="http://ogp.me/" title="The Open Graph protocol">OGP</a> で記述したメタデータを参照するサービスは多いため,今だに SEO 対策として用いられているようだ。</p>
<p><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview" title="Summary card — Twitter Developers">Twitter Cards</a> のメタデータと置き換え可能な <a href="http://ogp.me/" title="The Open Graph protocol">OGP</a> の述語を以下に示す。</p>
<table>
<thead>
<tr>
<th style="text-align:left"><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview" title="Summary card — Twitter Developers">Twitter Cards</a></th>
<th style="text-align:left"><a href="http://ogp.me/" title="The Open Graph protocol">OGP</a></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>twitter:card</code></td>
<td style="text-align:left"><code>og:type</code></td>
</tr>
<tr>
<td style="text-align:left"><code>twitter:description</code></td>
<td style="text-align:left"><code>og:description</code></td>
</tr>
<tr>
<td style="text-align:left"><code>twitter:title</code></td>
<td style="text-align:left"><code>og:title</code></td>
</tr>
<tr>
<td style="text-align:left"><code>twitter:image</code></td>
<td style="text-align:left"><code>og:image</code></td>
</tr>
</tbody>
</table>
<p>これらの述語を既に使っている場合は <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview" title="Summary card — Twitter Developers">Twitter Cards</a> のメタデータで記述する必要はない。
なお <code>og:type</code> は本来はメディア・タイプ(MIME タイプや RDF/RDFa の語彙で定義されるタイプ)を指定するものなので <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview" title="Summary card — Twitter Developers">Twitter Cards</a> 用に使うべきではない。</p>
<p><a href="http://ogp.me/" title="The Open Graph protocol">OGP</a> は(一応) RDFa の仕様に従っているのでメタデータ指定には <code>name</code>-<code>content</code> 属性の組み合わせではなく <code>property</code>-<code>content</code> 属性の組み合わせで記述する。
例えば以下の通り<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span> <span class="na">prefix</span><span class="o">=</span><span class="s">"og: http://ogp.me/ns#"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> ...
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"og:title"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Codic API を利用するパッケージを作ってみた — プログラミング言語 Go | text.Baldanders.info"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"og:description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"spf13/viper を使ってみたかったのだ。"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">property</span><span class="o">=</span><span class="s">"og:image"</span> <span class="na">content</span><span class="o">=</span><span class="s">"https://text.baldanders.info/images/attention/go-code.png"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> ...
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span></code></pre></div><p><code><head></code> 要素に <code>prefix</code> 属性を付けるのを忘れずに(<a href="https://www.w3.org/TR/html5/">HTML5</a> の場合)。
なぜ <code><html></code> 要素ではなく <code><head></code> 要素に付けるかというと, <a href="http://ogp.me/" title="The Open Graph protocol">OGP</a> は <code><head></code> 要素外での使用を考慮していないからである。
まぁ Twitter 側はそんなこと微塵も気にしてないだろうけど。
おそらく接頭辞を <code>og</code> 以外にしたら Twitter 側は認識できなくなるんじゃないのかな(馬鹿らしいので試さない)<sup id="fnref:5"><a href="#fn:5" class="footnote-ref" role="doc-noteref">5</a></sup>。</p>
<p>ちなみに <code><head></code> 要素内の <code><title></code> 要素や <code>description</code> メタデータはまるっと無視するようである。
本当に何でこんな頭の悪い仕様になってるのか知らないが<sup id="fnref:6"><a href="#fn:6" class="footnote-ref" role="doc-noteref">6</a></sup>,最初に書いたように,いまさら Semantic Web なんか気にする人はいないだろうし,どうでもいいか。</p>
<h2>ブックマーク</h2>
<ul>
<li>
<p><a href="https://cards-dev.twitter.com/validator">Card Validator | Twitter Developers</a></p>
</li>
<li>
<p><a href="http://www.granfairs.com/blog/staff/setting-twitter-cards">ツイートにページ情報を表示する「Twitterカード(Twitter Cards)」を設定してみた | 株式会社グランフェアズ</a></p>
</li>
<li>
<p><a href="https://saruwakakun.com/html-css/reference/twitter-card">【2017年版】Twitterカードとは?使い方と設定方法まとめ</a></p>
</li>
<li>
<p><a href="https://baldanders.info/spiegel/rdfa/">RDFa 入門 — Baldanders.info</a></p>
</li>
<li>
<p><a href="https://scrapbox.io/spiegel-branch/%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AE%E5%A5%B4%E9%9A%B7">タイムラインの奴隷 - Spiegel’s Branch - Scrapbox</a></p>
</li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/483993195X?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51oaN2iq9xL._SL160_.jpg" width="124" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/483993195X?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">セマンティック HTML/XHTML</a></dt>
<dd>神崎 正英 (著)</dd>
<dd>毎日コミュニケーションズ 2009-05-28</dd>
<dd>単行本(ソフトカバー)</dd>
<dd>483993195X (ASIN), 9784839931957 (EAN), 483993195X (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">残念ながら紙の本は実質的に絶版なんですよねぇ。是非デジタル化を希望します。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2014-08-17">2014-08-17</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- セマンティック HTML/XHTML -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>この記事を書くにあたってちょっと調べたのだが「アイキャッチ」というのは和製英語なんだそうだ。ただし,コメントで頂いた情報では “<a href="https://www.merriam-webster.com/dictionary/eye-catcher" title="Eye-catcher | Definition of Eye-catcher by Merriam-Webster">eye-catcher</a>” という言葉はあるらしい(thx!)。なお “eye” は “attention” に置き換えることができるそうで,その場合は <a href="%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F%E3%81%AE%E3%80%8C%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%80%8D%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AD%A3%E3%81%97%E3%81%84%E8%8B%B1%E8%AA%9E%E3%81%A7%E3%81%AF%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%EF%BC%9F" title="アイキャッチ画像の「アイキャッチ」とは?正しい英語ではどういう?">“catch the reader’s attention” みたいな言い回し</a>になるとか。ふぅ。英語は難しいぜ。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>実は一度 <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" title="Summary with large image — Twitter Developers">Summary card with large image</a> を試したのだが,自分で眺めてやっぱりウザかったので <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary" title="Summary card — Twitter Developers">Summary card</a> にした。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>RDF/RDFa は Web 上の(URI で記述可能な)あらゆるリソース同士の関係を「主語・述語・目的語」の3つ組(triple)で表すことで machine-understandable な「意味」を与える Semantic Web の実装のひとつである。もちろん Facebook はそんな思想背景など微塵も考慮していなかったと思うが。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p><code>og:image</code> の目的語は URL なので, RDFa 仕様としては <code>property</code>-<code>content</code> 属性ではなく(<code><link></code> 要素を使って) <code>rel</code>-<code>href</code> 属性の組み合わせとするのが正しい。のだが, <a href="http://ogp.me/" title="The Open Graph protocol">OGP</a> は馬鹿なので <code>property</code>-<code>content</code> 属性とする(つまりリテラル・データとして扱う)よう求めている。私が間違ってるわけではない,決して。ホントなんだよこのクソ仕様は。ブツブツブツ… <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:5">
<p>ちなみに <code>prefix</code> 属性ではなく <code>vocab</code> 属性を使えば接頭辞が不要になる。どうなるかなんて試さないよ(笑) <a href="#fnref:5" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:6">
<p>ちなみに Facebook は <code><title></code> 要素を認識して使っている。はっきり言って <code><title></code> 要素と <code>twitter:title</code> メタデータが独立して存在してるってのは詐欺の匂いがするんだが,誰も気にしないのかね。アイキャッチ画像につられて詐欺みたいなサイトに誘導されるってのは Facebook でも見られるが(笑) <a href="#fnref:6" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>