Locale-specific content in CMS - Webflow Localization

I am searching for the most effective method to address the issue of having content available for only one location.

I am in the process of migrating blog posts for two different locales. However, the challenge is that the content differs between locations, with each one featuring unique articles.

I could potentially align them within the CMS, but Webflow complicates matters by automatically inserting a link rel=“alternate” into the header…

Is there a solution to this issue? I am considering several options:

  • Allowing Webflow to host content specific to a particular location only - not possible yet?
  • Disabling the alternate link when the translation is not available - not possible yet?
  • Attempting to modify the final header in HTML using a custom application - not possible yet?
  • Translating hundreds of articles to ensure they match the respective locales - the worse case scenario for me.

The only solution I found it by using reverse proxy. I use Cloudflare and they allow you to create workers and change the response HTML. Here is the code I implemented.

addEventListener('fetch', event => {
	event.respondWith(handleRequest(event.request))
})

class LinkRelAlternateHandler {
	constructor(locale) {
		this.locale = locale;
	}

	element(element) {
		// Remove <link rel="alternate" with hreflang>
		if (element.tagName === "link" && element.getAttribute("rel") === "alternate" && element.hasAttribute("hreflang")) {
			element.remove();
		}

		// Adjust <a> elements with class "drop_down_language_link" based on locale
		if (element.getAttribute("class") && element.getAttribute("class").includes("drop_down_language_link")) {
			let currentHreflang = element.getAttribute("hreflang");
			// If the page locale is English, look for Polish links to adjust, and vice versa
			if ((this.locale === 'en' && currentHreflang === 'pl') || (this.locale === 'pl' && currentHreflang === 'en')) {
				// Remove hreflang attribute
				element.removeAttribute("hreflang");
				// Adjust the href attribute by removing the last part of the URL
				let href = element.getAttribute("href");
				let parts = href.split('/');
				if (parts.length > 1) {
					parts.pop(); // Removes the last segment
					element.setAttribute("href", parts.join('/'));
				}
			}
		}
	}
}

async function handleRequest(request) {
	// Determine the locale from the request URL
	let locale = request.url.includes('/pl/') ? 'pl' : 'en';

	// Fetch the original response
	const response = await fetch(request);

	// Create a new instance of HTMLRewriter to apply transformations
	const rewriter = new HTMLRewriter()
		.on('link[rel="alternate"][hreflang], a.drop_down_language_link', new LinkRelAlternateHandler(locale))
		.transform(response);

	// Return the transformed response
	return rewriter;
}

I over complicated the problem, actually it’s totally possible with the CMS, I just got the answer from the Support.

This is possible currently with CMS content. You can add specific items to specific locales in your site. When you add an item to the primary locale, it is then created for all locales but you can then remove it from secondary locales if needed.

Also it works in the second locale, just add content there and don’t add it to the primary - works perfectly fine, all tested.