---
title: "#nextjs — seo-mcp"
description: "SEO tips tagged Next.js."
url: "https://seo-mcp.io/tag/nextjs"
---

# #nextjs

9 published tips tagged “Next.js”.

- [Generate social images with opengraph-image.tsx](https://seo-mcp.io/t/generate-social-images-with-opengraph-image-tsx) — The App Router reads opengraph-image files as social cards for each route. Export a small ImageResponse component that renders the title and brand, set size and contentType, and add route-level files where the default card is wrong. Confirm the rendered tags point at the generated image and that the image returns 200 with the expected dimensions.
- [Serve responsive images with next/image](https://seo-mcp.io/t/serve-responsive-images-with-next-image) — next/image emits responsive srcset values, picks modern formats and prevents layout shift when width and height are known. Replace raw img tags on content pages, pass sizes for each layout width, mark the LCP image priority, and keep alt text meaningful. Check the rendered HTML for srcset and intrinsic dimensions rather than trusting the component defaults.
- [Add canonical URLs with the Next.js Metadata API](https://seo-mcp.io/t/add-canonical-urls-with-the-next-js-metadata-api) — Next.js App Router resolves metadata per route, so each page can declare its own canonical URL instead of inheriting one global value. Set alternates.canonical in the page metadata export or generateMetadata, keep it absolute and self-referencing, and make sure template redirects and trailing-slash handling agree with the URL you declare.
- [Ship app/sitemap.ts and app/robots.ts](https://seo-mcp.io/t/ship-app-sitemap-ts-and-app-robots-ts) — Next.js App Router turns app/sitemap.ts and app/robots.ts into /sitemap.xml and /robots.txt at build time. Return only canonical, indexable URLs from sitemap.ts with honest lastModified values, and set the rules plus the sitemap location from robots.ts. Both files must be reachable without authentication and must not be shadowed by static files in public/.
- [Load fonts with next/font to avoid layout shift](https://seo-mcp.io/t/load-fonts-with-next-font-to-avoid-layout-shift) — next/font downloads and self-hosts Google or local fonts at build time, generates size-adjust fallbacks and removes the render-blocking stylesheet request. Import the font in the layout, pass its className to the html element, and reference the CSS variable in styles. Verify with a throttled trace that text does not shift and that no font request leaves your origin.
- [Return true 404s with notFound()](https://seo-mcp.io/t/return-true-404s-with-notfound) — A route that renders an empty template with status 200 is a soft 404: crawlers index it and users see nothing. Call notFound() when a record is missing or the slug is invalid, add app/not-found.tsx for the layout, and confirm the response status over HTTP. Keep redirects for moved content and reserve notFound() for genuinely absent pages.
- [Move redirects into next.config redirects()](https://seo-mcp.io/t/move-redirects-into-next-config-redirects) — next.config redirects run before rendering and return 308 for permanent rules, so old URLs keep their signals without shipping JavaScript. Move server-side redirect maps into redirects(), mark permanent changes permanent, scope rules with has and missing, and keep temporary campaigns separate. Verify with curl that each old path returns one hop and the expected status.
- [Add BlogPosting JSON-LD in a server component](https://seo-mcp.io/t/add-blogposting-json-ld-in-a-server-component) — Article markup helps Google understand headline, author, publish date and image, and feeds both rich results and AI answers. In a Next.js App Router project, render a JSON-LD script inside the blog page server component from the same fields the page displays. Keep the markup valid and identical to the visible content.
- [Write unique titles and descriptions in Next.js](https://seo-mcp.io/t/write-unique-titles-and-descriptions-in-next-js) — Next.js resolves metadata from the page up to the layout, so a title set once in the root layout repeats on every route. Export a title and description per page, or generate them from record data in generateMetadata. Use title.template for the site suffix, keep descriptions unique, and verify the rendered HTML rather than the component source.