Skip to main content

​
Head

The Head.astro component provides essential meta tags, SEO configuration, favicons, and basic site metadata for Proyecto Renacer. It’s automatically included in the Layout.astro component.

​
Location

src/components/Head.astro

​
Props

This component does not accept props. All metadata is statically defined.

​
Features

​
Author and Application Info

<meta name="author" content="Deerhou" />
<meta name="application-name" content="Proyecto de vivienda Renacer" />
<meta name="generator" content="Astro" />

​
Favicons

Provides multiple favicon formats for browser compatibility: 
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />

​
SEO Keywords

Targeted keywords for local search optimization: 
<meta name="keywords" content="vivienda social Ambato, terrenos en Ambato, proyecto de vivienda Ambato, MIDUVI Ambato, obtener terreno Ambato, comité de vivienda Ambato">

​
Geographic Targeting

Location-specific meta tags for Ambato, Ecuador: 
<meta name="language" content="Spanish">
<meta name="geo.region" content="EC-T">
<meta name="geo.placename" content="Ambato">

​
Canonical URL

<link rel="canonical" href="https://proyectoviviendarenacer.netlify.app/">

​
OpenGraph Locale

<meta property="og:locale" content="es_EC">

​
Theme Color

Primary brand color for browser UI: 
<meta name="theme-color" content="#2E7D32">

​
Usage

​
Automatic Inclusion

The Head component is automatically included in every page through the Layout component: 
<!-- In Layout.astro -->
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>{title}</title>
  
  <!-- Other head elements -->
  
  <Head /> <!-- Automatically included -->
  
  <OpenGraph OGTitle={OGTitle ?? title} OGDescription={OGDescription ?? description} OGImage={OGImage ?? image} />
</head>

​
No Direct Usage Required

You don’t need to import or use the Head component directly in your pages. Simply use the Layout component: 
---
import Layout from "../layouts/Layout.astro";
---

<Layout title="My Page" description="Page description">
  <!-- Your content -->
</Layout>

​
Implementation Details

​
Full Component Source

<meta name="author" content="Deerhou" />
<meta name="application-name" content="Proyecto de vivienda Renacer" />
<meta name="generator" content="Astro" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />

<meta name="keywords" content="vivienda social Ambato, terrenos en Ambato, proyecto de vivienda Ambato, MIDUVI Ambato, obtener terreno Ambato, comité de vivienda Ambato">
<meta name="language" content="Spanish">
<meta name="geo.region" content="EC-T">
<meta name="geo.placename" content="Ambato">

<link rel="canonical" href="https://proyectoviviendarenacer.netlify.app/">

<meta property="og:locale" content="es_EC">

<meta name="theme-color" content="#2E7D32">

​
SEO Best Practices

​
Implemented Features

  1. Author Attribution - Credits the site creator
  2. Geographic Targeting - Optimizes for local Ambato searches
  3. Canonical URL - Prevents duplicate content issues
  4. Localization - Specifies Spanish language and Ecuador locale
  5. Keywords - Targets relevant search terms
  6. Theme Color - Enhances mobile browser appearance

​
Additional SEO Configuration

For page-specific SEO, use the Layout component props: 
<Layout 
  title="Specific Page Title"
  description="Specific page description for meta tags"
  OGTitle="Custom social sharing title"
  OGDescription="Custom social sharing description"
  OGImage="/images/custom-og-image.jpg"
>

​
Customization

​
Updating Keywords

To modify SEO keywords, edit the component: 
<meta name="keywords" content="your, custom, keywords, here">

​
Changing Theme Color

Update the theme color to match your brand: 
<meta name="theme-color" content="#YOUR_HEX_COLOR">

​
Modifying Canonical URL

Update for production domain: 
<link rel="canonical" href="https://your-domain.com/">

​
Adding Additional Meta Tags

Simply add new meta tags to the component: 
<meta name="new-tag" content="new value" />
<meta property="custom:property" content="custom value" />

​
Integration with OpenGraph

The Head component works alongside the OpenGraph.astro component for complete social media integration:
  • Head.astro - Basic SEO, favicons, canonical URLs
  • OpenGraph.astro - Social media sharing (Facebook, Twitter, WhatsApp)
Both are automatically included in the Layout component: 
<head>
  <!-- Basic meta tags -->
  <Head />
  
  <!-- Social media meta tags -->
  <OpenGraph OGTitle={OGTitle} OGDescription={OGDescription} OGImage={OGImage} />
</head>
  • Layout - Main layout that includes Head
  • OpenGraph - Social media meta tags

​
Technical Notes

​
Geo Region Code

EC-T represents Tungurahua province in Ecuador (where Ambato is located).

​
Theme Color Usage

The #2E7D32 color is used by browsers to:
  • Color the address bar on mobile devices
  • Style browser UI elements
  • Provide visual consistency

​
Favicon Formats

Two formats ensure compatibility:
  • SVG - Modern browsers, scalable
  • ICO - Legacy browser support