LGCC
/
cdrdpyj
4
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/BaseHead.astro
View File

@ -1,7 +1,7 @@
--- ---
import { ClientRouter } from "astro:transitions"; import { ClientRouter } from "astro:transitions";
import { GoogleAnalytics } from 'astro-google-analytics'; import { GoogleAnalytics } from "astro-google-analytics";
const { const {
title = "Centro del Reino de Paz y Justicia", title = "Centro del Reino de Paz y Justicia",
description = "", description = "",
@ -11,6 +11,7 @@ const {
} = Astro.props; } = Astro.props;
const imageUrl = image ? new URL(image, Astro.site).toString() : null; const imageUrl = image ? new URL(image, Astro.site).toString() : null;
const canonicalURL = new URL(url || Astro.url.pathname, Astro.site);
--- ---
<head> <head>
@ -19,24 +20,39 @@ const imageUrl = image ? new URL(image, Astro.site).toString() : null;
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<GoogleAnalytics id="G-26KM3HWW9J" /> <GoogleAnalytics id="G-26KM3HWW9J" />
<title>{title}</title> <title>{title}</title>
<meta property="og:site_name" content={title} /> <meta property="og:site_name" content={title} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<!-- Open Graph --> <!-- Open Graph -->
{url && <meta property="og:url" content={url} />} {url && <meta property="og:url" content={url} />}
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<link rel="canonical" href={canonicalURL} />
{imageUrl && <meta property="og:image" content={imageUrl} />} {imageUrl && <meta property="og:image" content={imageUrl} />}
<meta property="og:image:width" content="1200"> <meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630"> <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 --> <!-- Twitter -->
@ -45,6 +61,5 @@ const imageUrl = image ? new URL(image, Astro.site).toString() : null;
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
{imageUrl && <meta name="twitter:image" content={imageUrl} />} {imageUrl && <meta name="twitter:image" content={imageUrl} />}
{url && <meta name="twitter:url" content={url} />} {url && <meta name="twitter:url" content={url} />}
</head> </head>
<ClientRouter /> <ClientRouter />

2
src/pages/[locale]/[news_slug]/[id].astro
View File

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