Zenn
👾

Next.jsで構造化データ(application/ld+json)にハマった

2024/09/03に公開
Next.js
structureddata
tech

Next.js (Pages Router)のウェブサイトに構造化データを導入したが、Google Search Consoleでこのようなエラーが出てしまった。

「}」またはオブジェクト メンバーの名前がありません。

結論

クォーテーションとかカンマとかスペースとかではなく、以下の問題だった。

ダメコード

<script/>にベタ書きしていた。

import Head from 'next/head';
// 色々と略
<Head>
    <script type="application/ld+json">
        {JSON.stringify(structuredData)}
    </script>
</Head>

よいコード

dangerouslySetInnerHTMLを使った。

import Head from 'next/head';
// 色々と略
<Head>
    <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
</Head>

環境

- Next.js 14.2.7
- Pages Router
- next/head を使用
- getStaticProps を使用

解決までの道

マークアップ検証ツールで検証

Schema.orgのスキーマ マークアップ検証ツールで新しいテストを実行->URLを取得。


左下に対象の構造化データが見える

ん？構造化データは取得できているのに、別件でエラーがある？


右にスクロールした。右上にHTMLエスケープされたものを発見。

よく見ると、先ほどのld+json(1枚目の写真)とは別に、右上にHTMLエスケープされたものがある。これが原因では？

該当のscriptを編集してみる

試しに、構造化データのJSONの挿入方法を変えてみた。

import Head from 'next/head';
// 色々と略
<Head>
    // こうだったのを
    <script type="application/ld+json">
        {JSON.stringify(structuredData)}
    </script>

    // こうした
    <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
</Head>

解決した！

注意(ハマったこと)

新しいテストを実行->コード スニペットという機能もあるが、これは罠。今回はnext/headの仕様かわからないが、ブラウザで対象のページから<head/>をコピペした時にはエラーが起きなかった。

推測だが、Next.jsが最終的なHTMLを生成する過程で変なHTML(構造化データ部分)を出力し、それが悪さしているようだった。

Discussion