Problem with Hreflang tags on webflow dynamic pages

We have 2 language versions on our website (for this we use Weglot) and on our English version (that is the main one) that is created with Webflow we are now using dynamic pages and we can’t find any solution on how to add custom Hreflang tags for every page.
Once we add ane Hreflang tag → it appears on every page within our CMS collection (meaning dynamic pages).

We tried to create a custom place for this code and add this custom place to of every page, but for some reason, the quotation marks for each of the link tag elements just break and in code we see strange elements: Image 2020-10-02 at 7.32.10 AM

Hope the problem is clear and someone can help us.

3 Likes

Hello @Daria ! You can add custom hreflang tags to all dynamic pages by pasting this code in the head:

<link rel="alternate" hreflang="en" href="https://www.domain.com/cms-slug/{{dynamic-field-slug}}">

I found this work-around too, however it puts my hreflang code into the section of my page rather than the head, meaning that it’s completely useless. Is this an issue from Webflow’s end?.. Here’s a screenshot;

Would really appreciate any advice as this has been driving me crazy!

Welcome @HenrikKoos, do you want to share your readonly project link, and a link to your published webflow.io site? I’m not seeing any hreflangs on your public site here.

The screenshots you’re showing don’t make sense. HEAD custom code is injected only in the head, so either you have additional hreflangs being generated by script or HTML embeds, or you have script moving them. Happy to take a look if you want. It looks like you have quite a few scripts running between elfsight and your shopping cart.

Hi Michael,

I have since removed the custom code that I screenshotted above as it was driving my site inspection crazy on ahrefs and giving me a myriad of issues. It was super strange to me too, as I intentionally put my custom code in the section hoping to fix my multilingual hreflang issue, but to no success. Here’s a link to the preview webflow site.

Ok, I don’t see any custom code on this page at all, even commented out in your custom code area. I can’t help much if the problem isn’t there to see.

Best way to approach a situation like this is to create the problem, publish to staging, and share both the readonly project link, and the webflow.io link.

If you’re on a freelancer plan, you should be able to just clone the whole site, so you can demo the problem while you continue your work on your main site, without the problem code installed.

Hi Michael,

First and foremost, thank you for your continued support, both on this post and my other one about the multilingual slugs. I believe if I can fix the hreflang tags using custom code, I won’t have to resort to other applications, however I will still check out polyflow - especially if this doesn’t work.

I have re-inserted the code, only on the English mountain bike page. Here is the webflow.io link. Equally, here is the readonly CMS project link again.

Let me know what you think, as once again I have inserted the code in the section, yet when I inspect element, it is thrown in the . Here is a screenshot just in case (perhaps it’s an issue from my end);

I feel like if we find a solution to this, it’ll help many people out there with multilingual sites who want to optimise their hreflang tags.

Thank you once again for your continued support.

Henrik

Hey Henrik, looking at the source everything looks fine. I’ll send you a video directly to walk through that because it won’t add much value here for the forum.

With hreflang tags in general, the big challenge in Webflow is collection pages. You can embed them in custom <head> code, but there’s no way to do that conditionally which means you’ll get self-referencing hreflangs as well, which generate validation errors.

Still from what I’m seeing you’ve done it right. I’ll check the URLs when I record the video for you in a min.

Hi Michael, what is the solution if we’re using collection pages for our English blog posts and static pages for our German translations? We only have translations right now for 10 posts (out of hundreds - we’re running a small test). It is easy to apply hreflang to the head of the new German pages. But when it comes to the English language collection pages that derive from a single template, it doesn’t appear like we can customize head code per page. A possible workaround is adding these additional lines of code to the template (lines 5 and 6 in the attached) but I’m guessing this will break things/not work because we don’t have a reciprocal German version for all of our English/collection pages posts. We have a new German “blog home” we could link to where it says German URL, but I’m guessing that won’t work either and just confuse things. Is there a solution as far as you see it? We could designate things in the sitemap, but right now I have Webflow autogenerating the sitemap for me, and I think taking a sitemap approach here would require me to create the sitemap from scratch and then from now onwards continue to have to maintain it every time we add or remove a page from the website? This is a link to our read-only version of our site: Webflow - RiseScience.com current. Thank you so much!
Image from iOS (1)

Hi Lola, I’d probably use a script approach here, meaning I’d generate the hreflang link only on collection pages which have a linked DE translation.

Using script will probably trip up validators, since they may not execute it- but from Google’s perspective it should work great.

Amazing, thank you!! Could you point me to a resource that would help me do this, by any chance? (Or could I perhaps enlist your assistance here, for $ of course.) I’m at lola@risescience.com if you’re able to help me further.

1 Like