Skip to main content

​
Layout

The Layout.astro component is the main layout wrapper for all pages in Proyecto Renacer. It provides the HTML structure, meta tags, font loading, and integrates SEO components.

​
Location

src/layouts/Layout.astro

​
Props

​
title
string
required
Page title displayed in browser tab and used for SEO
​
description
string
required
Page description used for meta description tag and SEO
​
image
string
Default image URL for social media sharing (used as fallback for OGImage)
​
OGTitle
string
Custom OpenGraph title. Falls back to title if not provided
​
OGDescription
string
Custom OpenGraph description. Falls back to description if not provided
​
OGImage
string
Custom OpenGraph image. Falls back to image if not provided

​
Features

​
Font Loading

The layout loads Google Fonts:
  • Public Sans (weights: 300-900) - Primary font family
  • Material Symbols Outlined - Icon font used throughout the site

​
Global Styles

Imports src/styles/global.css with Tailwind configuration and custom utilities.

​
Analytics

Integrates Ahrefs Analytics with async loading for performance.

​
SEO Components

Automatically includes:
  • <Head /> - Basic meta tags, favicon, and SEO setup
  • <OpenGraph /> - Social media meta tags for sharing

​
Dark Mode Support

Body classes include Tailwind dark mode variants: 
<body class="bg-light dark:bg-dark font-display text-slate-900 dark:text-slate-100">

​
Usage

​
Basic Example

---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

const title = "Proyecto de Vivienda Social Renacer | Terrenos en Ambato";
const description = "Proyecto de vivienda social Renacer en Ambato. Una oportunidad para personas que no tienen vivienda propia.";
---

<Layout title={title} description={description}>
  <Header />
  <main>
    <!-- Your page content here -->
  </main>
  <Footer />
</Layout>

​
With Custom OpenGraph Data

---
import Layout from "../layouts/Layout.astro";

const pageData = {
  title: "Requisitos | Proyecto Renacer",
  description: "Conoce los requisitos para ser socio del proyecto.",
  OGTitle: "¿Quieres tu terreno en Ambato? | Proyecto Renacer",
  OGDescription: "Descubre si cumples los requisitos para obtener tu primer terreno.",
  OGImage: "https://proyectoviviendarenacer.netlify.app/img/requisitos-og.webp"
};
---

<Layout {...pageData}>
  <!-- Content -->
</Layout>

​
Implementation Details

​
HTML Structure

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    
    <!-- Font loading -->
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
    
    <!-- Meta description -->
    <meta name="description" content={description} />
    <meta name="robots" content="index,follow" />
    
    <!-- SEO Components -->
    <Head />
    <OpenGraph OGTitle={OGTitle ?? title} OGDescription={OGDescription ?? description} OGImage={OGImage ?? image} />
  </head>
  <body class="bg-light font-display text-slate-900 dark:text-slate-100 dark:bg-dark">
    <slot />
  </body>
</html>

​
Custom Styles

The layout includes custom styles for Material Symbols: 
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

​
Best Practices

  1. Always provide title and description - These are required for SEO
  2. Use custom OG props for social sharing - Optimize titles and descriptions for different contexts
  3. Include Header and Footer - Use consistent navigation across pages
  4. Leverage dark mode classes - The layout supports dark mode via Tailwind classes
  • Head - Basic meta tags and SEO
  • Header - Site navigation header
  • OpenGraph - Social media meta tags