shadcn.io is not affiliated with official shadcn/ui
SEO Health Check Snippet Preview Block for Solid
A table of six pages with title and description length meters against their ideal ranges and an Indexable word, a drawn search result for the chosen page and its issues with how much to add or cut.
Installation
Overview
Check how each page will look in search results, and what to fix, with this SEO panel for Solid with Ark UI. It is Serpwell, a technical SEO crawler, showing a typed crawl of six pages. A table gives each page two length meters, one for the title against 30 to 60 characters and one for the description against 70 to 155, with the ideal zone drawn as a band between two ticks and a hatched fill when the length is outside it, plus whether the page can be indexed. Choosing a page, with the mouse or Up and Down, draws its search result as a greyscale card: a tile, the address as a breadcrumb, the title cut at its budget with an ellipsis and the description cut at its own. Below it the page's issues say how much to add or cut ("Description too short: 13 characters. Add 57 to 142 more characters.") or that the page is blocked from search. The header counts the pages that need attention from the same checks. Guides draw the frame and its bands; the entrance is CSS only. For content audits, launch checklists and any crawler report that has to be acted on.
FAQ
How do I use my own pages?
Edit LEAVES: each page has a path, a title, a description and whether it is indexable. Lengths, the meters, the issues, the snippet and the count in the header are worked out from the text. Change TITLE_MIN, TITLE_MAX, DESC_MIN and DESC_MAX if you follow other limits.
Is the snippet exactly what search shows?
No. Search engines cut a title by its width in pixels, not by a count of characters, and may rewrite a title or pick other text for the description. The card cuts at the character budgets so you can see roughly what is lost; treat it as a guide, not a promise.
What stays local in the demo?
All of it. The pages are typed examples, nothing is crawled and nothing is requested. The chosen page is local state, and the status line says what was picked. In your app feed it the result of your crawler.
How do I move between pages with the keyboard?
The table is one tab stop on the chosen page's name. Up and Down move to the next or previous page, Enter or Space chooses it, and the polite status line reads how many issues it has. Each meter is also written as text ("8 characters, short, ideal 30 to 60").