Encited

Fix link previews and meta tags

Most AI builders give every page the same title and description, the ones from index.html. Search results then show the same line for all your pages, and links shared to Slack, X, or LinkedIn unfurl with no image and the wrong text.

This prompt creates one SEOHead component and wires it into every page with the page's own values, then removes the duplicates that would override it.

When you need this#

Run it if any of these are true:

  • Every page in Google shows the same title or description.
  • A link to your site pastes into Slack or X with no preview image.
  • Your pages have no rel="canonical", or every canonical points at the homepage.
  • You have meta tags set in both index.html and inside components, and you are not sure which wins.

Skip it if you already have per-page meta tags and previews render correctly. Paste a URL into the OG Image Previewer to check before you run anything.

The prompt#

I want you to add meta tags on all pages in this codebase. To do that, I need you to do the following and after finishing it all, review one more time of all changes and provide a summary of the changes you made.

Tasks:
1. Create an SEOHead component using react-helmet-async that takes title, description, canonical, ogImage, and noIndex as props. Use that component on every page before the main tag with page-specific values. Use page's title, description, and canonical from frontmatter or content in the page (i.e., h1 as title, first paragraph as description, and first image as og:image and page's URL as canonical link).
2. Scan all pages for directly set meta tags that override the ones set in the SEOHead component. If found, remove them and set the values from the SEOHead component.
3. Check index.html <head> section to make sure it does not contain any tags that are being set through the SEOHead component. If found, remove them. index.html cannot have title, description, robots, rel="canonical" and any of the og: or twitter: tags.

What it changes#

  • Adds react-helmet-async and an SEOHead component taking title, description, canonical, ogImage, and noIndex.
  • Puts that component on every page with values taken from the page itself: the H1 as title, the first paragraph as description, the first image as og:image.
  • Strips competing tags from index.html and from individual components, so one place controls the output.

After you run it#

Check the result rather than trusting the summary. Run the Meta Tag Audit on two or three pages and confirm each returns its own title, description, and canonical.

One catch worth knowing: react-helmet-async writes these tags with JavaScript after the page loads. A browser sees them. Crawlers that do not run JavaScript see whatever was in the original HTML. If your pages are client-rendered, add pre-rendering so the tags are in the HTML crawlers actually receive.

Alternatives#

  • Set the tags by hand. Fine for a five-page site, and you keep full control of each string. The prompt earns its keep somewhere past a dozen pages.
  • Use your framework's own head API. Next.js metadata exports, Nuxt's useHead, and similar render tags server-side, so no separate pre-rendering step is needed. Prefer these when your stack has them.
  • Let Encited rewrite them. If editing the codebase is not an option, pre-rendering can serve corrected metadata to crawlers from the snapshot.