feat: add BaseHead component and dynamic news article page template with SEO metadata

This commit is contained in:
Esteban 2026-05-08 08:52:54 -05:00
parent 353ba9aed6
commit fef2a6a62d
2 changed files with 24 additions and 9 deletions

View File

@ -1,7 +1,7 @@
---
import { ClientRouter } from "astro:transitions";
import { GoogleAnalytics } from 'astro-google-analytics';
import { GoogleAnalytics } from "astro-google-analytics";
const {
title = "Centro del Reino de Paz y Justicia",
description = "",
@ -11,6 +11,7 @@ const {
} = Astro.props;
const imageUrl = image ? new URL(image, Astro.site).toString() : null;
const canonicalURL = new URL(url || Astro.url.pathname, Astro.site);
---
<head>
@ -31,12 +32,27 @@ const imageUrl = image ? new URL(image, Astro.site).toString() : null;
<meta property="og:type" content="article" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<link rel="canonical" href={canonicalURL} />
{imageUrl && <meta property="og:image" content={imageUrl} />}
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
{date && <meta property="article:published_time" content={date instanceof Date ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` : date} />}
{
date && (
<meta
property="article:published_time"
content={
date instanceof Date
? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
2,
"0"
)}-${String(date.getDate()).padStart(2, "0")}`
: date
}
/>
)
}
<!-- Twitter -->
@ -45,6 +61,5 @@ const imageUrl = image ? new URL(image, Astro.site).toString() : null;
<meta name="twitter:description" content={description} />
{imageUrl && <meta name="twitter:image" content={imageUrl} />}
{url && <meta name="twitter:url" content={url} />}
</head>
<ClientRouter />

View File

@ -67,7 +67,7 @@ const dateISO = `${y}-${m}-${d}`;
title={post.data.title}
description={excerpt}
image={post.data.thumbnail}
url={canonicalUrl}
url={canonicalUrl.toString()}
date={post.data.date}
>
<script