Directory
- Welcome
Head Component
The Head component manages your document’s <head> section, providing a comprehensive solution for SEO, meta tags, social sharing, font loading, and site-wide configurations.
Key Features
-
SEO Optimization: Meta tags, canonical URLs, and robots directives
-
Social Sharing: OpenGraph and Twitter card metadata
-
Font Management: Optimized web font loading with WOFF2 and subsetting
-
Theme Handling: Dark mode detection and persistence
-
View Transitions: Astro’s built-in page transition system
Head Meta Interface
| Property | Type | Description |
|---|---|---|
| title | string | Page title |
| description | string | Page description |
| index | boolean | Control search engine indexing |
| viewTransitions | boolean | Enable Astro view transitions |
| targetBlank | boolean | Open all external links in new tabs |
| canonicalURL | string | URL | false | Canonical URL for SEO |
| opengraph.image | string | OG image URL |
| opengraph.imageAlt | string | OG image alt text |
| opengraph.type | 'website' | 'article' | 'video' | 'music' | 'profile' | Type of content |
| opengraph.width | number | OG image width |
| opengraph.height | number | OG image height |
| article.author | string | Article author |
| article.publishedTime | Date | Publication date |
Feature Details
SEO Configuration
The component handles essential SEO elements:
<Head meta={{ title: "Page Title", description: "Detailed page description", index: false, canonicalURL: "https://example.com/page" }}/>Social Sharing
Comprehensive OpenGraph and Twitter card support:
<Head meta={{ opengraph: { image: "/images/social-card.jpg", imageAlt: "Description of image", type: "article", width: 1200, height: 630 } }}/>Font Loading System
Built-in font configuration with performance optimizations:
@font-face { font-family: 'ReadexPro'; font-named-instance: 'Bold'; font-display: swap; font-weight: 400; src: url('/fonts/ReadexPro-Bold.ttf') format('truetype');}Dark Mode Management
Automatic dark mode detection and persistence, setting darkmode using a script in the <head> section ensures there’s no visual flash when the page loads.
Structured Data
Support for custom structured data through slots. Structured data is a type of metadata that can be used by search engines to create rich search results such as FAQ sections, reviews, product selections, and more.
<Head> <Fragment slot="structured-data"> <StructuredData data={[...]} /> </Fragment></Head>Best Practices
-
SEO Optimization
- Provide unique titles and descriptions for each page
- Use canonical URLs for duplicate content
- Include OpenGraph metadata for social sharing
-
Performance
- Enable view transitions for smooth navigation
- Use optimized and subset fonts
- Provide correct image dimensions for social cards
-
Accessibility
- Include descriptive alt text for images
- Ensure proper color contrast in both light/dark modes
- Maintain semantic HTML structure
Limited Time Launch Sale
Build SEO-optimized, performant websites with our pre-configured Head component. Get started with our AstroJS template today.
GET 60% OFF!
