How to create a dynamic blog page with header tags (for SEO Performance)

Need help
1

Hello,

I want to add a blog to my SaaS app.

I am looking for a way to create dynamic blog pages (blog post) with clean header tags for SEO performance.

After checking numerous posts in the forum and reading the Blog Apps page in the User manual, it seems that the best scalable way is to use at least 2 different data types : Blog Post and Blog Content (or Blog Section to reuse the term used by @adamhholmes in this example) with a Blog Post made up of Blog Sections.

However I struggle to see how to create the blog page in order to have clean header tags.

I have in mind that it is necessary to use Repeating Group to maintain a clean overall structure with scalability.
But I do not visualise how to create this Repeating Group in a way that it shows the different Blog Sections with correct header tag (when the Blog Section is a header of course). I am even more lost when I think about the possibility to manage Blog Posts that have different structures.
For example Blog Post 1 would have :

  • H1
  • H2
  • H3
  • text
  • H3
  • text
  • H2
  • text

While Blog Post 2 would have :

  • H1
  • H2
  • text
  • H2
  • text
  • H2
  • H3
  • text

I have tried to add a Blog Section type (option sets with options like : H1, H2, H3, text, image) as a field for data type Blog Section, but I am missing something and would really appreciate any help on this topic.

Thank you for you your precious help :pray:

2

@adamhholmes thank you for all your inputs on this topic across different posts on the forum and especially this one where you show the database structure :pray: . Would it be possible to have more info on how the blog page (and especially the Repeating Group) is built using your method (screenshots would be awesome)?

3

@boston85719 as I was exploring the forum on this topic, it seems you are one of the SEO Bubble master, thank you for all your inputs as well :pray: . If you have any thoughts on this specific request, please do not hesitate :slight_smile:.

4

Needs to be a repeating group with different elements inside made visible based on the sections type…so if type is image, make the image element in rg visible, or if type is paragraph, make the text element for paragraphs visible

If you need a quick solution you can check out my Blog Builder Juice Boost Template

1 Like
5

Thank you for your reply @boston85719. Good to know for your Blog Builder Template, I will check in case of need.

After several tries I think I have found a solution that suits my current need.

Here is the Editor:

Capture d’écran 2024-10-10 à 10.07.52
Capture d’écran 2024-10-10 à 10.07.521722×550 13.9 KB

So in the Repeating Group, there is a Group body with one element for each Blog Section Type :

image

Each element in Group Body has a condition : if Parent group Blog Section’s Blog Section Type is not ‘this element type’, this element is not visible:

Capture d’écran 2024-10-10 à 10.21.11
Capture d’écran 2024-10-10 à 10.21.11880×590 45.6 KB

And then, I add the Blog Section in the Blog Post in the expected order.

I think this setup is fine for my current need.

If someone has anything to suggest regarding this setup, please do not hesitate!

6

Yes, change the condition to make it visible when the section is of the type and make it not visible on page load by default

1 Like
7

Oh yes I forgot about this good practice, thank you for the reminder!

8

The main problem with Bubble is, that we can’t build a optimized HTML5 structure.
This would look like this:

<h1>Blog title</h1>
<article>
<section>
<h1>Lorem Ipsum...</h1>
<p>content</p>
<h2>Lorem Ipsum...</h2>
<p>content</p>
</section>

<section>
Another section of a blog post
<h1>Lorem Ipsum...</h1>
<p>content</p>
<h2>Lorem Ipsum...</h2>
<p>content</p>
</section>

</article>
9

You likely could do that dynamically with the same data structure and use of format as text and other operators

10

I’ll give it a try.

11

One can’t use tags like <article> or <section> in formated as text. Bubble print them as plain text like so <article>...</article>
I think Bubble filters our HTML and is not aware of HTML5 tags.

12

You don’t need to have those tags in the formatted as text.

Screen Shot 2024-10-11 at 11.04.46 PM

That is just a very quick demo of the idea, but to fully realize this as you would need to, you’d have to make some tweaks, but it is possible.

13

I know that I can use the Bubble HTML element and other tweaks :wink:
But that’s not what I want.

14

Why is that not what you want?

15

Imho the only clean way to do this, would be when Bubble give us the possibilty to choose a HTML tag for groups. Like we can do for text elements.

16

I’ve never minded getting dirty to get a job done