Check Open Graph / Twitter card metadata

[xavier506]

This issue focuses on implementing comprehensive Open Graph and Twitter card metadata to optimize social media sharing and improve content visibility when links are shared on platforms like Facebook, LinkedIn, X (Twitter), and other social networks.

Current State Analysis

Existing Configuration:

In docusaurus.config.js, there is minimal social sharing setup:

themeConfig: {
  image: "img/developer_guides_preview_image.png",
  // ... rest of config
}

Missing Components:

• No comprehensive Open Graph meta tags
• No Twitter Card specific metadata
• No dynamic metadata based on page content
• Limited social sharing optimization

Requirements

Open Graph Metadata Implementation

Global Site-Level Meta Tags

Add to docusaurus.config.js themeConfig:

themeConfig: {
  // Current image config
  image: "img/developer_guides_preview_image.png",
  
  // Enhanced metadata configuration
  metadata: [
    // Open Graph basic metadata
    {property: "og:title", content: "Edenia Web3 Development Documentation"},
    {property: "og:description", content: "Comprehensive web3 developer documentation covering blockchain development, AI tools, smart contracts, and open-source guidelines from Edenia Systems."},
    {property: "og:image", content: "https://docs.edenia.com/img/developer_guides_preview_image.png"},
    {property: "og:image:alt", content: "Edenia Web3 Development Documentation Preview"},
    {property: "og:image:width", content: "1200"},
    {property: "og:image:height", content: "630"},
    {property: "og:url", content: "https://docs.edenia.com"},
    {property: "og:type", content: "website"},
    {property: "og:site_name", content: "Edenia Web3 Development"},
    {property: "og:locale", content: "en_US"},
    {property: "og:locale:alternate", content: "es_ES"},
    
    // Twitter Card metadata
    {name: "twitter:card", content: "summary_large_image"},
    {name: "twitter:site", content: "@EdeniaWeb3"},
    {name: "twitter:creator", content: "@EdeniaWeb3"},
    {name: "twitter:title", content: "Edenia Web3 Development Documentation"},
    {name: "twitter:description", content: "Comprehensive web3 developer documentation covering blockchain development, AI tools, smart contracts, and open-source guidelines."},
    {name: "twitter:image", content: "https://docs.edenia.com/img/developer_guides_preview_image.png"},
    {name: "twitter:image:alt", content: "Edenia Web3 Development Documentation Preview"},
    
    // Additional SEO metadata
    {name: "author", content: "Edenia Systems"},
    {name: "robots", content: "index, follow"},
    {name: "theme-color", content: "#2d9cdb"}
  ]
}

Social Media Image Requirements

Current Image Analysis:

• ✅ developer_guides_preview_image.png exists in /static/img/
• Needs optimization for social media standards

Image Specifications:

• Recommended size: 1200x630 pixels (1.91:1 aspect ratio)
• Minimum size: 600x315 pixels
• Maximum file size: 8MB (recommended: under 1MB)
• Format: PNG or JPG (PNG preferred for graphics)
• Content: Should include site branding, key messaging, and visual appeal

Required Images to Create/Optimize:

1. General Site Preview (og-image-general.png)

   • Size: 1200x630px
   • Content: Edenia logo, "Web3 Development Documentation", tech stack icons
   • Use case: Homepage, general pages

2. Section-Specific Images:

   • og-image-ai.png - AI/ML focus with relevant icons
   • og-image-blockchain.png - Blockchain/Web3 themed
   • og-image-tutorials.png - Tutorial/learning focused

Page-Level Metadata Enhancement

Individual Page Frontmatter:

Enhance existing frontmatter structure to include social metadata:

---
id: page-id
title: Page Title
description: Page description for SEO and social sharing
keywords: [relevant, keywords]
# Social media specific
image: /img/og-image-specific.png  # Page-specific social image
---

Dynamic Content for Key Pages:

AI Section Example:

---
title: Artificial Intelligence AI Development
description: Master AI development with comprehensive guides to AI coding assistants, machine learning workflows, and implementation strategies.
image: /img/og-image-ai.png
---

