REIS IA SEO E METADADOS DESIGN SYSTEM v1.0

SEO e Metadados

Every page follows consistent SEO patterns — title templates, meta descriptions, Open Graph images, structured data, performance targets, and accessibility standards.

[01] Template de Meta Tags

Every page includes these base meta tags in the <head>. The BaseLayout component handles this automatically — page-specific values are passed via props.

Base Meta Tags

<!-- Standard Meta Tags (BaseLayout handles this) -->
<meta charset="UTF-8" />
<meta name="viewport"
  content="width=device-width, initial-scale=1.0" />
<meta name="description"
  content="{pageDescription}" />
<meta name="color-scheme" content="dark" />
<title>{pageTitle} — Reis IA Design System</title>
<link rel="icon"
  type="image/svg+xml" href="/favicon.svg" />

[02] Padrões de Título e Descrição

Title Pattern

All page titles follow: {Page Title} — Reis IA Design System. Keep under 60 characters. Brand name always at the end.

Title Pattern

/* Title Pattern */
"{Page Title} — Reis IA Design System"

/* Examples: */
"Foundations — Reis IA Design System"
"Brand Guidelines — Reis IA Design System"
"Button Components — Reis IA Design System"

/* Max length: 60 characters */
/* Brand name always at the end */

Description Pattern

Target 120-155 characters. Start with the main subject, end with design system context.

Description Pattern

/* Description Pattern */
"[What the page covers] for the Reis IA
 design system."

/* Examples: */
"Complete design token reference — colors,
 typography, spacing, surfaces, and shadows."
"All button variants — primary, secondary,
 ghost, hero — with interactive demos."

/* Target: 120-155 characters */
/* Start with subject, end with context */

Title Examples

Design System Overview — Reis IA Design System

46 chars

Brand Guidelines — Reis IA Design System

40 chars

Brand Strategy — Reis IA Design System

38 chars

Logo System — Reis IA Design System

35 chars

Icon System — Reis IA Design System

35 chars

Moodboard — Reis IA Design System

33 chars

Foundations — Reis IA Design System

35 chars

Spacing Scale — Reis IA Design System

37 chars

All Page Descriptions

Page

Description

Len

Design System Overview

Brand identity, design tokens, components, patterns, and guidelines.

Brand Guidelines

Mission, vision, values, brand voice, tone, and personality.

Brand Strategy

Positioning, target audience, competitive landscape, and brand promise.

Logo System

H1-B Hourglass construction, safe space, and usage rules.

Icon System

Lucide Icons specification with sizes, colors, and usage guidelines.

Moodboard

Visual mood, aesthetic direction, and design references.

Foundations

Complete design token reference for colors, typography, spacing, and surfaces.

Spacing Scale

Named and numeric spacing tokens with visual rulers.

Surfaces

5-tier surface elevation system with interactive demos.

Semantic Tokens

Semantic token mapping for colors, borders, typography, and motion.

Effects

Signature visual effects with live interactive demos.

Patterns

Background patterns, card layouts, and section compositions.

Motion

Animation system with easing curves, durations, and scroll-triggered effects.

VFX

Advanced visual effects including aurora, mesh gradients, and parallax.

Components

Complete component catalog overview and navigation.

Buttons

All button variants with interactive demos and code samples.

Cards

Card component variants with live hover effects and code.

Forms

Form inputs, validation states, and interactive demos.

Sections

Section layout patterns, containers, and spacing rules.

Advanced

Accordions, tabs, stat counters, and marquee components.

Page Templates

Reusable page templates and layout guides.

SEO

SEO rules, meta templates, OG image specs, and structured data.

[03] Open Graph e Twitter Cards

Every page needs an OG image for social sharing. Images follow a consistent template that reinforces brand identity on every platform.

OG + Twitter Meta Tags

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title"
  content="{pageTitle} — Reis IA" />
<meta property="og:description"
  content="{pageDescription}" />
<meta property="og:image"
  content="/og/{slug}.png" />
<meta property="og:url"
  content="https://brand.reisia.com/brandbook/{slug}" />
<meta property="og:site_name"
  content="Reis IA Design System" />

<!-- Twitter Card -->
<meta name="twitter:card"
  content="summary_large_image" />
<meta name="twitter:title"
  content="{pageTitle} — Reis IA" />
<meta name="twitter:description"
  content="{pageDescription}" />
<meta name="twitter:image"
  content="/og/{slug}.png" />

OG Image Template Preview

Reis IA

Page Title

Description text for social preview

Reis IA Design System

Dimensions

1200 x 630px

Format

PNG (optimized)

Max Size

< 300KB

Background

var(--surface-0) / #000000

Title Font

Inter Bold, 60px, #FFFFFF

Subtitle Font

