Building an SEO Friendly Landing Page

  • follow us in feedly
Published May 2, 2013 by Brad Knutson
Building an SEO Friendly Landing Page

When marketers are tasked with building a landing page (perhaps for a product release, a marketing or add campaign, or a micro-site) they often times farm out the design and development to outside vendors, and the result is a beautiful and functional landing page.

These landing pages are very visually appealing, and sure to impress upper management. Your very happy with your designers and developers work. Everything is going swimmingly, right?

Well, perhaps not. If your landing page was not built with SEO best practices in mind, you may not be generating the type of organic search that you need.

So what are these best practices? Let’s start with the basics.

Basic SEO Friendly HTML

It is important to remember that we build web pages for human consumption, not search engines. Our web pages should be visually appealing, functionally sound, engage users, and maintain their attention. We could build websites with solid HTML structure, but very little CSS and Javascript to ensure that search engines can crawl and parse the data properly – but your end users will get bored quickly, and your bounce rates will be through the roof.

There is a happy medium, and it is very possible (and not all that difficult) to please both the user and the search engine.

Meta Robots Tag

I’ve seen too many times a startup purchase a stunning site template, spend countless hours getting content ready, launching the site – then a few weeks later finding that they aren’t generating any organic search traffic. In fact, it’s worse than we first thought – the site we’ve poored blood, sweat, and tears into doesn’t show up in search results at all – even for our branded keywords.

I don’t really understand why so many template developers add the dreaded meta robots "NOINDEX,NOFOLLOW" tag, but the fact is it’s more common than you might think.

Bottom line – check the head section of your pages to make sure that your pages are not set to noindex. If you see the below line, delete it.

<meta name="robots" content="noindex, nofollow">

Other meta tags

Open Graph Markup

Michael King wrote a great article outlining meta tags that everyone should be using in 2013. For the sake of brevity, I’ll defer to Michael on this topic, as he’s explained it very well and in great detail.

Open Graph markup, Twitter cards, Google Authorship, and much more. These meta tags make integrating your content with social sharing a smooth relationship.

Intermediate SEO Friendly Markup

Responsive Web Design

Responsive Web Design

In today’s day and age, responsive web design is no longer an option, it’s a requirement. I won’t dive too deep in this post (that’s for another day), but the basics are pretty simple to grasp.

First, start with the viewport meta tag so that our pages will display the proper responsive theme that we’ve designed.

<meta name="viewport" content="width=device-width" />

Then essentially all we have to do is put the proper media queries into our CSS so we can dynamically call on CSS based on our viewport size. You can add as many media queries as you’d like, but the structure is always the same.

@media screen and (max-width: 960px) {
	selector {
		/* CSS goes here */
	}
}
@media screen and (min-width: 960px) {
	selector {
		/* CSS goes here */
	}
}

I’ve read that the majority of mobile users will immediately leave a website if it’s not designed for the device they are using. High bounce rates are something we want to avoid, and while they may not have any direct impact on SEO, they will definitely have a negative impact on your conversion rates!

Use CSS rather than Javascript

Search engines have gotten a lot better over the years of reading javascript, but do you really want to leave it up to a program to navigate your site and interpret your javascript functions? We don’t leave anything to chance.

CSS3 is not capable of making many of the complex animations that once required javascript. Showing and hiding a div, showing content on hover, rollover states, and much more. Check out my posts on CSS to see some of the things I’m referring to.

At the end of the day, search engines are better at reading and interpreting CSS than they are at understanding javascript. If you have the option to use one or the other, I would lean towards CSS3 animations as opposed to javascript functions nearly every time. If your landing page is currently in development, ask your designer or developer if they can use CSS to accomplish same animations that would otherwise require javascript.

Another big no-no for SEO is AJAX. Dynamically pulling in content from outside sources using AJAX is not something that search engines are privy to. AJAX is great, and you can create some really awesome and appealing sites using it, but if the content you pull in through AJAX is important to your site at all – in short, don’t use AJAX.

Keywords

Be sure to use your target keywords in the correct places. Remember to write your content for human consumption – keyword stuffing won’t be tolerated by search engines.

The most important places to use your keywords are listed below.

  • title tag.
  • Page header, most often the h1 tag.
  • strong tag.
  • em tag (italics).
  • p tag, in the body of the content.

Advanced SEO Techniques

URL Structure

Let’s take a look at two URL structures that theoretically could produce the exact same content.

http://bradsknutson.com/blog/building-an-seo-friendly-landing-page/
vs.
http://bradsknutson.com/index.php?id=3842

It might be obvious to most, but many developers (and even some CMS’ by default!) use the second method to serve up content. Having your keyword in the URL is something you should definitely strive for – but remember to not keyword stuff the URL!

301 Redirects

301 Redirects are an important part of SEO, and a necessary step to ensuring that any content that has moved location doesn’t lose value.

There are many ways to go about creating a 301 redirect, and many CMS’ offer easy options to create them. If you have to create them from scratch, and you are hosted on an Apache web server, your best option is to write the redirect at the .htaccessContent

I’ve written about content many, many times before, and so have many others (just do a quick Google search for “seo content creation”). The overarching theme is that content is king.

Content is King

Image courtesy of Blueworf.com

If your forward-thinking in your SEO, you already know that the best (and perhaps only) way to ensure that search engines associate your page with your keywords is to use them in your content.

Further Reading

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">