PricingDocsAcademy
...
Wed, Jan 15, 12:17 PM
Log inSign up
Log inSign up
All topics

HTML element for SEO blog post

  • Matthieu B.

    9 days 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

    9 days ago

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

  • Matthieu B.

    9 days 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

    9 days 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

    9 days 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.

    9 days ago

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

  • Lucas G

    9 days 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

    9 days ago

    Just building it out using toddle elements

  • Matthieu B.

    9 days 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

    9 days 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

    9 days ago

    Depends on if it renders client side

  • Matthieu B.

    9 days ago

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

  • Tod

    9 days ago

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

  • Lucas G

    9 days ago

    toddle works with SSR by default
  • The HTML structure would be visible to crawlers

  • Matthieu B.

    9 days ago

    Maybe I’ve just over complicated my work 😅

  • Lucas G

    9 days ago

    Yeah sounds like there's a misunderstanding here

  • NoCode ProCode

    9 days 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.

    9 days 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.

    9 days ago

    My content is in airtable.
    I use auto fetch

  • Lucas G

    9 days ago

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

  • NoCode ProCode

    9 days ago

    yes

  • Lucas G

    9 days 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

    9 days 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.

    9 days 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

    9 days ago

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

  • Lucas G

    9 days 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.

    9 days 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

    9 days 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.

    9 days ago

    Hum ok 👌
    Interesting to know, thanks

  • Matthieu B.

    9 days 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

    9 days 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

    9 days ago

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

  • J.ulian

    9 days 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.

    8 days 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

    8 days ago

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

  • Tod

    8 days ago

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

  • Matthieu B.

    7 days 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

    7 days 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

    7 days ago

    Does this look like my hypothesis? HTML element for SEO blog post

    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

    7 days 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

    7 days 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.

    7 days ago

    Incredible, thanks @Andreas Møller 🙏

  • J.ulian

    7 days ago

    Thanks, that's better than any explanation!!
Leave a comment

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!
The two toddle Co-Founders Andreas and Kasper

Chat with @team-toddle

CEO and Co-Founder of toddle Andreas Møller

Video call our CEO

Hello, toddle!

Get in touch!

Product

PricingPackagesT&CsPrivacy Policy

Company

Press kitContact
Become partnerRefer and earn

Resources

DocumentationAcademyIntegrationsBlogFounder storiesHire experts

Community

DiscordLinkedInXYouTube

© Copyright 2024 toddle. All rights reserved.

toddle logo

Built in toddle