All topics

HTML element for SEO blog post

Matthieu B.

4 months ago

Hello toddlers

I’m using toddle for my website and blog.

I’ve used HTML element but in order to render my style, I need to set inline style, making the length of the html formatted text way longer.

Any recommandation to optimize the page for SEO ranking ?
Lucas G

4 months ago

Can you share the element
Styles won't affect SEO, that's just for the browser to render things
Matthieu B.

4 months ago

The element is the toddle pink html block component.

I used inline styles with the style attribute rather than a separate CSS block, as toddle doesn’t seem to recognise the former approach.

So I just have one html element where I drop something like that :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="How …">
<title>Bubble Becomes More and More Popular</title>
<link href="https://fonts.googleapis.com/css2?family=Blinker:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body style="font-family: 'Blinker', sans-serif; line-height: 1.6; max-width: 780px; margin: 0 auto; padding: 20px; color: #FFFFFF; background-color: black;">
<article style="margin-bottom: 40px;">
<header style="margin-bottom: 40px;">
<h1 style="color: #FFFFFF; margin-top: 30px; margin-bottom: 20px; font-size: 2.5em; font-weight: 700; font-family: 'Blinker', sans-serif;">h1 title r</h1>
</header>

<p style="margin: 16px 0; color: #FFFFFF; font-family: 'Blinker', sans-serif;">paragraph</p>

<blockquote style="border-left: 4px solid #FFFFFF; margin: 20px 0; padding: 20px; background-color: rgba(255, 255, 255, 0.1); font-style: italic; color: #FFFFFF;">
<p style="margin: 16px 0; color: #FFFFFF; font-family: 'Blinker', sans-serif;">toddle is the most approachable no-code tool for non-technical founders</p>
</blockquote>

<p style="margin: 16px 0; color: #FFFFFF; font-family: 'Blinker', sans-serif;">Over the last few years, ….</p>

<h2 style="color: #FFFFFF; margin-top: 30px; margin-bottom: 20px; font-size: 1.8em; font-weight: 600; font-family: 'Blinker', sans-serif;">Example of toddle app</h2>

<p style="margin: 16px 0; color: #FFFFFF; font-family: 'Blinker', sans-serif;">Here are a few of our favorite app examples</p>

</article>
</body>
</html>
Lucas G

4 months ago

Ah I see
I don't recommend this approach. You're defining a new HTML doc inside your page
Any reason why you don't want to build the elements natively?
I guess you already have it built elsewhere and are trying to avoid rebuilding?
Lucas G

4 months ago

You could use a <style> element to add styles separately from the html-block component but I'd say the best approach is to build it out natively
@Lucas G
Any reason why you don't want to build the elements natively?
Matthieu B.

4 months ago

To be honest, I don’t really know what you mean by that natively
Lucas G

4 months ago

Either way, definitely do not recommend this as you're trying to nest an HTML doc inside another which is not 'allowed' and will more than likely cause issues with crawlers, accessibility compliance, and maybe even rendering issues
@Matthieu B.
To be honest, I don’t really know what you mean by that natively
Lucas G

4 months ago

Just building it out using toddle elements
Matthieu B.

4 months ago

Yeah but natively, when the page is rendered, it doesn’t display the content, does it ?
That’s what I understood from a @NoCode ProCode video, but maybe, I’m wrong
Lucas G

4 months ago

I don't see a reason why content wouldn't render
I think there's a misunderstanding
Regardless if it's a static site or if the content is being fetched from a headless CMS, it'll work fine
NoCode ProCode

4 months ago

Depends on if it renders client side
Matthieu B.

4 months ago

Not the content, but the html structure sorry, and this would then not be crawlable by bots
Tod

4 months ago

Great energy @Matthieu B.! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
Lucas G

4 months ago

toddle works with SSR by default
The HTML structure would be visible to crawlers
Matthieu B.

4 months ago

Maybe I’ve just over complicated my work 😅
Lucas G

4 months ago

Yeah sounds like there's a misunderstanding here
NoCode ProCode

4 months ago

Toddle has SSR - but it depends on how you use SSR (Auto fetch) and how the HTML is rendered - it probably won't work if you use a custom action to set inner HTML in a DIV.
@Lucas G
The HTML structure would be visible to crawlers
Matthieu B.

4 months ago

Okay, well.
My bad then.
@NoCode ProCode
Toddle has SSR - but it depends on how you use SSR (Auto fetch) and how the HTML is rendered - it probably won't work if you use a custom action to set inner HTML in a DIV.
Matthieu B.

4 months ago

My content is in airtable.
I use auto fetch
Lucas G

4 months ago

Even if it is content from a headless CMS, the structure is there
NoCode ProCode

4 months ago

yes
Lucas G

4 months ago

And even if you laod the content dynamically on the front-end (without auto-fetch/server-side fetch), the structure will be there just not the content
If you use a custom action to set inner HTML then it's different though there's not a lot of cases where you'd need to do that
Lucas G

4 months ago

Even then, crawlers are getting better with client-side content too so even then it's possible for sites to be crawled (but yeah, not as well as compared to SSR)
Matthieu B.

4 months ago

So in my case, do I have to check that it’s rendered server side?

And what would be the best practices to make content coming from my airtable field with dynamic html tag get displayed accordingly on the page ?
Lucas G

4 months ago

