Building a Hybrid Intelligent Linking System in Jekyll for SEO and Engagement

In a Jekyll site, random posts add freshness, while related posts strengthen SEO by connecting similar content. But what if you could combine both — giving each reader a mix of relevant and surprising links? That’s exactly what a hybrid intelligent linking system does. It helps users explore more, keeps your bounce rate low, and boosts keyword depth through contextual connections.

This guide explores how to build a responsive, SEO-optimized hybrid system using Liquid filters, category logic, and controlled randomness — all without JavaScript dependency.

Why Combine Related and Random Posts

Traditional “related post” widgets only show articles with similar categories or tags. This improves relevance but can become predictable over time. Meanwhile, “random post” sections add diversity but may feel disconnected. The hybrid method takes the best of both worlds: it shows posts that are both contextually related and periodically refreshed.

• SEO benefit: Strengthens semantic relevance and internal link variety.
• User experience: Keeps the site feeling alive with fresh combinations.
• Technical efficiency: Fully static — generated at build time via Liquid.

Step 1: Defining the Logic for Related and Random Mix

Let’s begin by using page.categories and page.tags to find related posts. We’ll then merge them with a few random ones to complete the hybrid layout.

{% raw %}
{% assign related_posts = site.posts | where_exp:"post", "post.url != page.url" %}
{% assign same_category = related_posts | where_exp:"post", "post.categories contains page.categories[0]" | sample: 3 %}
{% assign random_posts = site.posts | sample: 2 %}
{% assign hybrid_posts = same_category | concat: random_posts %}
{% assign hybrid_posts = hybrid_posts | uniq %}
{% endraw %}

This Liquid code does the following:

1. Finds posts excluding the current one.
2. Samples 3 posts from the same category.
3. Adds 2 truly random posts for diversity.
4. Removes duplicates for a clean output.

Step 2: Outputting the Hybrid Section

Now let’s display them in a visually balanced grid. We’ll use lazy loading and minimal HTML for SEO clarity.

{% raw %}
<section class="hybrid-links">
  <h3>Explore More From This Site</h3>
  <div class="hybrid-grid">
    {% for post in hybrid_posts %}
      <a href="{{ post.url | relative_url }}" class="hybrid-item">
        <img src="{{ post.image | default: '/photo/default.png' }}" alt="{{ post.title }}" loading="lazy">
        <h4>{{ post.title }}</h4>
      </a>
    {% endfor %}
  </div>
</section>
{% endraw %}

This structure is simple, semantic, and crawlable. Google can interpret it as part of your site’s navigation graph, reinforcing contextual links between posts.

Step 3: Making It Responsive and Visually Lightweight

The layout must stay flexible without using JavaScript or heavy CSS frameworks. Let’s build a minimalist grid using pure CSS.

.hybrid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.hybrid-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hybrid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.hybrid-item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.hybrid-item h4 {
  padding: 0.8rem 1rem;
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
}

This grid will naturally adapt to any screen size — from mobile to desktop — without media queries. CSS Grid’s auto-fit feature takes care of responsiveness automatically.

Step 4: SEO Reinforcement with Structured Data

To help Google understand your hybrid section, use schema markup for ItemList. It signals that these links are contextually connected items from the same site.

{% raw %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {% for post in hybrid_posts %}
    {
      "@type": "ListItem",
      "position": {{ forloop.index }},
      "url": "{{ post.url | absolute_url }}"
    }{% if forloop.last == false %},{% endif %}
    {% endfor %}
  ]
}
</script>
{% endraw %}

Structured data not only improves SEO but also makes your internal link relationships more explicit to Google, improving topical authority.

Step 5: Intelligent Link Weight Distribution

One subtle SEO technique here is controlling which posts appear most often. Instead of purely random selection, you can weigh posts based on age, popularity, or tag frequency. Here’s how:

{% raw %}
{% assign weighted_posts = site.posts | sort: "date" | reverse | slice: 0, 10 %}
{% assign random_weighted = weighted_posts | sample: 2 %}
{% assign hybrid_posts = same_category | concat: random_weighted | uniq %}
{% endraw %}

This prioritizes newer content in the random mix — a great strategy for resurfacing recent posts while maintaining variety.

Step 6: Adding a Subtle Analytics Layer

Track how users interact with hybrid links. You can integrate a lightweight analytics tag (like Plausible or GoatCounter) to record clicks. Example:

<a href="{{ post.url }}" data-analytics="hybrid-click">
  <img src="{{ post.image }}" alt="{{ post.title }}">
</a>

This data helps refine your future weighting logic — focusing on posts that users actually engage with.

Step 7: Balancing Crawl Depth and Performance

While internal linking is good, excessive cross-linking can dilute crawl budget. A hybrid system with 4–6 links per page hits the sweet spot: enough variation for engagement, but not too many for Googlebot to waste resources on.

• Best practice: Keep hybrid sections under 8 links.
• Include contextually relevant anchors.
• Prefer category-first logic over tag-first for clarity.

Step 8: Testing Responsiveness and SEO

Before deploying, test your hybrid system under these conditions:

Test	Tool	Goal
Mobile responsiveness	Chrome DevTools	Clean layout on all screens
Speed and lazy load	PageSpeed Insights	LCP under 2.5s
Schema validation	Rich Results Test	No structured data errors
Internal link graph	Screaming Frog	Balanced interconnectivity

Step 9: Optional JSON Feed Integration

If you want to make your hybrid section available to other pages or external widgets, you can output it as JSON:

{% raw %}
[
  {% for post in hybrid_posts %}
  {
    "title": "{{ post.title | escape }}",
    "url": "{{ post.url | absolute_url }}",
    "image": "{{ post.image | default: '/photo/default.png' }}"
  }{% unless forloop.last %},{% endunless %}
  {% endfor %}
]
{% endraw %}

This makes it possible to reuse your hybrid links for sidebar widgets, RSS-like feeds, or external integrations.

Final Thoughts

A hybrid intelligent linking system isn’t just a fancy random post widget — it’s a long-term SEO and UX investment. It keeps your content ecosystem alive, supports semantic connections between posts, and ensures visitors always find something worth reading. Best of all, it’s 100% static, privacy-friendly, and performs flawlessly on GitHub Pages.

By balancing relevance with randomness, you guide users deeper into your content naturally — which is exactly what modern search engines love to reward.