How can a multi-language blog be created using Webflow CMS with only one CMS Collection Page for "post"?

TL;DR

Add a Language field to the CMS and use duplicate fields or items for translations.
Show content conditionally based on language using Conditional Visibility.
Link between language versions dynamically using slugs and language codes.
For subfolder URLs or hreflang SEO support, use code, reverse proxies, or JavaScript workarounds.

Creating a multi-language blog with only one CMS Collection Page for “post” in Webflow requires using conditional visibility, language fields, and custom structure. Here’s how to do it effectively:

1. Add Language Fields to CMS Collection

Go to CMS → Posts and click + Add Field.
Add a Language field using the Option field type. Examples: English, Spanish, French.
Optional: If you want multiple translations in one item, create Plain Text fields for each translation (e.g., Title - English, Title - French).
Save and re-publish your site after updating the Collection schema.

2. Structure Your CMS Content

Ensure each post has content for all desired languages, or create separate posts per language with identical slugs and a language selection field.
Keep the Slug or Reference slug consistent across different language versions (if using different items per language).

3. Use URL Parameters or Subfolders

Decide how visitors will select a language:
Option A: Subfolders like /en/post/my-article, /fr/post/my-article.
Option B: URL parameter like ?lang=en.

Webflow only supports one Collection Page template per Collection, so subfolder-based structures require workarounds (see step 6).

4. Set Up Multi-Language Template Using Conditional Visibility

In the CMS Collection Page, place multiple versions of content fields (e.g., Heading - English, Heading - French).
Use Conditional Visibility to show each version only when the post’s Language field matches a certain value.

Example:

Heading A uses Heading - English field and is only visible if Language is English.
Heading B uses Heading - French field and is only visible if Language is French.

5. Create a Language Switcher

Create buttons or links that navigate to the post in another language.
Use CMS references or dynamically build URLs using slugs and language codes.

Example:

Button linking to {slug} of the French version with /fr/ prefix (use Webflow’s CMS URL building options).

6. (Optional) Create Custom Language Paths with Reverse Proxy

Webflow does not support folder-level language segmentation directly like /fr/post/slug.
To achieve this, use a reverse proxy setup with Cloudflare Workers or Netlify Edge that rewrites URLs such as /fr/post/slug to Webflow’s default /post/slug.
Alternatively, incorporate a JavaScript language detection + redirect mechanism—though this can harm SEO.

7. Improve SEO with hreflang

Use the <head> tag override in Page Settings to add hreflang meta tags for different language versions of each post.
Include tags like: <link rel="alternate" hreflang="fr" href="https://yoursite.com/fr/post/slug">.

Webflow's limitations mean you must use custom code or scripts for complete hreflang support.