feat: enhance SEO with sitemap and robots.txt, add Open Graph and Twitter meta tags

.eleventy.js

@@ -6,6 +6,9 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/resume");
   eleventyConfig.addPassthroughCopy("src/assets/images");
   eleventyConfig.addPassthroughCopy({ "favicon" : "/" } );
+  eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' });
+  eleventyConfig.addPassthroughCopy({ 'src/sitemap.xml': '/sitemap.xml' });
+
   // Add a filter for readable dates using vanilla JS
   eleventyConfig.addFilter("readableDate", dateObj => {
     // The toLocaleDateString method can be used to format dates
@@ -19,6 +22,14 @@ module.exports = function(eleventyConfig) {
     });
   });
 
+  // Add htmlDateString filter for sitemap <lastmod>
+  eleventyConfig.addFilter("htmlDateString", dateObj => {
+    if (!dateObj) return "";
+    // Format date as YYYY-MM-DD for sitemaps
+    const d = new Date(dateObj);
+    return d.toISOString().split("T")[0];
+  });
+
   // Shortcode for creating a callout box
   // This is a "paired shortcode" which means it has a start and end tag.
   eleventyConfig.addPairedShortcode("callout", function(content, title) {

src/_data/site.json

@@ -1,4 +1,5 @@
 {
+  "url": "https://jesus.twk95.com",
   "author": {
     "name": "Jesus Otero",
     "email": "jesus@twk95.com",

src/_includes/layout.njk

@@ -5,6 +5,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <title>{{ title }}</title>
     <meta name="description" content="{{ description }}">
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="{{ title }}">
+    <meta property="og:description" content="{{ description }}">
+    <meta property="og:type" content="article">
+    <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+    <meta property="og:image" content="{{ image }}">
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{ title }}">
+    <meta name="twitter:description" content="{{ description }}">
+    <meta name="twitter:image" content="{{ image }}">
+    <!-- Structured Data (JSON-LD) -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "BlogPosting",
+        "headline": "{{ title }}",
+        "description": "{{ description }}",
+        "image": "{{ image }}",
+        "author": {
+            "@type": "Person",
+            "name": "{{ site.author.name }}"
+        },
+        "datePublished": "{{ date }}",
+        "mainEntityOfPage": {
+            "@type": "WebPage",
+            "@id": "{{ site.url }}{{ page.url }}"
+            }
+    }
+    </script>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">

src/blog.njk

@@ -1,6 +1,8 @@
 ---
 title: "Blog"
 layout: "layout.njk"
+sitemapPriority: 0.8
+sitemapChangefreq: "monthly"
 ---
 
 <h1 class="text-4xl font-bold text-white mb-8 section-title">All Posts</h1>

src/blog/8.14.25.md

@@ -3,7 +3,10 @@ title: "Junos ZTP with Dnsmasq DHCP in OPNsense"
 date: "2025-08-14"
 layout: "post.njk"
 tags: "posts"
+description: "Stop configuring your new lab devices manually!"
 excerpt: "Stop configuring your new lab devices manually!"
+sitemapPriority: 0.5
+sitemapChangefreq: "never"
 ---
 
 Most people know that DHCP (Dynamic Host Configuration Protocol) is a protocol used to dynamically allocate IP addresses. But did you know that it can be used to configure other host device settings? Network device vendors like Junip... *ermm*, HPE Networking... take advantage of DHCP to implement "Zero Touch Provisioning" and even perform software upgrades for out-of-the-box devices. Here I will show you how to use OPNsense with Dnsmasq DHCP to "auto-provision" your Junos devices.

src/blog/8.5.25.md

@@ -3,7 +3,10 @@ title: "My First Blog Post"
 date: "2025-08-05"
 layout: "post.njk"
 tags: "posts"
+description: "First post made using Eleventy!"
 excerpt: Made using Eleventy!
+sitemapPriority: 0.5
+sitemapChangefreq: "never"
 ---
 
 Welcome to my new blog! This is my very first post. This website was created using eleventy in a custom nodejs docker container, pretty cool huh?? Maybe I'll post the source code here one day!

src/blog/template.md

@@ -1,9 +0,0 @@
----
-title: ""
-date: ""
-layout: "post.njk"
-#tags: "posts"
-excerpt: ""
----
-
-Type here

src/blog/test.md

@@ -2,6 +2,7 @@
 title: "Test page!"
 date: "2025-08-07"
 layout: "post.njk"
+draft: true
 excerpt: This post is a feature showcase of what you can do with Eleventy
 ---
 

src/index.md

@@ -2,6 +2,8 @@
 title: "Jesus - Network Engineer"
 layout: "layout.njk"
 descrption: "A website showcasing my skills and experience as a network engineer"
+sitemapPriority: 0.9
+sitemapChangefreq: "weekly"
 ---
 <!-- Hero Section -->
 <section id="hero" class="text-center py-20">

src/robots.txt

@@ -0,0 +1,9 @@
+User-agent: *
+Allow: /
+
+User-agent: GPTBot
+Disallow: /
+
+Host: https://jesus.twk95.com
+
+Sitemap: https://jesus.twk95.com/sitemap.xml

src/sitemap.xml.njk

@@ -0,0 +1,25 @@
+---
+permalink: /sitemap.xml
+eleventyExcludeFromCollections: true
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  {%- for page in collections.all %}
+    {%- set draft = page.data.draft %}
+    {%- if not draft  %}   
+      {%- set priority = page.data.priority if page.data.priority else "0.5" %}
+      <url>
+        <loc>{{ site.url }}{{ page.url }}</loc>
+        <lastmod>{{ page.date | htmlDateString }}</lastmod>
+        <changefreq>{{ page.data.sitemapChangefreq | default("monthly") }}</changefreq>
+        <priority>{{ page.data.sitemapPriority | default(0.8) }}</priority>
+      </url>
+    {%- endif %}
+  {%- endfor %}
+  <url>
+    <loc>https://jesus.twk95.com/resume/jesus.pdf</loc>
+    <lastmod>2025-08-21</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+</urlset>