How to Create SEO Landing Pages that Convert with Perfect Semantic HTML5

Usually landing pages are used for PPC advertising or email marketing campaigns. SEO landing pages are different because the traffic is organic, not targeted.

For your SEO landing pages to be effective, you need to perfect your on-site SEO while also maintaining both a good design and a high conversion rate.

This post will teach you the tricks (and the code) that you need to nail both!

What is Semantic HTML5 for SEO Landing Pages?

If you haven’t heard of him, Jason Barnard is an SEO who has written a lot about semantic HTML5. This guide is great if you’re unfamiliar. Below is an image from Barnard’s guide worth refering to when you’re coding your SEO landing pages.

Jason Barnard's Semantic HTML5 for SEO Landing Pages Example

Most websites. especially WordPress websites, use div tags where they should be using main, article, section, and aside tags. By using semantic HTML5 for your landing page, you make it easier for your website to be crawled and indexed. When paired with Schema markup, you also improve the likelihood of your site being included in Google’s rich snippets.

SEO Landing Page Design with Semantic HTML5

For me personally, the biggest challenge of using semantic HTML5 in my SEO landing pages is making the design look modern and attractive. Here’s an example leadgen landing page that I’ve created:

Sample SEO Landing Page Screenshot

Click to enlarge the screenshot of this SEO landing page in a new tab.

You’ll get some code snippets to help you if you want to build your own SEO landing page similar to this one. But first, I’m going to show you—with my amazing mspaint skills— some of the semantic HTML5 that’s working behind the scenes.

SEO Landing Page with Semantic HTML5 Annotations

Click to enlarge the SEO landing page example in a new tab.

The most crucial portion of your SEO landing page is above the fold because that is where you’ll get most of your conversions. You need your page to load fast, have a strrong call to action (CTA), and clear buttons to facilitate that CTA.

The rest of the content is useful for the few users who may scroll down to read more but it is mostly beneficial to the search engines. What content and h tags you use below the fold will vary depending on your keyword. Make sure you optimize based on the data you collect, not the vague SEO advice you read.

How to Code Your SEO Landing Page

I’m a big advocate of flat file websites for SOE landing pages and this section will help you with that. If this isn’t a option for you, Divi or Extra themes on WordPress are great choices. I have the lifetime membership so I can use the themes on as many domains as I want and I get updates for life. Well worth the investment! Oh, and Dinosaur SEO is built on the Extra theme.

For the navigation bar, this CodePen has an amazing, no javascript (CSS only), animated navigation taht I highly recommend using.

For the splash background image, I use this code as inline CSS (for my flatfile SEO landing pages, I use 100% inline CSS and do not import any .css files so that load times are faster). Here is the inline CSS:

And here is the HTML portion:

The rest of the content can be put inside a basic container class that you create. Here’s the one I use:

Schema Markup for SEO Landing Pages

To generate markup for your Local Business, use this Schema generator. For everything else, I get a start with this tool.

Any Questions?

I’m hoping that this will get you started off in the right direction. If you have any questions or requests please leave them in the comments. I’m thinking about releasing my full SEO landing page template once I have a few more details perfected in it. Let me know if you’d want to download it if/when it’s available because if there is some interest then I will make it a higher priority!