Building bilingual event pages in Webflow using a single CMS Collection?

Community resources General
1

I’m building bilingual event pages in Webflow using a single CMS Collection.
• Some events are in Arabic only, some in English, some in both.
• Shared fields (date, location, registration link, etc.) are not duplicated.
• Language-specific fields (title, summary, content) exist in both Arabic and English.
• I use two switches: Arabic Enabled and English Enabled.

I want to:

  1. Show content based on the language listing page the visitor came from
    (e.g., show only Arabic fields if clicked from Arabic listing).
  2. Have SEO-friendly language-specific URLs, like:
    /ar/events/event-name and /en/events/event-name

What’s the best way to structure this in Webflow to keep it SEO-friendly, editor-friendly, and without duplicating the CMS Collection?

2

Hi Rahman,

Generally speaking this is what Webflow Localization is for.
One CMS, two languages.
Auto-published to pages under the locale paths you choose.
Ability to publish an item to only one or both locales

You should also be able to use a collection list and show only those items relevant to the current locale.

I’d test that out first, before custom coding anything. It’s the cleanest approach.

3

Thank you! I’m not sure if it’s already included in all plans. I’m trying to help a friend for whom I designed a website a while ago — he’s on a tight budget. And one more thing, the website is already published since few years but I just wanna add an event without going into lots of work. Please advise

4

Localization is available to add to all plans. You’d need 1 locale and I think it’s about $12/mo, or $9/mo if you pay annually.

Otherwise, you’d need to build a custom solution, which involves a number of pieces;

  • Translated content
  • Alt hreflang links
  • Linking intelligence if you have a language switcher
  • Sitemap.xml changes

It depends on what user experience you want and how much you care about SEO.

A crude way is;

  • Create two Event collections, one for English, one for Arabic
  • When you have an event put it in one or both collections, depending
  • Use the same event slug in each place, you’d have to track this yourself

For paths;

  • Set the Collection slugs to e.g. ar-events and en-events so that you get e.g.
    • /ar-events/event1 and /en-events/event1.
  • Or create, a folder /events and then the collection slugs of ar and en, e.g.
    • /events/ar/event1 and /events/en/event1

There isn’t any way I can think of natively to get /ar/events/event1 and /en/events/event1, because the collections cannot both be slugged as events.

The rest would have to be done manually or stored in the CMS and embedded… your alt hreflang links cross-links between the language versions.

Sitemap.xml would either just be ignored or you’d create it manually and update it manually every time you publish a new event.

1 Like
5

Thank you for the generace details. If my friend has to pay extra, then I think the easiest solution is to create two collections — one for each.
Side note: I tried enabling localization and it seems to work. Does that mean it’s included in his CMS plan? Or is it just a test feature and won’t publish later without an upgrade?

6

No, you won’t be able to publish that alt locale.

1 Like