SEO Optimization: Meta Tags, Sitemaps & Structured Data
Master technical SEO for Jekyll: write meta tags, generate sitemaps and robots.txt, add JSON-LD structured data, and automate it all with jekyll-seo-tag.
SEO Optimization: Meta Tags, Sitemaps & Structured Data
Make your Jekyll site discoverable with meta tags, sitemaps, structured data, and jekyll-seo-tag.
Primary Tech
🛠️ jekyll
Skill Focus
Frontend
Series
Jekyll Mastery
Author
IT-Journey Team
XP Range
⚡ 250-500
Greetings, brave adventurer! Welcome to SEO Optimization - the quest where you light a beacon so the search engines of the realm can find your work. You can forge the most beautiful site in the kingdom, but if no crawler can read it and no result links to it, it stands silent in the fog. Search Engine Optimization is the craft of making your pages discoverable, understandable, and shareable.
Whether you are publishing a portfolio, a blog, or documentation, this adventure will teach you the technical foundations - titles, descriptions, sitemaps, structured data, and the jekyll-seo-tag plugin - that help your pages rank and appear correctly when shared.
📖 The Legend Behind This Quest
Search engines send out tireless crawlers that read pages, follow links, and build an index of the web. When someone searches, the engine ranks pages from that index. For years people chased tricks, but the durable truth emerged: write good content and make it easy for machines to read. That means a clear <title>, a compelling meta description, a sitemap listing your pages, a robots.txt granting access, and structured data that spells out, in a format machines parse, exactly what a page is about. Get these right and your work surfaces where people are looking.
This quest teaches the technical SEO that static-site authors control, and how Jekyll plugins automate most of it.
🎯 Quest Objectives
By the time you complete this journey, you will have mastered:
Primary Objectives (Required for Quest Completion)
Titles & Meta Descriptions - Write the snippets that appear in search results
Meta & Open Graph Tags - Control how pages look in search and social shares
Sitemaps & robots.txt - Tell crawlers what to read and where to find it
jekyll-seo-tag - Automate metadata generation across a whole site
Secondary Objectives (Bonus Achievements)
Structured Data - Add JSON-LD so engines understand your content type
Modern operating system (Windows 10+, macOS 10.14+, or Linux)
A Jekyll site (or any static site) to edit
A text editor or IDE (VS Code recommended)
Internet connection for verification tools
🧠 Skill Level Indicators
This 🟢 Easy quest expects:
Beginner-friendly - some exposure to Jekyll helps but is not required
Willingness to inspect a page’s <head> in DevTools
Ready for 45-60 minutes of focused learning
🌍 Choose Your Adventure Platform
SEO lives in your site’s HTML and config. You will edit files and check the output. Pick your setup.
🍎 macOS Kingdom Path
Click to expand macOS instructions
```bash
# In an existing Jekyll site, add the SEO and sitemap plugins
cd ~/my-site
bundle add jekyll-seo-tag jekyll-sitemap
bundle exec jekyll serve
# View the generated metadata
open http://127.0.0.1:4000/
```
**macOS-Specific Notes:**
- Open DevTools (`Cmd + Option + I`) and inspect the `` to see generated tags.
- Visit `/sitemap.xml` and `/robots.txt` once the plugins are active.
</details>
### 🪟 Windows Empire Path
Click to expand Windows instructions
```powershell
# In an existing Jekyll site, add the SEO and sitemap plugins
cd $HOME\my-site
bundle add jekyll-seo-tag jekyll-sitemap
bundle exec jekyll serve
Start-Process http://127.0.0.1:4000/
```
**Windows-Specific Notes:**
- View source (`Ctrl + U`) to confirm the `` and `` tags are present.
- Browse to `/sitemap.xml` to see every page the crawler will discover.
</details>
### 🐧 Linux Territory Path
<details>
<summary>Click to expand Linux instructions</summary>
```bash
# In an existing Jekyll site, add the SEO and sitemap plugins
cd ~/my-site
bundle add jekyll-seo-tag jekyll-sitemap
bundle exec jekyll serve
xdg-open http://127.0.0.1:4000/
```
**Linux-Specific Notes:**
- `curl -s http://127.0.0.1:4000/sitemap.xml | head` shows the generated sitemap.
- `curl -s http://127.0.0.1:4000/ | grep -i '<meta'` lists your meta tags.
</details>
### ☁️ Cloud Realms Path
<details>
<summary>Click to expand Cloud/Container instructions</summary>
```bash
# No local Jekyll? Edit on GitHub and let GitHub Pages build the site.
# GitHub Pages whitelists jekyll-seo-tag and jekyll-sitemap by default.
# Add them to _config.yml plugins and push; Pages builds with SEO enabled.
```
**Cloud-Specific Notes:**
- Use Google's Rich Results Test and the Facebook Sharing Debugger on the live URL.
- GitHub Pages includes both SEO plugins, so no extra build setup is required.
</details>
## 🧙♂️ Chapter 1: Titles, Descriptions & Meta Tags - The Search Snippet
*The blue link and gray summary you see in search results come straight from your page's `<title>` and meta description. These also drive how a link looks when shared on social media.*
### ⚔️ Skills You'll Forge in This Chapter
- Writing effective titles and descriptions
- The essential `<head>` meta tags
- Open Graph tags for social sharing
### 🏗️ The Tags That Matter
A search snippet is built from two tags in your `<head>`:
```html
<head>
<!-- The clickable blue headline; aim for ~50-60 characters -->
<title>SEO for Jekyll Sites: A Practical Beginner Guide
```
For **social sharing**, Open Graph tags control the preview card on platforms like LinkedIn and Slack:
```html
```
Good titles are specific and front-load the keyword; good descriptions read like a one-sentence pitch, not a keyword stuffing. The description is not a ranking factor by itself, but it heavily influences whether someone clicks.
### 🔍 Knowledge Check: Titles & Meta
- [ ] What two tags form the snippet shown in search results?
- [ ] What does a canonical URL prevent?
- [ ] Which tags control how a link looks when shared on social media?
### ⚡ Quick Wins and Checkpoints
- [ ] **Wrote a title**: A concise, keyword-forward `` is set
- [ ] **Wrote a description**: A compelling ~155-character description is set
## 🧙♂️ Chapter 2: Sitemaps, robots.txt & jekyll-seo-tag - Helping the Crawler
*Crawlers need a map and a key. A **sitemap** lists your URLs; **robots.txt** grants or restricts access. And `jekyll-seo-tag` generates most of Chapter 1's tags for every page automatically.*
### ⚔️ Skills You'll Forge in This Chapter
- Generating a sitemap with a plugin
- Writing a sensible robots.txt
- Wiring up jekyll-seo-tag site-wide
### 🏗️ Automating Metadata
Enable the plugins in `_config.yml`. These are on GitHub Pages' allowlist, so they work even without local builds:
```yaml
# _config.yml
title: My Quest Site
description: A static site forged in the Web Fundamentals tier
url: https://example.com # full host, no trailing slash
author:
name: Your Name
twitter: yourhandle
plugins:
- jekyll-seo-tag
- jekyll-sitemap
```
Then place a single tag in your layout's `<head>`. It reads your `_config.yml` and each page's frontmatter and emits the title, description, canonical link, Open Graph, and JSON-LD all at once:
```liquid
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% seo %}
</head>
```
`jekyll-sitemap` automatically generates `/sitemap.xml` - no work beyond adding the plugin. Add a `robots.txt` at your site root to point crawlers to it:
```text
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
```
`User-agent: *` addresses all crawlers; `Allow: /` permits the whole site; the `Sitemap:` line tells them where the map lives.
### 🔍 Knowledge Check: Sitemaps & Plugins
- [ ] What does the `{% seo %}` tag generate?
- [ ] What is the purpose of a sitemap versus robots.txt?
- [ ] Why are these two plugins safe to use on GitHub Pages?
### ⚡ Quick Wins and Checkpoints
- [ ] **Sitemap live**: `/sitemap.xml` lists your pages
- [ ] **SEO tag working**: Page source shows generated meta tags
## 🧙♂️ Chapter 3: Structured Data & Verification - Speaking the Machine's Language
*Beyond plain meta tags, **structured data** (JSON-LD using schema.org vocabulary) tells engines precisely what a page is - an article, a recipe, a product - which can earn rich results.*
### ⚔️ Skills You'll Forge in This Chapter
- Adding JSON-LD structured data
- Validating it with Google's tools
- Verifying ownership in Search Console
### 🏗️ JSON-LD for an Article
`jekyll-seo-tag` emits basic JSON-LD for you, but you can add richer data by dropping a script into your page's head:
```html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "SEO for Jekyll Sites",
"description": "A practical beginner guide to technical SEO.",
"author": { "@type": "Person", "name": "Your Name" },
"datePublished": "2026-06-14",
"image": "https://example.com/preview.png"
}
</script>
```
The `@type` tells the engine this is an `Article`; the fields map to schema.org's vocabulary. Search engines can use this to show a richer result with an author, date, and image.
To confirm everything works:
- Paste the live URL into Google's **Rich Results Test** to validate your structured data.
- Add the site to **Google Search Console**, verify ownership (a meta tag or DNS record), and submit your sitemap so Google indexes you faster.
### 🔍 Knowledge Check: Structured Data
- [ ] What format and vocabulary does structured data use here?
- [ ] What does the `@type` field communicate to a search engine?
- [ ] Which tool validates structured data, and which monitors indexing?
## 🎮 Mastery Challenges
### 🟢 Novice Challenge: A Perfect Snippet
**Objective**: Give one page an optimized title and description.
**Requirements**:
- [ ] A `<title>` of roughly 50-60 characters
- [ ] A meta description of roughly 150-160 characters
- [ ] A canonical URL
**Validation**: View source and confirm all three tags render correctly.
### 🟡 Intermediate Challenge: Crawlable Site
**Objective**: Make a whole site crawlable and self-describing.
**Requirements**:
- [ ] Enable `jekyll-seo-tag` and `jekyll-sitemap`
- [ ] Add the `{% seo %}` tag to your layout
- [ ] Add a `robots.txt` pointing at your sitemap
**Validation**: `/sitemap.xml` and `/robots.txt` both load and the head shows generated tags.
### 🔴 Advanced Challenge: Rich Results
**Objective**: Add and validate structured data.
**Requirements**:
- [ ] Add JSON-LD `Article` data to a page
- [ ] Validate it with Google's Rich Results Test
- [ ] Verify the site in Search Console and submit the sitemap
**Validation**: The Rich Results Test reports no errors for your structured data.
## 🏆 Quest Rewards & Achievements
**🎖️ Badges Earned**:
- 🏆 **Beacon Keeper** - You made a site search engines can find and understand
- 🌱 **Sprout of Discoverability** - Meta tags and structured data are second nature
**🛠️ Skills Unlocked**:
- **Technical SEO for Static Sites** - Titles, sitemaps, and crawl control
- **Structured Data & Metadata** - Help machines understand your content
**🔓 Unlocked Quests**:
- Analytics Integration - Measure the traffic your SEO earns
- Jekyll Plugins - Automate more of your site's metadata
**📊 Progression Points**: +50 XP
## 🗺️ Next Steps in Your Journey
**Continue the Main Story**:
- 🎯 [Analytics Integration](/quests/0001/analytics-integration/) - Measure the visitors SEO brings
**Explore Side Adventures**:
- ⚔️ [Jekyll Plugins](/quests/0001/jekyll-plugins/) - The plugins that power SEO automation
- ⚔️ [Advanced Markdown](/quests/0001/advanced-markdown/) - Author the content you optimize
### Character Class Recommendations
**💻 Software Developer**: Continue to [Jekyll Plugins](/quests/0001/jekyll-plugins/)
**🏗️ System Engineer**: Explore [Analytics Integration](/quests/0001/analytics-integration/)
**🎨 Frontend Specialist**: Advance to [Analytics Integration](/quests/0001/analytics-integration/)
## 📚 Resources
### Official Documentation
- [Google Search Central: SEO Starter Guide](https://developers.google.com/search/docs/fundamentals/seo-starter-guide) - The canonical guidance
- [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag) - The metadata plugin
- [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap) - Automatic sitemap generation
### Community Resources
- [schema.org](https://schema.org/) - The structured-data vocabulary
- [Google Rich Results Test](https://search.google.com/test/rich-results) - Validate JSON-LD
- [Open Graph protocol](https://ogp.me/) - The social-sharing meta standard
### Learning Materials
- [Google Search Console](https://search.google.com/search-console/about) - Monitor indexing and performance
- [Moz Beginner's Guide to SEO](https://moz.com/beginners-guide-to-seo) - A thorough primer
## 🤝 Quest Completion Checklist
- [ ] ✅ Completed all primary objectives
- [ ] ✅ Optimized a page's title, description, and structured data
- [ ] ✅ Answered all knowledge check questions
- [ ] ✅ Completed at least one mastery challenge
- [ ] ✅ Explored the resource library
- [ ] ✅ Identified your next quest in the journey
## 🕸️ Knowledge Graph
*Structured wiki-links connect this quest to the IT-Journey knowledge graph. Open the [Obsidian Graph View](/docs/obsidian/graph/) to explore connections.*
**Level hub:** [[Level 0001 - Web Fundamentals]]
**Overworld:** [[🏰 Overworld - Master Quest Map]]
**Unlocks:** [[Analytics Integration]] · [[Jekyll Plugins]]
**Obsidian docs:** [[Obsidian Knowledge Graph and Wiki Links]]
🎁 Rewards
⚡50 XP
Badges
🏆 Beacon Keeper - Made a site search engines can find and understand
🌱 Sprout of Discoverability - Internalized meta tags and structured data
Skills unlocked
🛠️ Technical SEO for Static Sites
🧠 Structured Data & Metadata
Features unlocked
Access to the measurement quests of Level 0001 Web Fundamentals
This website uses cookies and similar technologies to enhance your browsing experience, analyze traffic, and provide personalized content.
Cookie Preferences
Customize your cookie preferences below. You can change these settings at any time by clicking the cookie preferences link in our footer.
Essential Cookies
Always Active
These cookies are necessary for the website to function properly. They enable core functionality such as navigation, security, and accessibility features.
Analytics Cookies
These cookies help us understand how visitors interact with our website by collecting anonymous information about page visits, time spent, and user behavior patterns.