Inter Regular, 24px, rgba(255,255,255,0.7)

Accent Line

2px solid #4A90FF, bottom third

Brand Label

Inter Mono, 14px, #4A90FF

OG Image Specification

/* OG Image Specification */
Width:  1200px
Height: 630px
Format: PNG (optimized, < 300KB)
Background: var(--surface-0) (#000000)

Layout:
  - H1-B Hourglass: top-left (32px margin)
  - Page title: Inter Bold, 60px, #FFFFFF
  - Subtitle: Inter Regular, 24px, rgba(255,255,255,0.7)
  - Accent line: 2px solid #4A90FF (bottom third)
  - Label: Inter Mono, 14px, #4A90FF
    "Reis IA Design System"

[04] Dados Estruturados

JSON-LD structured data helps search engines understand each page's role. Two schemas: one for brand site pages, one for the main consulting website.

Brand Site Pages

WebPage Schema

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "{pageTitle}",
  "description": "{pageDescription}",
  "url": "https://brand.reisia.com/brandbook/{slug}",
  "isPartOf": {
    "@type": "WebSite",
    "name": "Reis IA Design System",
    "url": "https://brand.reisia.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Reis IA",
    "logo": {
      "@type": "ImageObject",
      "url": "https://brand.reisia.com/logo.svg"
    }
  }
}
</script>

Main Website

ProfessionalService Schema

<!-- For the main Reis IA website -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Reis IA",
  "description": "AI implementation and monetization
    consulting for businesses.",
  "url": "https://reisia.com",
  "founder": {
    "@type": "Person",
    "name": "Moroni Reis"
  },
  "serviceType": [
    "AI Consulting",
    "AI Implementation",
    "Business Strategy"
  ],
  "areaServed": "BR",
  "priceRange": "$$$$"
}
</script>

[05] Otimização de Imagens

Optimize every image for performance. Use Astro's built-in Image component for automatic format conversion, resizing, and lazy loading.

Type

Dimensions

Max Size

Format

Hero images

1200 x 630px

200KB

WebP (AVIF fallback)

Card thumbnails

600 x 400px

80KB

WebP

Icons / logos

Variable

< 5KB

SVG (inline preferred)

OG images

1200 x 630px

300KB

PNG

Favicon

32 x 32px

< 2KB

SVG

Screenshots

1440 x 900px

150KB

WebP

Image Optimization

<!-- Astro Image component -->
<Image
  src={heroImage}
  alt="Descriptive alt text here"
  width={1200}
  height={630}
  format="webp"
  quality={80}
  loading="lazy"
  decoding="async"
/>

/* Image size guidelines */
Hero images:   1200 x 630px (max 200KB)
Card thumbs:   600 x 400px  (max 80KB)
Icons/logos:   SVG preferred (inline)
OG images:     1200 x 630px PNG (max 300KB)

/* Format priority */
1. SVG    — logos, icons, illustrations
2. WebP   — photos, complex graphics
3. AVIF   — if browser support sufficient
4. PNG    — OG images, transparency needed
5. JPEG   — fallback for photos

/* Alt text pattern */
"[Subject] — [context/action]"
"H1-B Hourglass logo mark on dark background"
"Surface elevation demo showing 5 tiers"

[06] Metas de Performance

Every page must meet these performance benchmarks. Astro's static-first architecture gives us a significant advantage — most pages ship zero JavaScript by default.

Lighthouse Scores (minimum)

90+

Performance

90+

Accessibility

90+

Best Practices

95+

SEO

Core Web Vitals Targets

Metric

Description

Target

Rating

LCP

Largest Contentful Paint — how fast the main content loads

< 2.5s

Good

INP

Interaction to Next Paint — responsiveness to user input

< 200ms

Good

CLS

Cumulative Layout Shift — visual stability during loading

< 0.1

Good

FCP

First Contentful Paint — time to first visible element

< 1.8s

Good

TTFB

Time to First Byte — server response time

< 0.8s

Good

Performance Rules

Static by default

Use Astro static rendering. Only add client:visible or client:load when interactivity is required.

Font optimization

Self-host Inter Variable via @fontsource. Subset if possible. Preload the primary weight.

Lazy load images

All images below the fold use loading="lazy" and decoding="async".

Minimize JS bundles

React islands only for interactive demos (copy buttons, form state, animations). Target < 50KB per island.

CSS custom properties

All design tokens are CSS variables, not JS. Zero runtime cost for theming.

Page load target

Every page must load in under 3 seconds on a 3G connection.

[07] HTML Semântico e Landmarks

Proper semantic HTML ensures screen readers and search engines can parse every page. Use landmarks, correct heading hierarchy, and meaningful ARIA attributes.

Heading Hierarchy Rules

Tag

