# SEO Implementation Example
## What Gets Generated
When a user visits any page on the Metaplex Developer Hub, the SEOHead component automatically generates comprehensive SEO tags.
### Example Page: Core Documentation
For a Core documentation page at `/core`, here's what gets generated for each language:
---
## English Version (`/core`)
```html
Core | Metaplex Developer Hub
```
---
## Japanese Version (`/ja/core`)
```html
Core | Metaplex 開発者向け
```
---
## Korean Version (`/ko/core`)
```html
Core | Metaplex 개발자 허브
```
---
## Key SEO Principles
### 1. Self-Referential Canonicals ✅
Each language version points to **itself** as canonical:
- English canonical → English URL
- Japanese canonical → Japanese URL
- Korean canonical → Korean URL
**Why?** Tells Google these are all equally important, just in different languages.
### 2. Identical hreflang Tags ✅
**All three versions have the exact same hreflang tags** pointing to all alternates.
**Why?** Creates a complete bidirectional relationship between language versions.
### 3. Proper og:locale ✅
Each version declares its own locale and lists others as alternates:
- English: `og:locale="en_US"` + alternates for ja_JP, ko_KR
- Japanese: `og:locale="ja_JP"` + alternates for en_US, ko_KR
- Korean: `og:locale="ko_KR"` + alternates for en_US, ja_JP
**Why?** Social media platforms serve the right version when shared.
### 4. x-default for Fallback ✅
All versions include `hreflang="x-default"` pointing to English.
**Why?** If user's language isn't available, Google serves the default (English).
---
## How Search Engines Use This
### Google Search
1. **User in Japan searches in Japanese** → Serves `/ja/core`
2. **User in Korea searches in Korean** → Serves `/ko/core`
3. **User in US searches in English** → Serves `/core`
4. **User in France searches** → Serves `/core` (x-default)
### Social Media Sharing
1. **Tweet link to `/core`** → Shows English title/description
2. **Tweet link to `/ja/core`** → Shows Japanese title/description
3. **Tweet link to `/ko/core`** → Shows Korean title/description
### No Duplicate Content Penalty
Google understands these are **translations**, not duplicates, because:
- ✅ Self-referential canonicals (each points to itself)
- ✅ Complete hreflang annotations
- ✅ Proper og:locale declarations
- ✅ Different content language in actual page
---
## Validation Tools
After deployment, test with:
1. **Google Rich Results Test**
- https://search.google.com/test/rich-results
- Check each language version
2. **Facebook Sharing Debugger**
- https://developers.facebook.com/tools/debug/
- Verify og:locale tags work
3. **Twitter Card Validator**
- https://cards-dev.twitter.com/validator
- Confirm Twitter cards appear correctly
4. **Google Search Console**
- Submit all language versions
- Monitor for hreflang errors
- Check international targeting
---
## Component Usage
All of this is handled automatically by the `SEOHead` component:
```jsx
// In _app.jsx
```
The component:
1. Detects current language from URL path
2. Generates all alternate URLs automatically
3. Creates proper canonical URL
4. Sets all Open Graph and Twitter tags
5. Handles hreflang bidirectional links
**Zero manual configuration needed per page!** 🎉