That depends on your data structure, but you can map content to the respective tags in toddle
Lucas G

4 months ago

Might need to use a <style> element depending on how it's coming in but it would be better than nesting HTML docs
Matthieu B.

4 months ago

Well, one blog post could contain 1 h2 and 2 images, and another blog post would contain 3 H2 and 1 image.

Let me try to use the style element and see if I can make it work
Lucas G

4 months ago

Just FYI, the html-block package won't be SSR as it uses a custom action to sanitize the content. Custom actions always run client-side
Matthieu B.

4 months ago

Hum ok 👌
Interesting to know, thanks
Matthieu B.

4 months ago

So just to understand @Lucas G , cause the answers didn’t really made it clear to me.

I have my fetched content from Airtable API.

I can play on the format of this if needed, on Airtable side.

But, I am still using the same dynamic page to render the content in toddle.

If not html-block, How should I display html, with different html elements inside, on my toddle.dev page editor ?
Lucas G

4 months ago

I'd take a look at the toddle site itself, see how toddle team does it
I think they use either the contentful package or the html-block one
👍1
Andreas Møller

4 months ago

we load json data from contentful and have a component that renders it
👍1
J.ulian

4 months ago

Would it be a good approach to:
- Include all possible html elements within one 'bock-render' component
- Only set show === true for the element that is passed in via component attribute "html-element"
- Populate the content, passed in via other component attributes, like "content" or "value" or "img-url"?

Is there a better option to approach such a scenario?
Performance-wise, I assume this should not be a problem.
Matthieu B.

4 months ago

@Andreas Møller interesting, could you detail a bit more ? I’m curious to know how the JSON is steuctured, and how you’re dealing with the JSON in toddle ?
J.ulian

4 months ago

Fortunately, he has: https://toddle.dev/docs/building-a-content-site-with-toddle-and-contentful
Tod

4 months ago

Great energy @J.ulian! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
Matthieu B.

4 months ago

@J.ulian thanks, I haven’t seen the source before.
However, I have to say it’s not really helpful since the doc doesn’t really explain how to render the blog post.

I understand how to integrate the API.
I understand how to create an entry in contentful.

My question is the following:
How can I create a skeleton for a blog post that doesn’t have a set structure.

So, If I want 2 sections and 1 image, I should be able to
Or 5 sections and 10 videos, I should be able to,
Or 4 sections and 2 photos and 2 videos I should be able to.

In an html format, I can do that.

The question is :how can I do this in toddle ?
@Matthieu B.
@J.ulian thanks, I haven’t seen the source before.
However, I have to say it’s not really helpful since the doc doesn’t really explain how to render the blog post.

I understand how to integrate the API.
I understand how to create an entry in contentful.

My question is the following:
How can I create a skeleton for a blog post that doesn’t have a set structure.

So, If I want 2 sections and 1 image, I should be able to
Or 5 sections and 10 videos, I should be able to,
Or 4 sections and 2 photos and 2 videos I should be able to.

In an html format, I can do that.

The question is :how can I do this in toddle ?
Lucas G

4 months ago

The post does briefly explain it
You add those elements to your page and add their content via formula from the JSON payload
You can use conditions to show/hide the elements based on the payload
@Lucas G
You can use conditions to show/hide the elements based on the payload
J.ulian

4 months ago

Does this look like my hypothesis? https://discord.com/channels/972416966683926538/1325531071261053008/1325788415702208624

So add a repeat function to a general component that only shows the set type? I saw the rich text returns a nested object, necessary for, for example, inline <a> links inside a <p> block
@Matthieu B.
@J.ulian thanks, I haven’t seen the source before.
However, I have to say it’s not really helpful since the doc doesn’t really explain how to render the blog post.

I understand how to integrate the API.
I understand how to create an entry in contentful.

My question is the following:
How can I create a skeleton for a blog post that doesn’t have a set structure.

So, If I want 2 sections and 1 image, I should be able to
Or 5 sections and 10 videos, I should be able to,
Or 4 sections and 2 photos and 2 videos I should be able to.

In an html format, I can do that.

The question is :how can I do this in toddle ?
J.ulian

4 months ago

From what I understand is to see each small piece separately.

Please visit https://toddle.dev/blog and open dev tools, this is helpful
Andreas Møller

4 months ago

I extracted our blog into a template : https://toddle_blog_template.toddle.site/
You can see how it is built here: https://toddle.dev/projects/toddle_blog_template/branches/main
❤️1
Matthieu B.

4 months ago

Incredible, thanks @Andreas Møller 🙏
J.ulian

4 months ago

Thanks, that's better than any explanation!!

HTML element for SEO blog post

Matthieu B.

Lucas G

Matthieu B.

Lucas G

Lucas G

Matthieu B.

Lucas G

Lucas G

Matthieu B.

Lucas G

NoCode ProCode

Matthieu B.

Tod

Lucas G

Matthieu B.

Lucas G

NoCode ProCode

Matthieu B.

Matthieu B.

Lucas G

NoCode ProCode

Lucas G

Lucas G

Matthieu B.

Lucas G

Lucas G

Matthieu B.

Lucas G

Matthieu B.

Matthieu B.

Lucas G

Andreas Møller

J.ulian

Matthieu B.

J.ulian

Tod

Matthieu B.

Lucas G

J.ulian

J.ulian

Andreas Møller

Matthieu B.

J.ulian