How Do You Optimize a Cloned Jekyll Site for SEO and Speed?

By -

Built Your Site from a Cloned Jekyll Theme? Now Make It Fast and Findable

After cloning and customizing your Jekyll site, the next step is to ensure it's optimized for real-world users and search engines. Performance and SEO are critical — especially if your site is part of a blog, portfolio, product page, or documentation hub.

This guide will help you configure your cloned Jekyll site to load faster, rank higher, and offer a better experience.

Step 1: Add the Right SEO Plugins

Start by integrating essential plugins that help with metadata, indexing, and search engine structure.

Recommended Plugins

gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-feed"

Update _config.yml:

plugins:
  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-feed

In Your _includes/head.html

{% raw %}
{% seo %}
{% endraw %}

This injects dynamic meta tags, Open Graph data, Twitter cards, and more.

Step 2: Add Canonical URLs

Prevent duplicate content issues by adding canonical links:

{% raw %}
<link rel="canonical" href="{{ page.url | absolute_url }}" />
{% endraw %}

Step 3: Generate a Sitemap Automatically

The jekyll-sitemap plugin creates sitemap.xml automatically. Make sure url: and baseurl: are set in _config.yml:

url: "https://yoursite.com"
baseurl: ""

Step 4: Minify Your Output HTML and Assets

GitHub Pages doesn’t minify your content. But since you’ve cloned and now control the build, you can use:

gem "jekyll-compress-html"

Or for a deeper approach, use a custom build step with tools like:

  • HTMLMinifier
  • cssnano (PostCSS)
  • UglifyJS or esbuild for JS

Step 5: Optimize Image Loading

Use the loading="lazy" attribute for all images:

<img src="/images/photo.jpg" alt="Alt text" loading="lazy" />

Convert images to WebP where supported, and compress using tools like TinyPNG or Squoosh.

Step 6: Serve Static Assets via CDN

Host JS, CSS, and fonts on a CDN (Cloudflare, jsDelivr, or Netlify’s CDN). This reduces TTFB and improves global load speed.

Step 7: Structure Your HTML for Better Crawling

Ensure every page uses semantic tags:

  • <main> for core content
  • <nav> for menus
  • <article> for blog posts (optional)
  • <header> and <footer> inside includes

Use aria-label and skip links for accessibility.

Step 8: Improve Mobile UX

Add the proper viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Use responsive images and make sure CSS is fully mobile-optimized using media queries and flexible containers.

Step 9: Use Lighthouse to Audit Performance

Run your site through Chrome DevTools → Lighthouse panel. Focus on these metrics:

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Time to Interactive (TTI)
  • Cumulative Layout Shift (CLS)

Identify JavaScript bloat, render-blocking CSS, or uncompressed images.

Step 10: Create SEO-Friendly URLs and Metadata

Jekyll automatically uses file slugs, but customize as needed:

permalink: /my-seo-article/
title: "Best Practices for Jekyll SEO"
description: "A complete guide to optimizing your Jekyll site for search engines."

Step 11: Enable Open Graph and Twitter Cards

These are handled by jekyll-seo-tag, but make sure your images are defined:

image: "/assets/images/share.png"

And in HTML:

{% raw %}
{% seo %}
{% endraw %}

Step 12: Add Structured Data (JSON-LD)

For rich search features, add schema markup:

{% raw %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Your Site Name",
  "url": "{{ site.url }}"
}
</script>
{% endraw %}

Step 13: Use Netlify or GitHub Actions for Custom Builds

Use bundle exec jekyll build in CI/CD pipelines so plugins and optimizations take effect.

Step 14: Make Navigation and Breadcrumbs Crawlable

Use standard <a> links, and avoid JS-based routing for menus. Use breadcrumb schema if applicable.

Conclusion: From Cloned Theme to Lightning-Fast SEO Engine

Cloning gave you control. Optimizing makes that control meaningful. Jekyll offers blazing speed by default, but with proper plugin usage, asset strategy, and SEO structure — you can outperform even commercial platforms.

Once you apply these optimizations, your cloned site won’t just look good. It will load faster, rank better, and give your users exactly what they’re looking for.