Explore More Passive Income Ideas

add search to jekyll without javascript frameworks

Why Use Native Search for Jekyll Most Jekyll blogs rely on static content, which makes traditional database-driven search impossible. However, you don’t need heavy JavaScript frameworks like Vue or React to implement search. By leveraging JSON, Liquid, and a bit of vanilla JavaScript, you can create a responsive search experience that works on any static host—even GitHub Pages. Core Concepts Here’s the approach we’ll take: Generate a JSON index of your posts during build time Load the JSON file with plain JavaScript Match user input against title and content Display matching posts as results dynamically Step 1: Create a Search Index in JSON Add a new file called search.json at the root of your project: --- layout: null --- [ {% raw %}{% for post in site.posts %} { "title": "{{ post.title | escape }}", "url": "{{ post.url | absolute_url }}", "date": "{{ post.date | date: '%Y-%m-%d' }}...

jekyll seo basics for static blogs

Why SEO Still Matters for Static Blogs

Jekyll is a static site generator, meaning it doesn’t rely on dynamic databases or back-end servers. While this makes it blazing fast and secure, it also requires a more intentional approach to SEO. You don’t get the automatic SEO perks of WordPress plugins—but you can still achieve excellent rankings with the right structure and strategy.

Jekyll and SEO: The Fundamental Challenges

Before diving into tactics, understand the key SEO challenges for Jekyll:

  • No plugin ecosystem like Yoast to automate SEO checks
  • No dynamic sitemap or robots.txt by default
  • No built-in canonical tag handling
  • No structured data unless you code it manually

Despite these, Jekyll’s flexibility allows you to address each point with precise control—perfect for technical SEO enthusiasts.

Step 1: Set Up SEO-Friendly Metadata

Start by defining a consistent metadata structure in your layout files. Here's how to set basic tags in _layouts/default.html:

<title>{{ page.title }} | {{ site.title }}</title>
<meta name="description" content="{{ page.description | default: site.description }}">
<meta property="og:title" content="{{ page.title }}">
<meta property="og:description" content="{{ page.description }}">
<meta property="og:url" content="{{ page.url | absolute_url }}">

You can even add Twitter cards and canonical tags for better indexing:

<link rel="canonical" href="{{ page.url | absolute_url }}">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{ page.title }}">
<meta name="twitter:description" content="{{ page.description }}">

Step 2: Customize Robots.txt

Manually create a robots.txt in your root directory:

User-agent: *
Allow: /

Sitemap: {{ site.url }}/sitemap.xml

This file tells search engines how to crawl your site. You can also exclude specific paths or draft content.

Step 3: Generate a Sitemap Automatically

Use the jekyll-sitemap plugin for an automated sitemap.xml. Add this to your _config.yml:

plugins:
  - jekyll-sitemap

Then make sure your _config.yml has a valid url: set, such as:

url: https://yourdomain.com

Step 4: Use Clean URLs and Permalinks

Readable URLs are better for SEO and user experience. Set up pretty permalinks in _config.yml:

permalink: /:categories/:title/

This will create URLs like /blog/jekyll-seo-basics/ instead of /2025/05/25/jekyll-seo-basics.html.

Step 5: Structure Your Headings

Use <h2>, <h3>, and <h4> tags to create a semantic content hierarchy. Avoid skipping heading levels and ensure each article has:

  • A unique title (<title>)
  • Descriptive <h2> for main sections
  • Logical substructure with <h3> and <h4>

Step 6: Add Structured Data Manually

You can add JSON-LD to your templates for Google’s rich results. Example for a blog post:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ page.title }}",
  "datePublished": "{{ page.date | date_to_xmlschema }}",
  "author": {
    "@type": "Person",
    "name": "Admin"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{ page.url | absolute_url }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{ site.title }}"
  }
}
</script>

Step 7: Optimize Performance

Search engines prioritize fast websites. Improve your Jekyll site’s speed by:

  • Compressing images
  • Using lazy loading
  • Minifying CSS/JS
  • Hosting on fast CDNs like Netlify or Cloudflare Pages

Step 8: Monitor with Google Search Console

Verify your site in Search Console using a DNS or HTML file upload. Submit your sitemap and fix any crawl or mobile usability issues Google reports.

Conclusion

Jekyll may not come with out-of-the-box SEO automation, but it offers all the tools you need to build a fast, indexable, and optimized blog. With deliberate structure, metadata, and performance enhancements, your Jekyll blog can compete with any dynamic CMS. Static doesn’t mean limited—it just means you’re in full control.


Archives / All Content


© ScrollBuzzLab . All rights reserved.