A Web Developer's Guide To SEO | Climax Media

A Web Developer’s Guide To SEO

How To Drive Traffic To Your Site

Aside from Internet Explorer, I don’t think there is any other topic that annoys front-end developers as much as SEO. Part of this probably comes from an understandable skepticism of in the industry. Google does not release its algorithms, and SEO experts can come off as snake-oil salesmen: peddling technical pseudoscience to technical professionals.

This is an understandable impulse. But its also misguided. At its most basic level, good SEO derives from having accurate mark-up, styling, and file optimization. Google will not reward you for having something mostly right. Building a site that passes an eye test is one thing. But making sure a computer can read it properly is another. Just as important as functional programming, ensuring that the proper tags, styling and keyword are being used in a project requires a careful review process. If you’re going to put in a lot of effort to make sure your website delivers a seamless user experience, then why not make sure it gets seen in the first place?

Using the following five principles, you can ensure that your site attracts the traffic it deserves.

So What Do We Need To Know?

Enterprise-level agencies, like Climax Media, have entire departments dedicated to web analytics, strategy and SEO. (If you’re working for a smaller agency, you might be tasked with this yourself.) In the discovery phase of a project, strategists will set out to identify what they call ‘keywords’. These are a word or combination of words that the user enters into their search engines, and are known to as ‘search queries’.  Keywords are always specific to page’s content. For example, if we are a plumping service, going after the word “plumbing” may be too broad, as there is loads of competition. However, if we know something our users are searching for that is much more specific, like “basement flooding toronto,” then we might decide to dedicate a page around this as our primary keywords. We would then use a variant of that primary keyword, called a secondary keyword, to target as well.   The goal is that by researching what our users are searching for, and by structuring our page properly with that content in mind, we can drive traffic to our pages.

There are five broad areas that determine value when it comes to SEO:

Enterprise-level agencies, like Climax Media, have entire departments dedicated to web analytics, strategy and SEO. (If you’re working for a smaller agency, you might be tasked with this yourself.) In the discovery phase of a project, strategists will set out to identify what they call ‘keywords’. These are a word or combination of words that the user enters into their search engines, and are known to as ‘search queries’.

Keywords are always specific to page’s content. For example, if we are a plumping service, going after the word “plumbing” may be too broad, as there is loads of competition. However, if we know something our users are searching for that is much more specific, like “basement flooding toronto,” then we might decide to dedicate a page around this as our primary keywords. We would then use a variant of that primary keyword, called a secondary keyword, to target as well.

The goal is that by researching what our users are searching for, and by structuring our page properly with that content in mind, we can drive traffic to our pages. More info on Keywords can be found here.

Title Tags

These should include your business name, as well as what the page is about. Typically, Google displays the first 50-60 characters of your title tag defined by a pixel width of 512px. But your title tag itself can be upwards to 500 characters – no longer. The point is to not jam a billion keywords into your title tag, but to prioritize the important keywords.

If you have thousands of pages on a website, and the pages are generated based off an API or CMS, then you might use a function to generate the page’s title like:

[Product Name] – [Product Category] | [Brand Name]

You’ll notice the “|” bar, which are typically used to separate content in Title Tags.

Here’s a visual for how we handled it on this page.

Clean URL Structure

Having a clean URL that contains your keyword goes a long way. Remember that the keyword is telling you the user intent and that’s what we’re really after. Currently, on the Services Page of Climax Media, we’ve made our Services URL: https://climaxmedia.com/web-development-services/, rather than ‘services’ or ‘offerings’ or an other word. Our research shows that users find us when they are looking for `web development services`.

And because our page has content which matches this keyword, we feel comfortable having it included it as our targeted url.

Related image, via Moz.

The H1 Tag

The H1 should explain what the page is about – clearly indicating the page topic, and relating to the content below.

There should only be one, and having multiple H1 issues will cause significant issue in terms of your ranking.

The H1 Tag, Image Assets & Hiding Text

Every so often, you may be given an image asset, which will serve as the h1. If you visit our Services page, you’ll see this is how we accomplish our “Brought To Life” text.  (Image above.)

In this case, to not lose any value on the page, you can add that copy to the H1, but then hide its visibility. Be careful not to use `display: none;`, as this will remove the element from the DOM. There a number of techniques you can use for hiding content, which you can read here.

H2 Tags

H2s can be considered the children of the H1. These are not the page title, but denote a section and help to divide block of contents. Unlike the H1 tags, you can use multiple of these.

John Nesler, over at PostModern Marketing, described the differences the following way:

If a web page was a book, the H1 text would be the book’s title. It tells would-be readers whether that subject matter is relevant to their interests … [Comparatively,] the Header 2s are your chapter headings, which give readers a clearer picture of what your content covers, and allows them to quickly find the specific information they want.

Like your H1, the H2s should be descriptive – they should help group content around keywords.

What about H3, H4s, and whatever?

H3s are for subheadings of that H2, and don’t carry much important themselves.

H4s and so forth can be used when you need a heading, but know the content does not have much importance to the keywords you are trying to target – like for organizing content in a footer.

Image Asset, CSS & JavaScript Optimization

Reducing image sizes goes a long way for reducing the speed of loading time, and all content should be minified as best as possible. Mark Hayes, over at Shopify, has some great tips. Similarly, CSS and JavaScript files should also be minified.

One tool for ensuring that you have successfully met page speed standards is Google’s Developer PageSpeed Insights Tool. Trying to achieve a 100% rating is arbitrary, as google own pages fail to reach that number. However, this will give you good insights into whether your CSS, Javascript and Image assets are bloated.

A different, more extensive tool is Screaming Frog. This allows you to do a crawl of your site, similar to how a search engine would, and flag any pages which might have title, url, h1 and h2 errors. This is enormously beneficial, as you can enter URLs that aren’t indexed by google (such as production URLs), and catch any errors before your project goes live.

In Conclusion

Hopefully, what this article shows is that delivering a technically-sound project, from an SEO perspective, has mostly to do with using semantic mark-up, understanding proper URL and Title structure, and optimizing image assets.

For more resources, you can visit these resources from MozSearch Engine Online, and Ozren Lapčević from Five

About The Author

Nicholas Cameron is a front-end developer and digital strategist.

Read more Climax Media blog posts here.