[UPDATED v2.2.0] 😃 Sudsy Page router for SEO-friendly clean URLs! (by Tech-Tonic)

Hi @di_lucena, thanks for your interest in my plugin. Honestly, I couldn’t say for sure, as I no longer use or test with IE. I can’t even justify the time it would take to look into it and provide a definitive answer. I really wish I could be of more help, but that’s the best I can do. If anything else occurs to me, I’ll let you know

Thanks for your reply.
I will move to sudsy anyway. At the end of the day, having clean urls and SEO optimization for most of the users is a winner.
I guess I’ll keep the states in the workflows and run a test.
I will post an answer later.

Regards

Hi, @sudsy. Wonderful plugin. Just purchased and have great hopes that it will dramatically streamline my build. That said, I was hoping you could help me address a few questions. First two are detailed at below posts.

The third one relates to best practices around SEO for SPA’s. Obviously, I will be displaying data of numerous types on a single page. Currently, I am binding the page “thing” to a custom state on page load. I had planned to generate SEO meta data based on this state and store it via a separate state, which would be referenced in the actual SEO field.

Do you think this is the best approach? Thanks!

Hi, @ts11. Thanks for your inquiry. To address your specific concerns…

I personally have not built a multilingual app in Bubble, so I can’t offer any insights from firsthand experience. A similar question was asked here in this thread, though, so you can read my response there. Basically, you have to keep in mind that the 1st URL parameter MUST be an actual Bubble page. That will obviously have an impact on which route (no pun intended) you decide to go with your URL strategy.

With regard to your “Dynamic UI” question, I’ve not built anything quite like that myself, so again, I can’t offer much in the way of insights, unfortunately. It might be worthwhile to invest a little time building a basic “proof of concept” to ensure you don’t encounter any major snags. I’d be curious to know if/how it works out for you though. In such situations, I basically have to “get my hands dirty” to learn what works and what doesn’t. The time invested could pay off in the long run.

DISCLAIMER: I am definitely not an SEO or SPA guru. Most of what I know has been determined empirically by conducting some simple tests.

Different search engines and different SEO evaluation tools vary with regard to what they “pick up” from your web page. If Google is your primary concern, it does execute JS and “see” the rendered output, so your approach would likely work for that search engine. Again though, a simple mock-up employing your planned strategy would go a long way toward addressing your concerns.

Best of luck! :slightly_smiling_face:

1 Like

Thank you very much for taking the time to respond to these. I’ll get to testing. Much obliged!

1 Like

Thank you! This is an awesome edition to Bubble for one page applications!

1 Like

Hi TechShot, implementing your plugin now, I am trying to use the external url structure on the home page but the link is going to a new page and I don’t know how to prevent this unless there is already a first parameter on the page like you have on the sudsy demo

Hi @253digital,

Unfortunately, the home/index page is the only page where it won’t work. As stated in the initial post of this thread…

The page name can be as short as you want - even just a single character - but the plugin must reside on an internal page. I will update the official docs to emphasize that as well.

No worries Shot, it’s not a big deal to rename the page and add a redirect from the bare domain to another page.

Thanks for making the plugin I was able to figure it out and it was really helpful!

Evan

@adrianmirza1997 Are you a specialist?

Hey Steve @sudsy , thanks for creating this. It’s going to solve problems for me that i didn’t know i had until today. Purchased and super keen to start using it in a few hours.

I do have three questions before I begin implementation:

First, if I want my homepage to be a sudsy page, can i just use a redirect from the index on page load? I’m going to have a /en page and then do the same with other languages in time. Then, for SEO purposes, would it make sense to include a crawlable link element on the index page for each of these language ‘homepages’ in order to have some type of connection - even if human users never see them?

Second, I have lots of internal pages with long-form text content and decent numbers of hyperlinks to my other internal pages. Normally just <a href tags. Do you know what the best way is to keep the SEO juice for these, taking from your earlier discussions with @boston85719 that text elements don’t work for SEO (hence using link elements for navigation). You mention the “Go to URL” workflow action in your documentation, but by my reading this action still needs to reference a link element in order to be crawled?

Third, for navigation I have a lot of group-focus elements with collapsable submenus. Currently text elements but i’ll be changing them to links. Most of these are not visible upon page load and appear upon hover (desktop) or click (mobile/tablet) of a drop-down style icon. Is that an impediment to SEO crawling? Is a sitemap of assistance here? I realise that this one may stretching the topic, but I thought I would ask as it’s related to my use-case.

Thanks,
Chris

Hi Chris, thanks for your purchase.

If I understand correctly, you’re asking not about using the plugin on the index page, but rather about redirecting from the index page to another page that uses the plugin. From a technical standpoint, I see no reason why that wouldn’t work, but whether or not it’s a good approach from an SEO perspective, I couldn’t say, as I don’t consider myself an SEO expert. I also haven’t created a multi-lingual site, but I know there are others who have, so perhaps they can offer some insights on the best approach.

