Json LD - Breadcrumbs - Logic for 3 or more path-levels in url

Question

i have this component for add Json LD schema to my pages. Works great for urls like mysite.com/page or mysite.com/page/subpage... but, if i access to mysite.com/page/subpage/another-page, last schema thing is wrong : says mysite.com/subpage/another-page instead mysite.com/page/subpage/another-page

I know that problem is here const url = index === 0 ? `${baseURL}/${segment}` : `${baseURL}/${segments[index - 1]}/${segment}`; but i don't know how to make it works for segments higer than 2 levels. Could somebody help me please?

// Scripts
import { capitalizeEachWord } from "@/src/utils/utils";
import { scriptBodyUnencoded } from "@/src/components/functions/scriptFunctions";

const SCRIPT_BODY = dynamicSlug => {
  const slug = dynamicSlug.substring(1);
  const segments = slug.split("/");

  const baseURL = `${process.env.CW_BASE_URL}`;

  return `
    {
      "@context": "http://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@type": "Thing",
            "@id":  "${baseURL}",
            "name": "Home",
            "image": ""
          }
        },    
        ${segments.map((segment, index) => {
    const url = index === 0 ? `${baseURL}/${segment}` : `${baseURL}/${segments[index - 1]}/${segment}`;
    return `
          {
              "@type": "ListItem",
              "position": ${index + 2},
              "item": {
                "@type": "Thing",
                "@id": "${url}",
                "name": "${capitalizeEachWord(segment.toLowerCase().replace(/-/g, " "))}",
                "image": ""
              }}`;
  })}
      ]
    }
  `;
};

const JsonLdDynamicBreadcrumbComponent = ({
  dynamicSlug,
}) => {
  try {
    return (
      <script
        dangerouslySetInnerHTML={{
          __html: scriptBodyUnencoded(SCRIPT_BODY(dynamicSlug)),
        }}
        id="JsonLdDynamicBreadcrumbComponent"
        type="application/ld+json"
      />
    );
  } catch (error) {
    {/* eslint-disable-next-line react/jsx-no-useless-fragment -- need to return empty fragment*/ }
    return <></>;
  }
};

export default JsonLdDynamicBreadcrumbComponent;

traynor · Accepted Answer · 2022-09-09 19:57:31Z

0

while iterating, try joining all segments until the current by its index:

try:

${segments.map((segment, index) => {
    const url = `${baseURL}/${segments.slice(0, index+1).join('/')}`;
    //..

edited Sep 9, 2022 at 19:57

answered Sep 9, 2022 at 19:27

traynor

10.4k3 gold badges15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Json LD - Breadcrumbs - Logic for 3 or more path-levels in url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related