Zest Link Run

Why Localized 404 Pages Matter Standard 404 pages serve a purpose: to notify users that the page they're looking for no longer exists. But for multilingual Jekyll sites, a generic 404 page in one language can confuse users browsing in another. Creating localized, intelligent 404 pages improves user experience, reduces bounce rate, and strengthens the credibility of your brand internationally. Step 1: Set Up a Global 404 Page Template Start by creating a 404.html file in the root of your Jekyll site. This file will use Liquid logic to detect the user’s preferred language and redirect or render accordingly. Basic 404 Structure --- layout: default permalink: /404.html --- <script> const supportedLangs = ['en', 'es', 'fr', 'de', 'jp']; const userLang = (navigator.language || navigator.userLanguage).substring(0, 2); const matchedLang = supportedLangs.includes(userLang) ? userLang : 'en'; const redirectURL = `/...

Why You Need Language-Aware Menus When building a multilingual site in Jekyll, your navigation menus need to reflect the current language context. A user browsing the French version of your site should not see English labels or links pointing to English pages. Instead of duplicating navigation code across each layout, the smarter approach is to centralize the structure using YAML data files. Step 1: Create a Navigation YAML File Inside your _data folder, create a file named navigation.yml . Define language-specific navigation entries: en: - title: "Home" url: "/en/" - title: "About" url: "/en/about/" - title: "Docs" url: "/en/docs/" fr: - title: "Accueil" url: "/fr/" - title: "À propos" url: "/fr/about/" - title: "Documentation" url: "/fr/docs/" This keeps all navigation logic in one file, making it easy to maintain a...

Why Client-Side Filtering is Essential for UX Static sites often lack the dynamic interactivity users expect, especially when handling complex documentation or blog archives. Adding filtering capabilities on the client side provides instant feedback, speeds up discovery, and gives your multilingual Jekyll site a modern, app-like experience. This guide shows how to implement live filtering for multilingual content using HTML, JavaScript, and Jekyll’s built-in data structure. Step 1: Prepare a Structured Content Block Create a content section with clear language and category tags. Here's a simplified format in your HTML: <div id="filter-controls"> <select id="language-filter"> <option value="all">All Languages</option> <option value="en">English</option> <option value="es">Spanish</option> <option value="fr">French</option> </sele...

Why Highlighting Matters in Search UX When users land on a page after searching, they often need to visually locate where their search keywords appear. This becomes especially important in long-form documentation or blogs. By automatically highlighting those terms, you improve usability, reduce bounce rate, and guide users directly to the content they care about. For multilingual sites, this requires extra care — search terms may appear in different languages, and the highlights must respect the page’s language context. Step 1: Pass Search Terms via URL When users perform a search (e.g., using Lunr.js or Simple-Jekyll-Search), include the search query in the resulting URL. This is often done like this: https://example.com/docs/page.html?q=installation Or for multilingual: https://example.com/es/guias/instalacion?q=instalación This lets the destination page know what word to highlight dynamically using JavaScript. Step 2: Add a Highlight Script Include Create an ...

Why Alternate Language URLs Matter for SEO When you offer the same content in multiple languages, search engines must understand which version to show to which user. Mismanaging this can cause duplicate content issues, indexing of the wrong version, or missed opportunities in international search rankings. To address this, you should implement a robust system of alternate language URLs using structured routing and the HTML hreflang tag in your Jekyll site. Step 1: Define Language-Specific URLs The best practice is to have separate URLs for each language version. For example: /en/guide/getting-started/ – English version /es/guide/getting-started/ – Spanish version /fr/guide/getting-started/ – French version This ensures each language is treated as a unique document by Google, which is essential for proper indexing and ranking. Configure Permalinks in Front Matter Inside your content file, define a language-specific permalink: lang: en permalink: /en/gu...

Why Per-Language Search is Important When managing a multilingual Jekyll site, it's not enough to offer translation — your search function must also understand language boundaries. Without separation, users searching in Japanese might get results in Portuguese, degrading the experience. With Lunr.js, you can build client-side search indexes tailored to each language, ensuring relevant results and faster response times. Step 1: Install Lunr.js and Multilingual Plugins First, include the Lunr.js core library in your site’s assets: /assets/js/lunr.min.js Then include language support plugins for each language you plan to index (e.g., lunr.stemmer.support.js , lunr.jp.js , lunr.pt.js ). Example Include: <script src="/assets/js/lunr.min.js"></script> <script src="/assets/js/lunr.stemmer.support.js"></script> <script src="/assets/js/lunr.jp.js"></script> <script src="/assets/js/lunr.pt.js"...