SShortSingh.
Back to feed

Next.js JSON-LD served via next/script stays hidden from most web crawlers

0
·1 views

A developer discovered that using Next.js's next/script component to inject JSON-LD structured data causes it to be rendered client-side after hydration, making it invisible to crawlers that parse only raw server-sent HTML. The issue went undetected because browser DevTools and popular schema validators use a live or JavaScript-rendered DOM, masking the problem from standard debugging workflows. Tools like Bing, social card scrapers, and many LLM crawlers do not execute JavaScript, meaning structured data injected this way never reaches them. The fix is straightforward: replace next/script with a plain HTML script tag, which React renders directly into the server HTML on the first pass, regardless of whether the component is a server or client component. Developers can verify the fix by running a curl command against their production build and checking for the presence of application/ld+json in the raw HTML response.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingDEV Community ·

How Machine Learning Can Help NGOs Allocate HIV Resources Where They Matter Most

Healthcare NGOs implementing HIV programmes often face resource constraints, making it difficult to serve all communities equally. Machine learning, a branch of artificial intelligence, can analyse community-level data — such as ART coverage, testing rates, and missed appointments — to identify where programme gaps are greatest. By converting broad resource questions into measurable classification problems, models can categorise communities by need level, from low to high. This data-driven approach helps organisations direct limited supplies, staff, and outreach efforts toward communities with the most critical unmet needs. Ethical data selection and relevant variable choice are emphasised as essential steps before building any such model.

0
ProgrammingDEV Community ·

Why Cursor AI cannot reach localhost and how to fix it with a public tunnel

Cursor routes all chat and agent requests through its remote cloud servers at api2.cursor.sh, meaning any OpenAI Base URL set to localhost is resolved against the remote server's loopback interface, not the user's machine. This causes requests to Ollama, LiteLLM, LM Studio, or custom proxies running on local ports to silently fail, with Cursor showing connection errors while local logs remain completely empty. The root cause differs from tools like Aider or Continue.dev, which send LLM API calls directly from the user's local process. The fix requires exposing the local port over a public URL, which can be done using a Cloudflare tunnel that maps a public HTTPS address to the local service. Replacing the localhost URL in Cursor's model settings with the public tunnel address immediately allows the remote backend to reach the local proxy.

0
ProgrammingDEV Community ·

Developer Releases Open-Source Coordination Layer to Fix Multi-Agent AI State Conflicts

A developer building multi-agent AI systems has released Network-AI, an open-source coordination layer designed to prevent silent state conflicts that occur when multiple AI agents read and write shared data simultaneously. The core problem arises when two agents read the same shared context at the same time and one agent's write overwrites the other's without triggering any error. Network-AI addresses this by routing all state changes through a propose-validate-commit cycle that ensures atomic, conflict-free updates. The tool supports 14 frameworks including LangChain, AutoGen, and CrewAI, and also offers token budget controls, role-based permissions, and a full audit trail. The project is available under the MIT license on GitHub.

0
ProgrammingDEV Community ·

Developer Builds Jollof Rice Landing Page with Interactive Bottom-Pot Crust Dial

A frontend developer has created a landing page called 'This Is Jollof' as a submission for the Frontend Challenge - Comfort Food Edition. Built with React, the site celebrates jollof rice and centres on the 'bottom pot' crust — the crispy, caramelized layer considered the most prized part of the dish. Its standout feature is the Bottom Pot Dial, an interactive slider that updates a pot illustration, headline copy, and an 'argument likelihood' stat in real time based on the user's preferred crust level. The colour palette was drawn directly from the dish — pot-iron black, stew red, and scorched amber — rather than generic food-site aesthetics. The developer also prioritised accessibility, incorporating visible focus states, ARIA labels, and a reduced-motion fallback for animations.

Next.js JSON-LD served via next/script stays hidden from most web crawlers · ShortSingh