Confused about the slug structuration

Publishing help SEO
1

Hello,
I am actually looking to configure the slugs of my website correctly so i can nest my blog articles in the web page it reffers to, and create a semantic cocoon.

I strugle to apply a dynamic variable in my slug as in wordpress, and i am unable to go further on my own.

Any ideas ?

Here is my site Read-Only: Webflow - Djeelt
(how to share your site Read-Only link)

2

Webflow has a rather rigid way of publishing Collection items. It will only publish them to;

/collection-slug/item-slug

I assume that what you’re wanting is for your blog post urls,

e.g. https://djeelt.webflow.io/post/tout-ce-que-vous-devez-savoir-sur-la-creation-dun-budget-de-marketing-digital

To contain your blog url, in this case;

e.g. https://djeelt.webflow.io/blog-growth-marketing/tout-ce-que-vous-devez-savoir-sur-la-creation-dun-budget-de-marketing-digital

Realistically you have a few ways you could do this, but they’re not trivial and have tradeoffs.

OPTION 1 - EXPORT SITE & CONFIG HTTP REDIRECTS

If you export and host your site elsewhere, you would have control over your HTTP server configuration, which means you can setup redirects the way you want. Then you have full control over URLs and what content they display.

But, you have to build those scripts for your host environment, e.g. Apache’s mod_rewrite.

OPTION 2 - SCRIPTS + “SMART” 404 PAGE

This is hack, but my prototype works, though somewhat inelegantly. The basic idea is that you can visibly rewrite your /post/(post-slug) URLs to /(blog-slug)/(post-slug). Then, if someone navigates to that URL, you have a script in your 404 page to redirect them back to your /post/(post-slug) page.

Here’s a demo.

  1. Click on any blog post image.
  2. You’ll see the URL change to /post/(post-slug) briefly, and then change to /(blog-slug)/(post-slug)/. I’ve also set that to the canonical URL, for search engine indexing.
  3. Then, hit refresh, to force the browser to load that /(blog-slug)/(post-slug)/ URL.
  4. You’ll see Webflow doesn’t know the URL, but then the 404 HEAD script identifies it as a blog post URL, and attempts to redirect it to /post/(post-slug)
  5. And we’ve come full circle, back to step #2.

Here’s a Read-only site link for the demo- check in particular the HEAD script sections on the Blog Posts page, and on the 404 page.

https://preview.webflow.com/preview/url-change?utm_medium=preview_link&utm_source=designer&utm_content=url-change&preview=aad78e6a35cfc797bfa5eac64348f48e&workflow=preview

I’m kind of amazed it worked as well as it did, but there are two caveats;

  1. This works okay when you only have one type of thing e.g. blog articles you want to redirect this way. It’s not possible to embed a Collection List into your 404 page so we can’t actually build a mapping table of known canonical URL redirects. We have to guess based on the URL itself. At present, my 404 script identifies any URL of the form /.../.../ and guesses it’s probably a post URL- so it attempts to redirect to /post/(post-slug).

  2. I don’t know what impact that 404 would have on SEO. Sounds dicey, but it does ultimately land on a 200 OK page. There’s a good chance you’ll be fine, since Google regularly queries 404 pages as might be valid but temporarily-offline content. The ending disposition might be the one that matters.

Also note, on your site, I can see you created 7 separate blog pages, which all have the same layout. You could do that from a Collection if you like, and using this same approach above, you could still get your /(blog-slug) URLs.

In my demo I have a Blog Collection and a Posts Collection, with each Post referencing one Blog. That allows me to construct the URL’s easily, with the blog’s slug included. You’ll see that in the Blog Post’s HEAD script.

image

The main advantage is that it’s easy to create a new Blog if I want to.

In your design that’s even easier, because every blog has a slug beginning with /blog-

e.g. https://djeelt.webflow.io/blog-growth-marketing/tout-ce-que-vous-devez-savoir-sur-la-creation-dun-budget-de-marketing-digital

Your approach makes these URLs easy for your 404 redirect script to identify as blog requests rather than post requests.

  • /blog-.../ is a blog URL request, so redirect to /blog/(blog-slug).
  • /blog-.../.../ is a post URL request, so redirect to /post/(post-slug).
1 Like
3

Thank you so much for this great answer. I am asking myself if i should really do that, and take the risk of google or webflow changing something and then, it is going to be a nightmare. Or maybe not change anything.
What do you think ?

1 Like
4

I would offer a caution to the use of document.write. See document.write() - Web APIs | MDN

1 Like
5

Ha, yes, “can you” and “should you” are two very different questions on the web, particularly when you’re building on a changing framework.

Personally I don’t mind Webflow’s /slug/ approach to naming. It might not be ideal for SEO, and I’ve designed publishing systems differently, but it has advantages of simplicity and a lower learning curve for new designers.

Hacks are fun, and it seems almost nothing is impossible. They’re a great mental exercise, but they generally don’t fit into the production environment. It’s much more important to have good sleep at night, than it is to worry about a fragile system.

For things I’d like to see changed, I raise a wishlist item.

Actually, one I raised that would make your desired URL configuration possible is this one-
https://wishlist.webflow.com/ideas/WEBFLOW-I-1499

6

Thanks Jeff, that’s very interesting, and makes a lot of sense in a DOM-based world. I’m very curious how Google would handle something like a canonical link added later by jQuery.

7

@memetican - Since Google bot runs an evergreen version of the chromium browser it should be able to detect the change. Google has indicated in the past that adding things like rel=“nofollow” to anchors via JavaScript is registered just fine and I have seen that first hand while doing SEO on large blogs with user generated content.

1 Like