What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
For a Nuxt 4 page, set Open Graph metadata where that page’s title, description, canonical URL, and image are known. The simplest option is Nuxt’s typed useSeoMeta composable; use useHead when you want to write explicit property/content meta entries. Then inspect the returned HTML to verify the values actually rendered for the route.
Set page-specific Open Graph tags with useSeoMeta
In the page component, add the metadata in <script setup>. Replace the sample text and URLs with values for the page:
As an Amazon Associate I earn from qualifying purchases.
<script setup lang="ts">
useSeoMeta({
title: 'Article title',
description: 'A concise page description.',
ogTitle: 'Article title',
ogDescription: 'A concise page description.',
ogType: 'article',
ogUrl: 'https://example.com/articles/article-slug',
ogImage: 'https://example.com/images/article-share.jpg',
})
</script>The example follows Nuxt’s documented SEO and metadata API. Use the real canonical URL and an image that represents the page. The page title and description fields supply general metadata; the ogTitle, ogDescription, and other og keys set the Open Graph counterparts.
Choose between useSeoMeta and useHead
| API | Use it when | Open Graph syntax |
|---|---|---|
useSeoMeta |
You want a flat, typed object for SEO fields, with key names designed to help avoid mistakes such as using name instead of property. |
ogTitle: 'About Us' |
useHead |
You prefer explicit meta objects or need broader control over document-head entries. Nuxt documents reactive inputs for this API. | { property: 'og:title', content: 'About Us' } |
Here is the explicit form with useHead:
<script setup lang="ts">
useHead({
meta: [
{ property: 'og:title', content: 'About Us' },
{ property: 'og:description', content: 'Learn more about our company' },
],
})
</script>See Nuxt’s useHead reference for the explicit-property syntax and reactive head input. For route data that loads or changes, define metadata where that data is available and use the reactive form appropriate to its source. Nuxt’s useSeoMeta reference documents computed getter syntax for reactive values.
Include the protocol’s core fields
The Open Graph Protocol lists four required properties for a page: og:title, og:type, og:image, and og:url. Its specification describes og:url as the canonical URL and permanent identifier for the object. og:description and og:site_name are optional, but generally recommended. See the Open Graph Protocol specification.
Nuxt’s camel-case useSeoMeta keys correspond to the protocol fields; with useHead, write the property names literally. The structured image properties below are optional additions, not replacements for og:image:
og:image:secure_urlog:image:typeog:image:widthog:image:heightog:image:alt
Add structured image information only when it accurately describes the image. The protocol’s definitions are on its image metadata section.
Recommended Free Tools
Set shared defaults without masking page data
Nuxt supports static, site-wide head defaults through app.head in nuxt.config. That configuration cannot provide reactive data. If shared head settings need to react to application state, Nuxt recommends using useHead() in app.vue. Page-specific Open Graph values belong where the matching route or content data is known. A title template can add a shared site-name suffix.
Avoid declaring the same Open Graph field in unrelated global and page-level locations. Inspect the final rendered head to confirm that each field has the intended value for the route.
Verify the rendered head
- Open the route in a browser and view its page source, or request the page and inspect the returned HTML.
- Find the document’s
<head>and check that the intended Open Graph properties are present. - Confirm the title, description, canonical URL, and image are specific to that page, and that the image URL points to the intended asset.
- If a value is missing or unexpected, check where the route data becomes available and whether another head declaration sets the same field.
This verifies the HTML Nuxt returned. It does not guarantee that every social platform will display an identical preview; crawler behavior and preview tooling can differ.
Rank #4
Common implementation problems
- A tag is absent: Check that the composable runs in the page or component responsible for that route, and inspect the returned HTML rather than relying only on values seen in client-side application state.
- The wrong page’s metadata appears: Derive values from the current route’s data, and look for overlapping global and page-level declarations.
- An image or URL is wrong: Replace sample values with the canonical route URL and the intended image URL; verify both in the rendered head.
- Using the wrong meta attribute: With
useHead, Open Graph entries useproperty, for example{ property: 'og:title', content: 'Page title' }. The typeduseSeoMetakeys avoid writing that pair manually.
Nuxt 3 compatibility note
This guide targets Nuxt 4. Nuxt’s v3 SEO documentation identifies itself as v3.21.11 and states that Nuxt 3 reached end of life on 31 July 2026. Treat Nuxt 3 examples as version-specific legacy guidance and check the applicable support arrangement before relying on them: Nuxt 3 SEO and Meta documentation.
Or skip the browser setup
If you need a screenshot of a page to inspect or share its rendered appearance, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF; its browser capture is separate from Nuxt’s metadata configuration. The call below captures the example route as WebP. See the ScreenshotNeo API documentation for request options.
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/articles/article-slug -o shot.webpScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month, with no card required.
Quick 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.
Free tools Windows power users keep installed
One-click scans. No signup required.
