Hi @mighty fjord. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Customize URL display in search results metadata
onyx starBOT
The way your site's URL (the "breadcrumb" or "display URL") appears in search results—such as showing "LinkedIn Dorian Grasset" instead of just "linkedin.com"—is not directly controlled by any metadata field in Next.js or in your HTML. Search engines like Google and LinkedIn generate this display based on their own algorithms, site structure, and sometimes structured data (like Breadcrumb schema).
Key points from the knowledge sources:
- The
applicationNamefield in Next.js metadata adds an<meta name="application-name" ...>tag, but this is not used by search engines to change the display of your domain in search results. It may appear in some browser UIs or as a prefix in some contexts, but not as the visible URL in search results see example output. - The
openGraph.siteNamefield is used for social sharing previews (e.g., Facebook, LinkedIn, Twitter cards), not for search engine result URLs see Open Graph docs. - The
alternates.canonicalandmetadataBasefields help search engines understand the canonical URL for your page, but do not affect the display name of your domain in search results see metadataBase docs.
What actually controls the display URL in search results?
- Search engines (like Google) decide how to display your site's URL or breadcrumb. You can influence this with structured data, but not with standard meta tags or Open Graph fields.
- For Google, you can use Breadcrumb structured data (JSON-LD or microdata) to suggest how breadcrumbs should appear. However, the final display is up to the search engine.
- For LinkedIn and other social platforms, the
siteNamein Open Graph metadata can affect the preview card, but not the search result URL.
Summary:
You cannot control the display of your domain name in search results using Next.js metadata fields. This is managed by search engines and social platforms, sometimes influenced by structured data (like Breadcrumb schema), but not by applicationName, siteName, or other standard meta tags. For more control, you would need to use external SEO tools (like Google Search Console) and implement structured data, but even then, the final display is at the discretion of the search engine see Metadata Fields see Open Graph.
If you want to try influencing breadcrumbs, consider adding Breadcrumb structured data to your pages, but be aware that this is only a suggestion to search engines, not a guarantee.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the knowledge sources, your approach to adding JSON-LD structured data in Next.js is correct in principle, but the key detail is how you inject the JSON-LD into your HTML. According to the official Next.js documentation, you must render the JSON-LD as a <script type="application/ld+json"> tag, and you should sanitize the output to avoid XSS issues. Here’s the recommended way:
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
}}
/>
Make sure this script tag is actually rendered in your final HTML output, ideally inside your layout or page component. If you only define the jsonLd object but do not render it as shown above, search engines will not detect any structured data How to implement JSON-LD in your Next.js application.
Checklist:
- Ensure the
<script type="application/ld+json">is present in your rendered HTML. - Validate your page source (CTRL+U) to confirm the script is there and contains your JSON-LD.
- Use the Rich Results Test again after confirming the above.
If you follow this pattern and still see "No element detected," double-check that the page you are testing is publicly accessible and not blocked by robots.txt or authentication.
Summary:
You must render your JSON-LD as a <script type="application/ld+json"> tag in your component’s output. Defining the object alone is not enough for search engines to detect it How to implement JSON-LD in your Next.js application.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you again. Give me one moment! :books:
Given your follow-up, you are correctly rendering the JSON-LD as a <script type="application/ld+json"> tag, and it appears in your page source. However, the Rich Results Test still reports "No element detected."
Based on the knowledge sources, here are the key points and possible reasons:
-
Correct Placement and Format
You are following the recommended approach for JSON-LD in Next.js: rendering a<script type="application/ld+json">with your structured data object, as shown in the official documentation How to implement JSON-LD in your Next.js application. -
No Mention of Next.js Script Component
The documentation does not mention using the Next.js<Script>component for JSON-LD. It shows a plain<script>tag. If you are using the Next.js<Script>component, it may add attributes likedata-nscript="afterInteractive", which are not mentioned in the official JSON-LD guide. The knowledge sources do not confirm whether this affects detection by Google's tools. -
No Information on Google Rich Results Test Compatibility
The knowledge sources do not provide details on whether the presence of extra attributes (likeidordata-nscript) or the use of the Next.js<Script>component could interfere with Google's Rich Results Test. They only show the use of a plain<script>tag. -
No Troubleshooting Steps for This Issue
There is no explicit troubleshooting advice in the knowledge sources for cases where the script is present but not detected by Google's tool.
Summary:
You are following the documented approach for JSON-LD in Next.js. The knowledge sources do not provide enough information to explain why Google's Rich Results Test is not detecting your structured data, nor do they clarify if using the Next.js <Script> component (with its extra attributes) could cause issues. If you want to ensure maximum compatibility, you might try rendering a plain <script> tag as shown in the documentation, but the sources do not guarantee this will resolve the issue.
If you need further troubleshooting, the knowledge sources do not contain enough information to provide a definitive answer.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
onyx starBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the knowledge sources, your implementation of JSON-LD using a plain <script type="application/ld+json"> tag with dangerouslySetInnerHTML is correct and matches the official Next.js documentation (How to implement JSON-LD in your Next.js application). The documentation specifically recommends this approach and notes the importance of sanitizing the output, which you are doing with .replace(/</g, '\\u003c').
However, the documentation does not specify any requirement for the script to be in the <head> or <body>, nor does it mention any known issues with Google Rich Results Test not detecting the JSON-LD when rendered this way. It simply states that you should render the script tag in your layout or page component.
If the Rich Results Test is still reporting "No element detected" despite the script being present in your HTML, the knowledge sources do not provide further troubleshooting steps or reasons for this behavior. There is no mention of additional requirements, limitations, or known issues with the Rich Results Test and Next.js-rendered JSON-LD.
Summary:
- Your code matches the official Next.js recommendation for JSON-LD.
- The knowledge sources do not explain why the Rich Results Test is not detecting your structured data.
- There is no information in the sources about placement (head vs. body) or incompatibility with the Rich Results Test.