Just use a Bubble Link element, as it generates an anchor <a> tag on the page. That’s what it’s for. The plugin’s Go to URL action was added primarily for the benefit of those creating single-page apps (SPAs) who don’t want the URL appearing on mouse-over (as most browsers do with hyperlinks). It can be used for any navigation where SEO is not a concern. There is no need to use both.

Again, I’m not really in a position to make SEO recommendations, so I can’t comment on the sitemap issue. I’m sure you’ll find plenty of info, though, with a forum or internet search.

As I describe in this post, however, Google does seem to render dynamic content and thus see each unique URL as a separate “page” to index (even though it’s technically a single Bubble page).

Hope that helps somewhat.

-Steve

FYI, the same BBCode that works in Text elements also works in Link elements, so you can create a hyperlink that looks like an icon…

Using this approach, you can create links that look like buttons or icons but which provide “SEO juice”.

EDIT: Of course, there’s also the Show an icon instead of text option, but I find the BBCode approach more flexible since Bubble’s expression builder can be used to construct the link text (which could contain 1 or more icons plus text).

Thanks for your replies @sudsy. I’ve done a bit more research and for the benefit of future readers here is what I have found.

  1. 301 redirect should do the job of moving my ‘main homepage’ to /en (which will be a sudsy page). The secondary homepages (/de /es etc) will live parallel to that. I don’t believe I need crawlable link elements on the page because the 301 does the work. This article was helpful as was this one, the key is to let the alternate language sites be user selected and not based on any redirect assumptions. I’m going to store links to my alt language ‘homepages’ in a group-focus that behaves like a drop-down.

  2. Link elements are the answer as you mention.

  3. Vertical menus are crawlable because robots scan the source code. They read HTML pages like a text file, so if the URL exists there, it should get indexed. If Bubble exposes urls like this (and link elements seem to) then it should all function well. Sitemap is still a must of course.

Cheers,
Chris

1 Like

While i’m on the topic, I think there is one spot where using navigable text elements can supplement link elements, and that’s for duplicate navigation. In my app/site I have a mobile menu and a desktop menu that load based on screen width. If they both contain link elements I have effectively duplicated every linked url in my nav. This is bad for SEO. My solution is to only use link elements on the desktop menu and leave the mobile links as text elements. This will allow desktop users to right-click to open pages in new tabs (less likely for mobile users), and will make sure that google only identifies a single set of urls. Google search console article for reference

Hi @sudsy I found a small bug you might want to be aware of:

When you run the app in version-test, SudsyPage's Path Param knows to ignore version-test.
When you run as a user in live version (from your database), the URL bubble creates has version-live appended to the end of Website Home URL. Sudsy Page's Path Param's 1st element evaluates to version-live in this case, which breaks many of the routes that are built in my app.
Is it possible to add parallel logic to ignore version-live just as it does for version-test?

Hi @jacob.b.singer,

Thanks for the head-up on that. I don’t think we’ve ever actually tested that scenario, so will look into it.

In the interim, if you manually remove the version-live path param from the URL after clicking run as, does that work for you?

-Steve

This should now be resolved, @jacob.b.singer. Thanks again for letting us know.

-Steve

Thanks @sudsy !! I missed your earlier message - the answer was yes, we could work around it by deleting version-live. But glad to not need to do that anymore!

Confirmed this works well!

1 Like

Hi @sudsy :wave: Wondering if you have any insight into a problem I’m facing. I’m building an SPA using your brilliant plugin. Everything is going swimmingly except for my SEO metadata. As you probably know, Bubble’s expression builder for SEO title’s and descriptions is not very … “expressive.” It can only refer to the current page’s thing, the current user, an option set, the current URL or an arbitrary data search. That is to say it cannot reference the current page’s elements or states. Even worse, the SEO fields are not accessible from the conditional logic builder. So whatever approach one adopts can’t rely on conditional logic to retrieve SEO metadata. Finally, testing has demonstrated that any searches performed within the SEO fields are run only once, on the initial page load. All of this has me more or less pulling out my hair. Do you know of any solution that would allow me to change the SEO metadata fields dynamically on URL change without reloading the page?

Edit: After thinking about this some more, I’m wondering if it would be possible to use Javascript or perhaps @ZeroqodeSupport’s CSS Tools plugin to modify the metadata in the page head? I’m not very familiar with JS, so a little intimidated by the prospect. That said, it seems to me that modifying the metadata prior to changing the URL might be a hacky way of preserving the performance of one’s SPA without sacrificing good SEO. Do you think this might work? Pinging @keith here since he’s a whiz with this sort of thing.