solid-meta-patterns

Manage head tags declaratively in SolidJS applications with reactive updates.

Updated Jan 4, 2026
One-click install
npx skills add https://github.com/vallafederico/solid-ai-rules --skill solid-meta-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: solid-meta-patterns
Source: https://github.com/vallafederico/solid-ai-rules/tree/main/.claude/skills/solid-meta-patterns
Command: npx skills add https://github.com/vallafederico/solid-ai-rules --skill solid-meta-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of managing head tags (like <title>, <meta>, <link>) in SolidJS applications, ensuring proper SEO, social sharing, and browser compatibility.

Core Features & Use Cases

  • Head Tag Management: Provides components and hooks to declaratively manage head tags.
  • SEO Optimization: Easily set titles, descriptions, and canonical URLs for search engines.
  • Social Sharing: Configure Open Graph and Twitter Card meta tags for rich previews on social media.
  • Dynamic Content: Supports reactive meta tags that update based on application state.
  • Use Case: When building a product page, use this Skill to dynamically set the <Title> to the product name and add Open Graph tags with the product image and description for sharing on platforms like Twitter or Facebook.

Quick Start

Wrap your application with <MetaProvider> in your root layout file.

Frequently Asked Questions about solid-meta-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage head tags like title and meta in SolidJS for SEO?

Managing head tags in SolidJS involves declaratively configuring title, meta, link, and style components. This approach ensures proper SEO optimization and browser compatibility by dynamically updating tags based on application state.

Can I dynamically update Open Graph tags in SolidStart based on route data?

Yes, you can dynamically update Open Graph tags in SolidStart. The Skill supports reactive meta tags that update via signals and provides route-scoped metadata, allowing rich social media previews based on current application data.

What is the best way to set up Twitter Card meta tags in a SolidJS app?

The best way to set up Twitter Card meta tags in SolidJS is through declarative configuration. You wrap your application with a MetaProvider and use specific components to define tags like twitter:card for rich social sharing previews.

Does SolidStart head tag management support route-scoped metadata?

Yes, SolidStart head tag management supports route-scoped metadata. This allows you to configure specific title, meta, and link tags for individual routes, ensuring search engines and social platforms index the correct page information.

Why do I need a MetaProvider to configure social sharing tags in SolidJS?

You need a MetaProvider to configure social sharing tags because it establishes the context for managing head tags within your SolidJS application. This setup enables the declarative configuration of Open Graph and Twitter Card tags for accurate social previews.

How do I add a canonical URL and meta description in SolidJS?

To add a canonical URL and meta description in SolidJS, you use declarative head tag components within your layout. This facilitates SEO optimization by ensuring search engines understand the preferred page version and content summary.