JSON-LDを外部から読みたい。
問題提起
以前、JSON-LDを外部ファイルから参照しようとしたが、読み込めなかった。
このままでは異なるHTMLファイルを作るたびに同じJSON-LDをハードコーディングせねばならなくなる。
- 重複した情報を何度も書いた分だけ無駄にファイルサイズが増える
- 修正するためにはすべてのハードコーディングした箇所を編集せねばならない
調べてみた
StackOverflow
“json-ld src"で検索。StackOverflowに回答があった。
NG
<script type="application/ld+json" src="/myid123/jsonld.js"></script>
OK
<link href="/myid123/jsonld.js" rel="alternate" type="application/ld+json" />
翻訳してみると、データとして使うときは<script src="...">
を使ってはいけないらしい。
かわりに<link href="">
を使うらしい。
ちなみにjsonldのファイル拡張子は.jsonld
である。
StackOverflowで質問しているコードはなぜかファイル拡張子が.js
になっている。
仕様書で「拡張子」と文字列検索すると見つかる。
早速やってみた。
ソースコード
person.jsonld
{ "@context": "http://schema.org", "@type": "Person", "name": "ytyaru", "url": "https://github.com/ytyaru", "sameAs": ["http://ytyaru.hatenablog.com/about"] }
main.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link id="person-ld" href="./person.jsonld" rel="alternate" type="application/ld+json" /> <script type="text/javascript" src="./loadJsonLD.js"></script> </head> <body> </body> </html>
loadJsonLD.js
window.onload = function () { console.log(document.getElementById('person-ld')); console.log(document.getElementById('person-ld').innerText); //undefined console.log(document.getElementById('person-ld').text); //undefined };
分析
link要素をDOMで取得することはできた。 しかし肝心の中身、JSON-LDはどうやって取得すればいいのかわからなかった。 もしかしたらこの方法ではできないのかもしれない。
所感
たかが外部ファイル化するだけなのに、すぐ解決できない。もどかしい。