Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteFor a Nuxt 4 site, use useSeoMeta() to add Open Graph tags: define site-wide defaults in app/app.vue, then set route-specific values in each page or from that page’s content. At minimum, provide og:title, og:type, og:image and og:url; add a concise description and image alt text as well. Nuxt 3 reached end of life on 31 July 2026, so the examples below target Nuxt 4.
Use useSeoMeta for Open Graph tags in Nuxt 4
Nuxt recommends useSeoMeta() for adding meta tags. Its typed, semantic fields help avoid mistakes such as using a name attribute where a property attribute is required. For Open Graph, the composable accepts fields such as ogTitle, ogType, ogImage, ogUrl and ogDescription. See the Nuxt useSeoMeta API reference.
Add defaults for the whole site
Put values shared across your application in app/app.vue. Replace the example domain and image with URLs belonging to your site.
<!-- app/app.vue -->
<script setup lang="ts">
useSeoMeta({
ogSiteName: 'Example Site',
ogType: 'website',
ogTitle: 'Example Site',
ogDescription: 'A short description of this website.',
ogUrl: 'https://example.com/',
ogImage: 'https://example.com/social-card.jpg',
ogImageAlt: 'Example Site homepage preview',
})
</script>These defaults are useful for the homepage and as a fallback for pages that do not define their own metadata. Set the page’s canonical URL and image explicitly wherever they differ from the site-wide values.
#1 Best Overall
Set metadata from page content
In a page component, derive the metadata from the content for the current route. This example assumes your application has loaded an article into article; loadArticleForCurrentRoute() is illustrative pseudocode, not a Nuxt API. Replace it with your project’s data-loading logic.
<!-- app/pages/articles/[slug].vue -->
<script setup lang="ts">
const article = await loadArticleForCurrentRoute()
useSeoMeta({
ogType: 'article',
ogTitle: () => article.value.title,
ogDescription: () => article.value.summary,
ogUrl: () => `https://example.com/articles/${article.value.slug}`,
ogImage: () => article.value.socialImage,
ogImageAlt: () => article.value.socialImageAlt,
})
</script>Nuxt documents getter functions for values that can change reactively. Use a canonical URL for the current page and an image URL that is absolute and publicly reachable. The Open Graph Protocol defines og:url as the object’s canonical URL and permanent graph identifier.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Which Open Graph properties should you include?
The Open Graph Protocol specifies four required properties for every page. In useSeoMeta(), their field names use camel case:
| Protocol property | Nuxt field | What to supply |
|---|---|---|
og:title |
ogTitle |
The page or content title used in the preview. |
og:type |
ogType |
The object type, such as website or article. |
og:image |
ogImage |
An absolute URL to the preview image. |
og:url |
ogUrl |
The canonical URL identifying that page or object. |
og:description |
ogDescription |
A concise description; the protocol makes it optional, but it is generally recommended. |
og:image:alt |
ogImageAlt |
A description of the image itself, not a caption. |
The protocol says that when a page specifies og:image, it should also specify og:image:alt. It defines image subproperties for MIME type, pixel width and height, too. Nuxt’s SEO guide demonstrates an image URL but does not prescribe dimensions, so do not assume one size is a universal requirement across platforms. Read the Open Graph Protocol specification.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
Choose between useSeoMeta, useHead and app.head
| Approach | Use it when | Trade-off |
|---|---|---|
useSeoMeta() |
You want typed, semantic SEO fields, including common Open Graph tags. | Nuxt’s recommended concise option for SEO metadata. |
useHead() |
You need lower-level control over document-head objects or reactive head values. | You express Open Graph tags in a meta array, including property attributes. |
app.head in nuxt.config.ts |
You need static application-wide defaults. | It cannot contain reactive data; use a composable for route-aware values. |
For example, the lower-level useHead() form uses property for Open Graph tags:
useHead({
meta: [
{ property: 'og:title', content: 'Example page' },
{ property: 'og:description', content: 'A short page description.' },
],
})Nuxt documents useHead() as accepting reactive values; see the useHead API reference. For static head configuration and application-level defaults, see the Nuxt SEO and meta guide.
Check the rendered head when a preview is wrong
If a social preview is missing or appears to use old metadata, inspect the rendered HTML document’s <head> for the current route. Confirm that the four required properties are present and that the canonical page URL and image URL are the intended values. This checks what your Nuxt page actually emits before investigating how a particular platform handles it.
- A tag is absent: check that the composable runs in the relevant app or page component and that the route-specific content has loaded.
- The wrong route’s title or image appears: derive the values from the current page data and give each page its own canonical URL.
- The image does not load: confirm the value is an absolute, publicly reachable URL rather than a local or relative path.
- The preview remains stale after the head is correct: the documentation and protocol cited here do not establish crawler-specific cache or rendering behavior, so check the relevant platform’s current preview-debugging guidance.
Or skip the browser setup
If you need to capture a page while checking its rendered appearance, ScreenshotNeo can return a screenshot with one GET request. The response supports PNG, JPEG or WebP, or a PDF. Its cleanup can accept consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for AI agents.
Recommended Free Tools
cURL example (replace the target URL with the page you want to inspect):
Best Value
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for setup and options. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo.
Frequently Asked Questions
Does useSeoMeta set the Open Graph property attribute correctly?
Yes. Its typed SEO fields are designed to produce the appropriate metadata attributes, avoiding common name-versus-property mistakes.
Can I use a different Open Graph image on every Nuxt page?
Yes. Define page-level metadata from the content for that route, including its own absolute image URL and alt text.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
