Creating Language-Aware Related Posts

For multilingual Jekyll sites, showing related posts in the same language improves user experience significantly. Without it, readers might see content in a language they don’t understand — hurting engagement and bounce rate.

Step 1: Use Language Codes in Front Matter

Make sure each post includes a language key in its front matter, typically based on the folder structure or filename prefix:

---
title: "Membangun Halaman FAQ Interaktif"
tags: [faq, liquid]
categories: [panduan]
lang: id
---

This lang key will be used to filter posts that match the current page’s language.

Step 2: Build a Language-Aware Related Post Block

We combine the logic from previous examples (tag/category filtering) and add a filter for lang.

{% assign current_tags = page.tags %}
{% assign current_lang = page.lang %}
{% assign related = site.posts | where_exp: "p", "p.url != page.url and p.lang == current_lang" %}

{% assign filtered = "" | split: "" %}
{% for post in related %}
  {% assign intersect = post.tags | where_exp: "tag", "current_tags contains tag" %}
  {% if intersect != empty %}
    {% assign filtered = filtered | push: post %}
  {% endif %}
{% endfor %}

{% if filtered.size == 0 %}
  {% assign fallback = site.posts | where_exp: "p", "p.url != page.url and p.lang == current_lang and p.categories contains page.categories[0]" %}
  {% assign filtered = fallback %}
{% endif %}

{% if filtered.size > 0 %}
  <div class="related-posts multilingual">
    <h3>Postingan Terkait</h3>
    <ul>
    {% for post in filtered limit:4 %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
    </ul>
  </div>
{% endif %}

Step 3: Automatically Assign Language Using Folder Structure

If you use a directory structure like:

/_posts/en/
  2025-06-01-my-first-post.md

/_posts/id/
  2025-06-01-post-pertama.md

You can extract the language from the path using front matter defaults in _config.yml:

defaults:
  - scope:
      path: "_posts/en"
    values:
      lang: "en"
  - scope:
      path: "_posts/id"
    values:
      lang: "id"

This avoids setting lang: manually in every post.

Step 4: Translate Section Headings Based on Page Language

To make your related post title (“Related Posts”, “Postingan Terkait”, etc.) dynamic, use a language-based dictionary in a data file like _data/strings.yml:

en:
  related: "Related Posts"
id:
  related: "Postingan Terkait"

Then in your layout:

<h3>{{ site.data.strings[page.lang].related }}</h3>

Optional: Multilingual Tag Mapping (Advanced)

Sometimes you might want the system to consider related posts with “equivalent tags” across languages. For example:

en: seo
id: optimasi-mesin-pencari

You can define such mappings in another data file like _data/tag-aliases.yml and preprocess tags to create a normalized matching array.

Visual Layout for Multilingual Related Posts

The visual grid from the previous article can be reused here. The only change is ensuring that thumbnails and excerpts are available in each language version of the post.

Multilingual Thumbnails and Excerpts

If each language version has its own images, you can use language-specific naming conventions:

thumbnail: "/assets/images/{{ page.lang }}/related-faq.png"

And in Liquid:

<img src="{{ post.thumbnail | default: '/assets/images/default.png' }}" alt="{{ post.title }}">

Conclusion

By combining tag/category filtering with a simple lang check, we’ve created a multilingual-aware related post section. This approach is scalable, doesn't require plugins, and keeps users inside the correct language context — improving their experience and reducing bounce rates.

Selanjutnya, kita akan membahas bagaimana mengintegrasikan related post multilingual ini dengan fitur search client-side, agar pengunjung juga bisa mencari artikel lain dalam bahasa yang sama melalui JavaScript dan data Liquid.