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 my fellow 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. As much 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.

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

URL Structure

Having a clean URL that contains your keyword goes a long way. 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.

An Example With URLs

If we are working with an existing site, we need to ensure that any previous URLs will redirect to new ones.

For example, say we are we redoing company X’s products page. This company makes washing machines, and are currently ranked 9th in search results for a specific machine called the “Super-Clean”.

Their old URL might be:

company-x.ca/products/product-12412424/washing-machines/super-clean

After our work on the page, we change all the URLs to be as follows:

company-x.ca/products/washing-machines/super-clean-12412424

What we want to be careful here is to redirect traffic from the old URL, to the one we have just created. Otherwise, we lose all the authority that the other had built up, and our ranking of 9th no longer means anything. We have to start from scratch.

Even though that old page is no longer hosted on the site, the URL still has value. So we would want to use a 301 redirect, which will allow us to transfer some of the value from the previous URL to our new one. You can read more about 301s and 302s here.

If, however,  the content no longer exists on the site, then we would want to send a 404 and de-index the URL.

TLDR:

Did the content move? Then redirect like a new product page

Is the content no longer relevant and there isn’t similar content on the site? Then 404, and deindex the URL.

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.

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

An example of a title tag

About The Author

Nicholas Cameron is a good guy – a very cool guy.

You can find some of his other websites herehere and here.

Read more Climax Media blog posts here.