In one sentence
The snippets tool fills one set of values (title, description, image, alt text, URL and X handles) into ready-to-paste card code for plain HTML, Next.js, Astro, Hugo and WordPress.
How do I use the snippets?
Fill in the fields once, pick your framework tab and copy. Every tab uses the same values, so you can compare how each stack expresses the same card. The line above the code says which file the snippet belongs in.
What each tab gives you
Each snippet is the smallest correct setup for that stack, not a full SEO configuration.
| Tab | What you get | Where it goes |
|---|---|---|
| HTML | Full twitter: and og: meta tags with width, height and alt | <head> of the page |
| Next.js | A typed metadata export with openGraph and twitter objects |
app/layout.tsx or a route's page.tsx |
| Astro | A SocialMeta.astro component that builds absolute URLs from Astro.site |
src/components/, used in your layout |
| Hugo | params.images, per-page front matter and the embedded template calls |
hugo.toml, content files, baseof.html |
| WordPress | Yoast and Rank Math settings, plus a small wp_head hook for themes without a plugin |
Admin screens or a child theme's functions.php |
Next.js notes
In the App Router, export metadata (or generateMetadata) from a server component and Next.js writes the tags for you. The twitter object maps to twitter: tags: card, site, creator, title, description and images. URLs must be absolute unless you set metadataBase in the root layout, in which case relative paths are joined to it; a relative path without metadataBase is a build error. Next.js also supports file-based images: a twitter-image.png or opengraph-image.png placed in a route folder is picked up automatically and wins over the config object.
Astro and Hugo notes
Astro has no built-in card helper, so the snippet is a small component. Set site in astro.config.mjs, otherwise Astro.site is undefined and the URLs cannot be made absolute.
Hugo's embedded templates read the page's images front matter first, then the site's params.images, and the twitter_cards.html template uses summary_large_image when an image is found. Check your Hugo version's documentation if the output differs; the embedded templates have changed a few times.
WordPress notes
If you already run Yoast SEO or Rank Math, use the plugin and do not add tags by hand, or you will get duplicates. The functions.php snippet is only for themes that output nothing. The WordPress guide covers the plugin screens in more detail, along with the caching plugins that sometimes serve stale tags.
Questions
Does Next.js need both openGraph and twitter in metadata?
If you only set openGraph, X can fall back to the og: tags for title, description and image, but you still need twitter.card to choose summary_large_image. Setting the twitter object explicitly, as the snippet does, is clearer.
Where do Yoast and Rank Math put the card settings?
Yoast: Settings > Site features > Social sharing > X card data, and per post under Social media appearance. Rank Math: Titles & Meta > Global Meta > Twitter Card Type, and per post in the Social tab under Twitter. The WordPress tab spells out each step.
What changed in Hugo?
Hugo ships embedded opengraph and twitter_cards templates. Current versions include them with partial "twitter_cards.html"; older sites use template "_internal/twitter_cards.html". The snippet shows both.
Are image URLs made absolute?
The HTML and Next.js snippets use the absolute URL you type. The Astro snippet builds an absolute URL from Astro.site, and Next.js can do the same with metadataBase. Crawlers need absolute URLs.