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:
- Finds posts excluding the current one.
- Samples 3 posts from the same category.
- Adds 2 truly random posts for diversity.
- 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.