---
description: SEO optimization and social meta tag strategy
alwaysApply: false
globs: **/*.{html,tsx,jsx,vue,astro}
---

# SEO & Meta Tag Strategy

## Core Philosophy

SEO combines three pillars:
1. **Content SEO**: Quality, relevance, keywords
2. **Technical SEO**: Structure, performance, crawlability
3. **Social SEO**: Open Graph, Twitter Cards, sharing optimization

## Page Title Optimization

**Formula**: `[Primary Keyword] - [Secondary Keyword] | [Brand Name]`

**Guidelines**:
- Optimal: 50-60 characters
- Maximum: 70 characters
- Mobile: 55 characters

```html
<title>Bitcoin UX Design - Lightning Network Development | PROUX</title>
```

## Meta Descriptions

**Formula**: `[Hook/Benefit] + [Key Details] + [Call-to-Action]`

**Guidelines**:
- Optimal: 150-160 characters
- Mobile: 120 characters
- Minimum: 120 characters

```html
<meta name="description" content="Transform your Bitcoin app's UX. 10+ years designing for Lightning Network. 98% user satisfaction. Explore projects →">
```

## Open Graph Tags

**Essential OG Tags**:

```html
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Brand">
```

### OG Image Specifications

- Dimensions: 1200x630px (1.91:1 ratio)
- Format: PNG or JPG
- File Size: < 5MB (ideally < 300KB)
- Safe Zone: Keep text/logos in center 1200x600px

## Twitter Card Tags

```html
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/image.jpg">
```

## Structured Data (Schema.org)

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Company Name",
  "description": "Company description",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png"
}
</script>
```

## Canonical URLs

```html
<link rel="canonical" href="https://example.com/page">
```

Use canonical URLs to:
- Prevent duplicate content issues
- Handle URL parameters
- Indicate preferred URL version

## Performance for SEO

Core Web Vitals affect rankings:
- **LCP** (Largest Contentful Paint): < 2.5s
- **FID** (First Input Delay): < 100ms
- **CLS** (Cumulative Layout Shift): < 0.1

```html
<!-- Preload critical resources -->
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- Lazy load images -->
<img src="image.jpg" loading="lazy" alt="Description">
```