Code appears on render, but doesn't appear on the source code

21 views Asked by At

I am trying to add an organization schema to my website.

When I check it from https://validator.schema.org/, it works. However, when I right click and see the source code, it doesn't appear, which avoids search engine bots to see it.

Here is my logic:

const jsonLd = {
  // its content
};
const blogJsonLd = {
  // its content
};
const breadcrumbListJsonLd = {
  // its content
};

if (pathname === "/") {
  jsonLdToRender = jsonLd;
} else if (pathname.includes("/blog/")) {
  jsonLdToRender = blogJsonLd;
} else {
  jsonLdToRender = breadcrumbListJsonLd;
}

return (
  <html lang="en">
    <head>
      <Script
        id="jsonLd-script"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdToRender) }}
      />
    </head>
    {/* web page content */}
  </html>
);

So, what could be the problem?

0

There are 0 answers