Usage

CSS Token

<h1>

Page title — exactly one per page

var(--text-h1)

<h2>

Section titles (numbered SectionLabels do not replace these)

var(--text-h2)

<h3>

Subsection within an h2 section

var(--text-h3)

<h4>

Sub-subsection or card title

var(--text-h4)

<h5>

Rare — compact headers in tables, specs

var(--text-h5)

Semantic HTML Structure

<!-- Correct heading hierarchy -->
<body>
  <header role="banner">
    <!-- Logo + navigation -->
    <nav role="navigation" aria-label="Main">
      ...
    </nav>
  </header>

  <main role="main">
    <h1>Page Title</h1>
    <!-- Only ONE h1 per page -->

    <section aria-labelledby="section-01">
      <h2 id="section-01">Section Title</h2>

      <h3>Subsection</h3>
      <p>Content...</p>

      <h3>Another Subsection</h3>
      <p>Content...</p>
    </section>

    <section aria-labelledby="section-02">
      <h2 id="section-02">Next Section</h2>
      ...
    </section>
  </main>

  <footer role="contentinfo">
    <nav aria-label="Footer">
      ...
    </nav>
  </footer>
</body>

<!-- ARIA landmarks summary: -->
<!-- banner   = <header>   (1 per page) -->
<!-- navigation = <nav>    (label each) -->
<!-- main     = <main>     (1 per page) -->
<!-- region   = <section>  (label each) -->
<!-- contentinfo = <footer> (1 per page) -->

[08] Checklist de Acessibilidade

WCAG 2.1 AA compliance checklist. Every page must pass these checks before shipping.

Requirement

Detail

Level

Color contrast

Text: 4.5:1 (normal) / 3:1 (large). UI components: 3:1 against adjacent colors.

Keyboard navigation

All interactive elements reachable via Tab. Visible focus indicator on every focusable element.

Focus indicator

2px solid var(--focus-ring) with 2px offset. Never remove outline without replacement.

Skip link

First focusable element is "Skip to main content" link, visually hidden until focused.

Alt text

Every <img> has descriptive alt text. Decorative images use alt="" and aria-hidden="true".

Heading hierarchy

One <h1> per page. No skipped levels (h1 > h3). Headings describe section content.

ARIA landmarks

Use <header>, <nav>, <main>, <section>, <footer>. Label nav elements with aria-label.

Reduced motion

Respect prefers-reduced-motion. Disable animations, reduce transitions to 0.01ms.

Form labels

Every input has a visible <label>. Error messages linked via aria-describedby.

Touch targets

Minimum 44x44px touch target size for mobile. Adequate spacing between targets.

AAA

Language

html lang="en" attribute set. Inline language switches marked with lang attribute.

Zoom support

Content readable at 200% zoom. No horizontal scrolling at 320px viewport width.

Focus & Contrast

/* Focus ring — all interactive elements */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  /* var(--blue-40) = rgba(74,144,255,0.4) */
  outline-offset: 2px;
}

/* Skip link (first focusable element) */
<a href="#main"
  class="sr-only focus:not-sr-only
    focus:fixed focus:top-4 focus:left-4
    focus:z-[999] focus:px-4 focus:py-2
    focus:rounded-lg focus:bg-[var(--accent-blue)]
    focus:text-white focus:text-sm
    focus:font-semibold">
  Skip to main content
</a>

/* Color contrast requirements */
Text on --surface-0 (#000):
  --text-primary   (#FFF)    → 21:1  ✓
  --text-secondary (70% wht) → 14.7:1 ✓
  --text-tertiary  (50% wht) → 10.5:1 ✓
  --text-quaternary(35% wht) → 7.35:1 ✓
  --accent-blue    (#4A90FF) → 5.2:1  ✓

/* Minimum contrast: */
/* Normal text:  4.5:1 (AA) */
/* Large text:   3:1   (AA) */
/* UI components: 3:1  (AA) */

[09] Sitemap e Robots

The Astro sitemap integration generates an XML sitemap automatically. The robots.txt allows full crawling with a sitemap reference.

robots.txt

# robots.txt
User-agent: *
Allow: /
Sitemap: https://brand.reisia.com/sitemap-index.xml

# Disallow non-page routes
Disallow: /api/
Disallow: /_astro/

Astro Sitemap Config

astro.config.mjs

// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://brand.reisia.com',
  integrations: [
    sitemap({
      filter: (page) => !page.includes('/api/'),
    }),
  ],
});

[10] Mapa Completo de URLs

Complete list of all 22 pages in the design system with their canonical URLs.

Page

Path

Design System Overview

Brand Guidelines

/brandbook/guidelines

Brand Strategy

/brandbook/strategy

Logo System

/brandbook/logo

Icon System