Jekyll Layouts and OpenGraph Meta Tags

This repository uses Jekyll layouts to eliminate duplication while allowing per-page customization of OpenGraph meta tags for social media previews.

Structure

_layouts/
├── default.html    # Base layout with sidebar, navigation, and meta tag variables
└── blog.html       # Blog-specific layout that extends default

_posts/             # Jekyll blog posts (format: YYYY-MM-DD-title.md)
├── 2024-05-17-ai-that-works-camp.md

_config.yml         # Site-wide configuration and default meta tags
index.html          # Homepage (uses default layout)
about.html          # About page (uses default layout with different meta tags)

How It Works

1. Default Layout (_layouts/default.html)

The default layout contains:

• Common HTML structure (head, sidebar, navigation)
• Variable-driven meta tags using Jekyll’s liquid templating
• Conditional inclusion of D3.js and SVG sprites based on page variables

2. Site-wide Defaults (_config.yml)

Default values for meta tags are set in _config.yml:

title: "Jeba Singh Emmanuel - Engineering Leader & Builder"
description: "Engineering leader with 12+ years at LinkedIn, passionate about AI and product development"
author: "Jeba Singh Emmanuel"
url: "https://graydot.ai"
og_image: "https://graydot.ai/images/favicon.png"

3. Per-page Customization

Each page can override meta tags using front matter:

---
layout: default
title: "Custom Page Title"
description: "Custom page description"
og_title: "Custom OpenGraph Title"
og_description: "Custom OpenGraph description"
og_image: "https://graydot.ai/custom-image.png"
og_url: "https://graydot.ai/custom-page.html"
---

Meta Tag Hierarchy

The system uses a fallback hierarchy for meta tags:

1. Page-specific (front matter)
2. Site-wide defaults (_config.yml)
3. Hard-coded fallbacks (in layout)

Example for og:title:

Jekyll Layouts and OpenGraph Meta Tags

Available Meta Tag Variables

Basic Meta Tags

• title - Page title
• description - Page description
• author - Page author
• keywords - Page keywords

OpenGraph Meta Tags

• og_title - OpenGraph title
• og_description - OpenGraph description
• og_image - OpenGraph image URL
• og_url - OpenGraph URL
• og_type - OpenGraph type (default: “website”)

Twitter Meta Tags

• twitter_title - Twitter card title
• twitter_description - Twitter card description
• twitter_image - Twitter card image
• twitter_card - Twitter card type (default: “summary_large_image”)

Layout Control Variables

• include_d3 - Include D3.js library (true/false)
• include_svg_sprite - Include SVG sprite (true/false)

Blog Posts

Creating Blog Posts

1. Create files in _posts/ with format: YYYY-MM-DD-title.md
2. Use the blog layout
3. Set blog-specific meta tags

Example blog post front matter:

---
layout: blog
title: "My Blog Post Title"
date: 2024-05-17
author: "Jeba Singh Emmanuel"
excerpt: "Short description of the post"
tags: ["AI", "Technology"]

# Custom meta tags for this blog post
og_title: "My Blog Post Title - Jeba's Blog"
og_description: "Detailed description for social media sharing"
og_image: "https://graydot.ai/images/blog/my-post-image.png"
og_url: "https://graydot.ai/2024/05/17/my-blog-post.html"
og_type: "article"
---

Blog Layout Features

The blog layout (_layouts/blog.html) adds:

• Article header with title, date, author
• Formatted content area
• Tag display
• Blog-specific styling

Examples

Homepage (index.html)

---
layout: default
title: "Jeba Singh Emmanuel - Engineering Leader & Builder"
og_title: "Jeba Singh Emmanuel - Engineering Leader & Builder"
og_url: "https://graydot.ai/"
include_d3: true
include_svg_sprite: true
---

About Page (about.html)

---
layout: default
title: "About Jeba Singh Emmanuel"
og_title: "About Jeba Singh Emmanuel - Engineering Leader"
og_description: "Learn more about Jeba's background and experience"
og_url: "https://graydot.ai/about.html"
---

Blog Post

---
layout: blog
title: "AI That Works Camp Notes"
og_title: "AI That Works Camp Notes - Jeba's Blog"
og_image: "https://graydot.ai/blog-images/ai-camp.png"
og_type: "article"
---

Benefits

1. No Duplication: Common HTML structure defined once
2. SEO Friendly: Each page can have unique meta tags
3. Social Media Ready: Custom OpenGraph tags for each page/post
4. Maintainable: Changes to layout affect all pages
5. Flexible: Easy to add new pages with custom meta tags

GitHub Pages Compatibility

This setup works perfectly with GitHub Pages’ built-in Jekyll support. No additional configuration needed - just push your changes and GitHub Pages will build the site automatically.

Adding New Pages

1. Create a new .html or .md file
2. Add front matter with layout and meta tags
3. Write your content
4. Commit and push - GitHub Pages handles the rest!

Example new page:

---
layout: default
title: "My New Page"
description: "Description of my new page"
og_title: "My New Page - Jeba's Site"
og_description: "Social media description for my new page"
og_image: "https://graydot.ai/images/new-page.png"
---

# My New Page Content

This is the content of my new page...