Blockchain Section Example:

---  
title: Blockchain & Web3 Development
description: Complete blockchain development guide covering smart contracts, DApp development, and Web3 technologies across multiple networks.
image: /img/og-image-blockchain.png
---

Technical Implementation

1. Update Docusaurus Configuration

• Enhance themeConfig.metadata array in docusaurus.config.js
• Ensure proper absolute URLs for all images
• Include multilingual metadata for Spanish locale

2. Create Optimized Social Media Images

Design Requirements:

• Consistent branding: Edenia logo and colors
• Clear typography: Readable at small sizes
• High contrast: Works well on dark and light backgrounds
• Mobile friendly: Legible when viewed on mobile devices

Content Strategy:

• General image: Site overview and value proposition
• Section images: Specific to content area (AI, Blockchain, Tutorials)
• Include technology icons: React, EOSIO, AI tools, etc.
• Clear hierarchy: Title, subtitle, key points

3. Validate Implementation

Testing Tools:

• Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
• Twitter Card Validator: https://cards-dev.twitter.com/validator
• LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
• Open Graph Preview Tools: Various online validators

Validation Checklist:

# Check meta tags in generated HTML
curl -s https://docs.edenia.com | grep -E "og:|twitter:"

# Validate image accessibility
curl -I https://docs.edenia.com/img/developer_guides_preview_image.png

Expected Social Media Card Behavior

Facebook/LinkedIn Share:

• Image: Large preview image (1200x630)
• Title: "Edenia Web3 Development Documentation"
• Description: Compelling summary under 300 characters
• URL: Clean, branded URL display

Twitter/X Share:

• Card type: Large image with summary
• Image: Same optimized image with alt text
• Title: Slightly shortened for Twitter character limits
• Description: Concise value proposition
• Attribution: @EdeniaWeb3

Discord/Slack Share:

• Rich embed: Automatic rich preview
• Consistent branding: Same image and metadata
• Professional appearance: Clean, technical look

Content Strategy for Different Sections

Homepage/General:

• Focus: "Complete Web3 Development Resource"
• Highlight: Blockchain, AI, Tutorials, Open Source
• CTA: "Start Learning Web3 Development"

AI Section:

• Focus: "Master AI Development Tools"
• Highlight: Cursor, Claude, Windsurf, AI Models
• CTA: "Explore AI Development"

Blockchain Section:

• Focus: "Build on Multiple Blockchains"
• Highlight: Ethereum, Base, EOS, Smart Contracts
• CTA: "Start Building DApps"

Tutorials Section:

• Focus: "Step-by-Step Developer Guides"
• Highlight: Docker, React, GraphQL, Modern C++
• CTA: "Follow Our Tutorials"

Acceptance Criteria

Technical Requirements:

• Open Graph meta tags implemented in site configuration
• Twitter Card meta tags configured properly
• All social media images optimized and accessible
• Absolute URLs used for all image references
• Multilingual metadata for English and Spanish locales

Quality Standards:

• Images render correctly in Facebook sharing debugger
• Twitter card displays properly in card validator
• LinkedIn post inspector shows rich preview
• Images are under 1MB file size
• All images have proper alt text attributes

Content Standards:

• Descriptions are compelling and action-oriented
• Titles are optimized for each platform character limits
• Images maintain consistent branding across all sections
• Metadata accurately represents page content
• Social handles and attributions are correct

Impact on Social Media Sharing

Improved Engagement:

• Higher click-through rates from rich previews
• Professional appearance in social media feeds
• Consistent brand recognition across platforms
• Better content discoverability through optimized metadata

SEO Benefits:

• Enhanced search engine understanding through structured metadata
• Improved social signals from increased sharing
• Better user experience with previews matching content
• Professional presentation building trust and authority

Brand Consistency:

• Unified visual identity across all shared content
• Clear value proposition in every social media interaction
• Technical expertise demonstration through quality implementation
• Professional credibility in Web3/AI development space