Add social graph tags for the primate website

[liolocs]

Description

• Problem: The Primate documentation website lacks social graph meta tags (Open Graph, Twitter Cards). When users share documentation links on social media (Twitter, LinkedIn, Discord, etc.), the preview appears generic with no title, description, or image. This reduces click-through rates and makes shared content less discoverable.

• Proposal:

  • Add Open Graph meta tags to all documentation pages.
  • Add Twitter Card meta tags for optimized Twitter sharing.
  • Include dynamic page-specific titles and descriptions based on content.
  • Add a default Primate social share image (logo/banner).
  • Support per-page custom images for major feature announcements.

Current situation (no social tags)

When sharing a Primate docs link (e.g., https://primatejs.com/docs/store), social platforms display:

• Generic site title or raw URL
• No description
• No preview image
• Poor visual presentation

Result: Lower engagement, reduced visibility, and unprofessional appearance when community members share documentation.

Desired functionality

Default meta tags on all pages (E.G.):

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://primatejs.com/docs/store">
<meta property="og:title" content="Store - Primate Documentation">
<meta property="og:description" content="Learn how to use Primate's type-safe data store with pema schemas...">
<meta property="og:image" content="https://primatejs.com/images/social-card.png">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Store - Primate Documentation">
<meta name="twitter:description" content="Learn how to use Primate's type-safe data store...">
<meta name="twitter:image" content="https://primatejs.com/images/social-card.png">

Dynamic page titles:

• Homepage: "Primate - The polymorphic JavaScript framework"
• Store docs: "Store - Primate Documentation"
• Tutorial pages: "Getting Started - Primate Tutorial"

Benefits

• Increased visibility: Better-looking previews encourage clicks and shares.
• Professional appearance: Shows attention to detail and polish.
• SEO improvement: Social signals can indirectly boost search rankings.
• Community growth: Makes it easier for users to promote Primate.
• Brand consistency: Controlled messaging across all social platforms.

Acceptance criteria

• Open Graph tags: og:title, og:description, og:image, og:url, og:type on all pages.
• Twitter Cards: twitter:card, twitter:title, twitter:description, twitter:image on all pages.
• Dynamic content: Page-specific titles and descriptions (not hardcoded).
• Social share image: Create a 1200x630px default image featuring Primate branding.
• Testing: Validate previews using Facebook Sharing Debugger and Twitter Card Validator.
• Performance: Meta tags should not impact page load times.

Additional considerations

• Custom images: Allow frontmatter override for blog posts/announcements (if applicable).
• Fallback: If page description is unavailable, use site-level default.
• i18n: Adjust og:locale if docs are going to be translated into different languages.