{"slug": "why-google-can-t-see-your-react-breadcrumbs-and-the-4-line-fix", "title": "Why Google Can't See Your React Breadcrumbs (And the 4-Line Fix)", "summary": "The article explains that Google's crawler often fails to recognize breadcrumbs in React apps because the structured data (JSON-LD schema) is embedded in client-rendered markup, which is unreliable for rich results. The solution is to inject a separate JSON-LD script into the `` of each page, using a custom React hook or server-side rendering with Next.js, to ensure Google can properly parse the breadcrumb schema. This four-line fix allows developers to achieve rich results in Google Search without relying on visible DOM elements.", "body_md": "I wasted an entire afternoon wondering why Google Search Console kept showing zero rich results for my React app. The breadcrumbs looked perfect in the browser. Users could see them. But Google? Completely blind. The problem wasn't my breadcrumb component it was that I'd never told Google *what* those breadcrumbs actually were. Structured data. Four lines of JSON-LD. That was it. Here's everything I learned, so you don't lose the same afternoon.\n\n## Why React Breadcrumbs Are Invisible to Google\n\nReact apps render in the browser. Google's crawler is getting better at parsing JavaScript, but structured data embedded in client-rendered markup is still unreliable for rich results. The gold standard for breadcrumb rich results in Google Search is **JSON-LD schema markup** injected into ``\n\nnot your visible DOM breadcrumb trail.\n\nThe two things are completely separate:\n\n-\n**Your breadcrumb UI component** what users see -\n**Breadcrumb Schema markup** what search engines read\n\nMost tutorials show you how to build the UI. Almost none explain the schema side. That's why your breadcrumbs look fine to you but don't show up as rich results in Google.\n\nHere's what a valid `BreadcrumbList`\n\nschema looks like, per Schema.org:\n\n```\n{\n \"@context\": \"https://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n {\n \"@type\": \"ListItem\",\n \"position\": 1,\n \"name\": \"Home\",\n \"item\": \"https://example.com\"\n },\n {\n \"@type\": \"ListItem\",\n \"position\": 2,\n \"name\": \"Blog\",\n \"item\": \"https://example.com/blog\"\n },\n {\n \"@type\": \"ListItem\",\n \"position\": 3,\n \"name\": \"My Article\",\n \"item\": \"https://example.com/blog/my-article\"\n }\n ]\n}\n```\n\nYour job is to get *exactly this* into a `