✨ feat: Add JSON-LD Structured Data to project

carlosjorger · carlosjorger · commit 3c1480448c2e · 2025-07-17T16:43:40.000-04:00
diff --git a/src/components/App.astro b/src/components/App.astro
@@ -8,6 +8,8 @@ import Presentation from './Presentation.astro';
 import { getI18N } from '../i18n/';
 import Experience from './Experience.astro';
 import Articles from './Articles.astro';
+import HeadMeta from '../components/Header/HeadMeta.astro';
+
 export interface Props {
 	public_src: string;
 }
@@ -16,6 +18,7 @@ const i18n = getI18N({ currentLocale });
 ---
 
 <Layout {...i18n}>
+	<HeadMeta SEO_TITLE={i18n.SEO_TITLE} SEO_DESCRIPTION={i18n.SEO_DESCRIPTION} slot="structured-data" />
 	<Header {...i18n} {...Astro.props} />
 	<main>
 		<Presentation {...i18n} />
diff --git a/src/components/Articles.astro b/src/components/Articles.astro
@@ -30,7 +30,6 @@ const allPosts = await Astro.glob('../pages/posts/*.md');
 								class="w-48 rounded-xl max-sm:w-full aspect-video"
 								alt={post.frontmatter.image.alt}
 							/>
-
 							<section>
 								<CustomParagraph
 									textColor="text-slate-50"
diff --git a/src/components/Header/HeadMeta.astro b/src/components/Header/HeadMeta.astro
@@ -0,0 +1,20 @@
+---
+export interface Props {
+	SEO_TITLE: string;
+    SEO_DESCRIPTION: string;
+}
+
+const {  SEO_TITLE, SEO_DESCRIPTION } = Astro.props;
+
+let schema = JSON.stringify({
+  "@context": "https://schema.org/",
+  "@type": "WebSite",
+  "headline": SEO_TITLE,
+  "description": SEO_DESCRIPTION,
+  "author": {
+    "@type": "Person",
+    "name": "Carlos Rodríguez"
+  }
+});
+---
+<script type="application/ld+json" set:html={schema}></script>
diff --git a/src/components/Header/PostMeta.astro b/src/components/Header/PostMeta.astro
@@ -0,0 +1,34 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+type Props = CollectionEntry<"blog">["data"];
+
+const { title, description, pubDate, image } =
+  Astro.props as Props;
+
+const pageUrl = new URL(Astro.url.pathname, Astro.site);
+const imageUrl = new URL(image.src, Astro.site)
+function removeAllTags(str) {
+  return str.replace(/<\/?[\w\s="/.':;#-\/]+>/g, '');
+}
+const structuredData = {
+  "@context": "https://schema.org",
+  "@type": "Article",
+  headline: title,
+  description: removeAllTags(description),
+  datePublished: pubDate,
+  url: pageUrl,
+  thumbnailUrl: imageUrl,
+  image: {
+    "@type": "ImageObject",
+    url: imageUrl,
+    caption: image.alt,
+  },
+  author: {
+    "@type": "Person",
+    name: 'Carlos Rodríguez',
+  },
+};
+---
+
+<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -61,6 +61,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 	<script
 		src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.js"
 		is:inline></script>
+	<slot name="structured-data" />
 	<body>
 		<ViewTransitions />
 		<slot />
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
@@ -6,6 +6,7 @@ import SectionContainer from '@components/shared/SectionContainer.astro';
 import Title from '@components/shared/Title.astro';
 import '../styles/post-styles.css';
 import { primaryFormatDate } from '@utils/dateUtils';
+import PostMeta from '@components/Header/PostMeta.astro';
 export interface Props {
 	frontmatter: {
 		title: string;
@@ -32,6 +33,7 @@ const postLayoutProps = { ...i18n, SEO_TITLE, SEO_DESCRIPTION };
 ---
 
 <Layout {...postLayoutProps}>
+	<PostMeta {...frontmatter} slot="structured-data" />
 	<div
 		class="absolute -z-10 m-0 h-screen w-full bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.4),rgba(255,255,255,0))]"
 	>
diff --git a/src/pages/posts/enriquece-el-drag-and-drop-de-tu-aplicacion-de-vue-3-con-vue-fluid-dnd.md b/src/pages/posts/enriquece-el-drag-and-drop-de-tu-aplicacion-de-vue-3-con-vue-fluid-dnd.md
@@ -5,7 +5,7 @@ pubDate: 2024-04-26
 description: 'En este artículo presenta a <strong>Vue Fluid DnD</strong> como una alternativa a funcionalidades drag and drop en <strong>Vue 3</strong>'
 image:
     src: '/images/vue-fluid-dnd-cover.webp'
-    alt: 'Vue logo'
+    alt: 'Vue Fluid DnD logo'
 ---
 
 En las aplicaciones web que usan frameworks reactivos como **vue**, **react**, **angular**, etc es muy común la necesidad de organizar listas u otras colecciones de elementos ordenándolas o añadiendo, eliminando o trasladando elementos en estas.
