ある日、仕事で開発しているとWebアプリケーションで以下のようなコンソールエラーに遭遇しました。なんだろこれ。
[Error] TypeError: undefined is not an object (evaluating 'r["@context"].toLowerCase')
（anonymous関数） (xxxx.html:3:186)
グローバルコード (xxxx.html:3:363)
- 端末：Macbook(M2)、
- ブラウザ：Safari 16.6
他にもこんなページで同様のエラーが出ます。ほしいものなわけではない。
何が原因なのか検証してみる
@contextということから構造化データ周りなのかな？と言うことで以下だけ抽出してみてブラウザで実行します。
<html>
<head>
<script type="application/ld+json">
[
{
"@context":"http://schema.org",
"@type":"WebSite",
"url":"http://example.com/login",
"name":"bbbb",
"publisher":{
"@type":"Organization",
"name":"株式会社aaaa"
}
},
{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":{
"@id":"http://example.com/",
"name":"トップページ"
}
},
{
"@type":"ListItem",
"position":2,
"item":{
"@id":"http://example.com/login",
"name":"ログイン"
}
}
]
}
]
</script>
</head>
<body>
test
</body>
</html>
エラーが再現しました。JSON-LDの構造化データ周りの記述が問題そうです。
※ちなみにChromeで開いてもエラーになりませんし、リッチリザルトテストしても問題ないと表示されるのでJSON-LDの記述としては問題なさそう。
要素を特定する
次にどの要素でエラーが起きているか確かめます。
WebSite、BreadcrumbList、BreadcrumbListの配列のリストをそれぞれ消して見たところ、以下のようにBreadcrumbListタイプのitemListElementの配列の最後を削除した場合のみエラーが消えました。
<script type="application/ld+json">
[
~~ 省略 ~~
{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":{
"@id":"http://example.com/",
"name":"トップページ"
}
},
- {
- "@type":"ListItem",
- "position":2,
- "item":{
- "@id":"http://example.com/login",
- "name":"ログイン"
- }
- }
]
}
]
</script>
配列の指定の仕方が悪いのかもしれません。でもJSON形式的に問題ないよね・・・？
エラー解消してみる
色々試した結果、以下の２パターンでうまくいきました。
Nested Propertiesになっているプロパティ内の配列要素の最後に,を入れる
JSON-LDのNested Propertiesになっているプロパティ内の配列要素の最後に,を入れるとなぜかエラーになりません。
（Formatter導入していたら勝手に,削られてしまうかもしれませんね）
<script type="application/ld+json">
[
{
~~ 省略 ~~
},
{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":{
"@id":"http://example.com/",
"name":"トップページ"
}
},
{
"@type":"ListItem",
"position":2,
"item":{
"@id":"http://example.com/login",
"name":"ログイン"
}
- }
+ },
]
}
]
</script>
JSON-LDのNested Propertiesをやめる
こちらの場合、BreadcrumbListのitemListElementの最後の要素の後に,をつけなくても大丈夫でした。
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"WebSite",
"url":"http://example.com/login",
"name":"bbbb",
"publisher":{
"@type":"Organization",
"name":"株式会社aaaa"
}
}
</script>
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":{
"@id":"http://example.com/",
"name":"トップページ"
}
},
{
"@type":"ListItem",
"position":2,
"item":{
"@id":"http://example.com/login",
"name":"ログイン"
}
}
]
}
</script>
修正案としては2つ見つかりましたが、特定ブラウザかつユーザーに害のあるエラーではない認識なので一旦様子見しようと思います。
さいごに
推測になってしまいますが、サイトの構造化データがJSON-LDのNested Propertiesで書かれたサイトをSafariブラウザで開いた時に発生する事象なのかなと思います。
ブラウザ側の処理っぽいことと、SafariがOSSではないことからこれ以上調べることはできませんでしたが、正しい原因を知っている方がいれば教えて欲しいです！
参考
Discussion