やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

JSON-LDを外部ファイル化して読み込みたいが失敗(linkタグ編)

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はどうやって取得すればいいのかわからなかった。 もしかしたらこの方法ではできないのかもしれない。

所感

たかが外部ファイル化するだけなのに、すぐ解決できない。もどかしい。