0bb1bcc5f9
Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content. Features: - Vue 3 + TypeScript + Vite setup with hot module reloading - Netflix-inspired UI with hero section and horizontal scrolling content rows - Glass morphism design system with custom Tailwind configuration - 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.) - Full-featured video player component with custom controls - Mobile-responsive design with bottom navigation - Nostr integration ready (nostr-tools, relay pool, NIP-71 support) - Pinia state management for content - MCP tools configured (Filesystem, Memory, Nostr, Puppeteer) Components: - Browse.vue: Main streaming interface with hero and content rows - ContentRow.vue: Horizontal scrolling film cards with navigation arrows - VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen - MobileNav.vue: Bottom tab navigation for mobile devices Tech Stack: - Frontend: Vue 3 (Composition API), TypeScript - Build: Vite 7 - Styling: Tailwind CSS with custom theme - State: Pinia 3 - Router: Vue Router 4.6 - Protocol: Nostr (nostr-tools 2.22) Design: - 4px grid spacing system - Glass morphism UI components - Netflix-style hero section with featured content - Smooth animations and hover effects - Mobile-first responsive breakpoints - Dark theme with custom color palette Content: - 20+ IndeeHub films with titles, descriptions, categories - Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi - Independent films and documentaries - Working Unsplash CDN images for thumbnails and backdrops Ready for deployment to Umbrel, Start9, and Archy nodes. Co-authored-by: Cursor <cursoragent@cursor.com>
113 lines
2.7 KiB
Plaintext
113 lines
2.7 KiB
Plaintext
---
|
|
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">
|
|
```
|