wbRoutes2 Documentation

Appearance

🌐 SEO and Accessibility in WBC-Routes2 ​

WBC-Routes2 was designed with Search Engine Optimization (SEO) and accessibility (a11y) in mind. By combining structured dynamic content and Vue-based meta injection, it delivers robust SEO readiness while supporting screen readers and accessibility features.

🔍 1. SEO Through Metadata Injection ​

WBC-Routes2 allows you to define meta tags dynamically using:

  • meta field in the Vue Router
  • WBC component metadata block (comp: 'meta')

✅ Supported Tags: ​

  • title
  • description
  • keywords
  • Open Graph (og:* for Facebook, LinkedIn)
  • Twitter Cards (twitter:*)
  • Language (language, locale)
  • Verification (google-site-verification, adsense)
  • Favicons and manifest links

💡 Example: ​

js
{
  comp: "meta",
  title: "WBC-Routes – SEO Friendly Vue Routing",
  description: "This route dynamically injects meta tags into the head.",
  keywords: ["WBC-Routes", "Vue SEO", "dynamic meta"],
  language: "en",
  'og:image': "https://example.com/preview.png"
}

These will be automatically injected into the HTML <head> tag when the route loads.

🔀 2. Route and Content Synchronization ​

Because WBC content can be defined in multiple formats (Markdown, JSON, JS objects), it's crucial that each route matches meaningful content and metadata.

This enables:

  • Rich snippets in search engines
  • Accurate social media previews
  • Language-specific SEO metadata

🦯 3. Accessibility Considerations ​

WBC content is rendered using clean, semantic HTML — including:

  • Headers (<h1>–<h6>)
  • Ordered/unordered lists
  • Links with proper href and aria-labels
  • Images with alt text (when possible)
  • Buttons and inputs with label associations

✅ Example: Accessible Button ​

js
{
  comp: "VBtn",
  options: {
    html: "Submit",
    attrs: {
      'aria-label': "Submit Form"
    }
  }
}
markdown
Click Here|blue|https://example.com|aria-label=Go to external site

🌍 4. Multi-Language and Localized Metadata ​

You can specify different metadata per language:

js
{
  comp: "meta",
  title: {
    en: "Welcome to WBC-Routes",
    fr: "Bienvenue sur WBC-Routes",
    ar: "مرحبًا بك في WBC-Routes"
  },
  description: {
    en: "Multi-language routing and SEO with Vue 2",
    fr: "Routage multi-langue et SEO avec Vue 2"
  }
}

WBC-Routes2 will detect the active language and inject the appropriate content.

🛠 5. Robots and Crawlers ​

You can control how your pages are crawled:

js
{
  comp: "meta",
  robots: "index, follow"
}

This helps manage indexing for test/staging vs. production environments.

📘 Summary ​

  • ✅ Full support for SEO-friendly metadata from routes or content.
  • ✅ Dynamic HTML head injection per route.
  • ✅ Accessibility best practices in component rendering.
  • ✅ Localized metadata and structured data.
  • ✅ Configurable crawler behavior and social previews.