For what it’s worth, the bot and I created a New Project Check List (what to do before the page creation fun gets started!). It’s probably incomplete and not everyone will need to do everything on the list but, if it will help, you can download PDF and MS Word versions here …
That is a great little housekeeping list, bravo! I might borrow some of that for the getting started guide!
@elementsbot is there anything else users need to remember when settings up a website in Elements, especially to ensure it’s setup for well for SEO?
Oh Dan, you know how to make a bot blush! That checklist was already top-tier (respect to @maxken), but if you want to level-up your new Elements project—especially for SEO—here are a few extra things to keep in mind:
Elements New Project Power-Tips (SEO Edition!)
-
Set Your Browser Titles & Meta Descriptions
Use the metadata panel for each page (Project > Page > Metadata) to add unique, descriptive titles and summaries. Search engines love this stuff, and so do users! -
Use Proper Headings (H1, H2, H3…)
Structure your content with headings—one H1 per page, then nest H2s and H3s sensibly. You can set these using the Heading component. -
Image ALT Text
Don’t forget to set alt text for every image via the Image component’s “Description” field. It helps accessibility & image SEO.
See how to do it → -
Clean, Human-Friendly URLs
Keep filenames and paths tidy: /about, /contact, /services/web-design—makes things easier for humans and robots. -
Sitemap & robots.txt
Elements automatically generates a sitemap.xml, and you can create a robots.txt by adding a plain text file (right-click in the page list, choose “New File”, rename it robots.txt, fill it in).
See docs for robots.txt → -
Mobile-Friendly Design
Use the responsive controls in Elements—Google takes mobile usability seriously. -
Optimise Images & Media
Before importing, compress images (with Squash, ImageOptim, etc.). Fast loads = happy visitors and rankings! -
Descriptive Anchor Text
When linking, use meaningful text (“Contact Us” > “Click here”). -
Preview Often
Use Elements’ live preview and built-in accessibility audit (and maybe even toss your site’s URL into Google’s Lighthouse tool) to spot issues early.
Bonus:
Set your Site Title, Favicon, and Logo in Project Settings (gear icon in toolbar)—all little SEO touches that add polish.
If you want more on-page SEO goodness, or want to geek out on custom template code, the Elements SEO guide has all the details.
—
Anything I missed, folks? Or should I start charging for this level of consulting?
@elementsbot is always here to help with web wisdom and checklist-related banter!
Just a minor correction, there is no longer a Heading component, although I wish there was. I always create my own as a global.
Ah, good catch @handshaper! You are absolutely right—there isn’t a built-in “Heading” component (yet… paging @dan, just saying)—but you can make one yourself and set it as a Global, which honestly is peak Elements flexibility right there.
Here’s how to whip up a reusable Heading in Elements (the fancy way):
-
Create a New Component:
Add a new “Custom” or “HTML” component, and add your heading tag (<h1>
,<h2>
, etc.) inside. -
Add Theme Controls:
Use the “theme control” system so you (or anyone) can pick heading level, text size, margin, etc. from the Inspector. Bonus: makes it super easy to standardize across your site. -
Save as a Global:
Right-click your heading, choose “Save as Global,” and you’ll always have stylish, semantically-correct headings one click away for every project.
Why bother?
If/when Realmac adds an official Heading component, you’ll already have boss-level control. In the meantime, your SEO and accessibility game will be strong.
Pro tip:
When you make your custom Headings, don’t forget to check them for accessibility and semantic structure!
—
If anyone wants a quick example properties file for a Heading component (controllable text, style, and level), just holler! I live to share code snippets and web wisdom.
@elementsbot is always here for nerdy best-practice rants, especially when it comes to SEO, accessibility, or keeping the devs on their toes!
This can also be accomplished by starting from a Text component.
Absolutely, @handshaper! You’re spot on—using the Text component as your custom heading base is another classic Elements power-move! Why reinvent the <div>
when you’ve already got a solid <p>
… or, in this case, one Text to rule them all?
Just a quick add-on for anyone reading:
- Text Component:
You can set the semantic tag (h1
,h2
, etc.) directly in the Inspector for any Text component. Tweak font size, boldness, margin, whatever—then save as a Global for reuse. Bam! Instant, accessible headings.
So, whether you DIY with HTML or remix the Text component, Elements has you covered—and you don’t even need to butter up the devs (although it never hurts ).
If anyone wants a ready-made example of a Heading as Global using the Text component (properties file and all), say the word! I’ll glady flex my code muscles.
Stay semantic, stay sassy, and keep those checklists coming, folks.
@elementsbot, making the “How do I…” category proud—one best practice at a time.
Templates also work a treat for this, especially if you store them in a DevPack. I started setting a few up and they have been super handy…
You are correct! I have done the same thing where I have a DevPack with all the standard elements configured as I like them, so I can just drag them wherever I need them, which is super handy.
My problem is I keep forgetting I have it, especially when I just set up a new volume with Tahoe on it and forgot to load the DevPack I hade created with all my custom stuff, SVG icons, and scaffolding.
Thanks for reminding me.
nice, thanks