SEO
Preview how your page looks when shared on social platforms and audit all meta tags for completeness.
Last updated:
App ID: dev-toolbar:seo
The SEO app reads the current page's <head> in real time across four tabs: live social preview cards, a meta tag audit table, a missing-tag checklist, and a JSON-LD structured data validator.
Features
- Social preview cards for 7 platforms — see exactly how your link looks when posted
- Meta tag audit — every relevant tag listed with presence/absence status
- Missing tag warnings — required tags highlighted with a warning badge
- Structured data validation — scans all
<script type="application/ld+json">blocks and validates against Schema.org rules for 10+ types - Refresh on demand — re-reads the page head without a full reload
Social Preview Tab
The Social Previews tab renders mock link-unfurl cards for each platform using the Open Graph and Twitter Card tags found in your <head>. This lets you catch wrong aspect ratios, missing images, or truncated titles before deploying.
Supported Platforms
| Platform | Tags used |
|---|---|
og:title, og:description, og:image, og:url | |
| X / Twitter | twitter:title, twitter:description, twitter:image, twitter:card |
og:title, og:description, og:image, og:url | |
| Discord | og:title, og:description, og:image |
| Slack | og:title, og:description, og:image |
| Mastodon | og:title, og:description, og:image |
| Bluesky | og:title, og:description, og:image |
Each card shows:
- OG image at the correct aspect ratio (1200×630) — or a "No image" placeholder
- URL in muted uppercase
- Title (bold, single line)
- Description (muted, up to two lines)
- Missing tags warning badge when required tags for that platform are absent
Fallback Behaviour
If a platform-specific tag is missing, the preview falls back in this order:
- Platform-specific tag (e.g.
twitter:title) - Open Graph equivalent (e.g.
og:title) - Plain
<title>or<meta name="description"> - "No title" / empty
Meta Tags Tab
The Meta Tags tab shows every relevant tag as a flat list with the raw value alongside. Required tags are flagged with a "⚠ Missing" warning when absent.
Tags Audited
| Tag | Required |
|---|---|
<title> | Yes |
<meta name="description"> | Yes |
<link rel="canonical"> | No |
og:title | Yes |
og:description | Yes |
og:image | Yes |
og:url | No |
og:type | No |
twitter:card | Yes |
twitter:title | No |
twitter:description | No |
twitter:image | No |
twitter:site | No |
Configuration
Enable via Plugin
The SEO app is disabled by default. Enable it in your Vite config:
devToolbar({
apps: {
seo: true,
},
});Structured Data Tab
The Structured Data tab scans every <script type="application/ld+json"> block in the page's <head> and validates each schema against Schema.org rules.
What it checks
Each schema is shown as an expandable card with an overall status badge (Error, Warning, Info, OK) and per-field messages. @graph arrays are expanded into individual cards, each inheriting the parent @context.
Supported Schema.org types
| Type | Required fields checked |
|---|---|
Article / NewsArticle / BlogPosting | headline (or name), author.name, datePublished (ISO 8601), image |
Product | name; at least one of offers, aggregateRating, or review; offers.price + offers.priceCurrency; aggregateRating.ratingValue + reviewCount |
BreadcrumbList | itemListElement array (≥ 2 items), sequential position, item name |
FAQPage | mainEntity array (≥ 1 item), each with name and acceptedAnswer.text |
Event / EventSeries | name, startDate (ISO 8601), location.name |
LocalBusiness / Organization | name, url, logo (suggestion) |
Person | name, url (suggestion) |
Recipe | name, image, recipeIngredient, recipeInstructions |
WebSite / WebPage | name, url |
VideoObject | name, description, thumbnailUrl, uploadDate (ISO 8601) |
All schemas are also checked for a valid @context referencing schema.org and a present @type.
Severity levels
| Icon | Level | Meaning |
|---|---|---|
| ✖ | Error | Critical issue — schema will not produce rich results |
| ⚠ | Warning | Missing recommended field — rich results may be degraded |
| ℹ | Info | Optional enhancement |
| ✔ | OK | No issues found |
The tab badge shows the count of schemas with errors (red) or warnings (amber).
Notes
- The SEO app reads from the live DOM — it always reflects the current
<head>state, including any tags injected by JavaScript after the initial load. - Use the Refresh button in the panel header to re-read the
<head>after client-side navigation or dynamic tag changes. - OG image previews make a regular
<img>request to the image URL. The image must be publicly accessible (or accessible from your dev machine) to render.