paint-brush
Coding a Strong Foundation for SEOby@cronofy
5,953 reads
5,953 reads

Coding a Strong Foundation for SEO

by CronofyFebruary 6th, 2018
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

When you build a website and create content it is important to keep in mind why you are doing it. You want potential clients and users to find your products when they enter a related terms in a search engine.

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Coding a Strong Foundation for SEO
Cronofy HackerNoon profile picture

When you build a website and create content it is important to keep in mind why you are doing it. You want potential clients and users to find your products when they enter a related terms in a search engine.

Developers might roll their eyes when they hear the magic words ‘Search Engine Optimization’.

And if you want to make a digital marketer roll their eyes, tell them the old joke, ‘An SEO expert walks into a bar, pub, lounge, public house’.

But, SEO is crucial in the success of your business, especially if, like Cronofy, you rely on a strong online presence to grow your business.

Here’s a list of things you can do that will make your SEO and Marketing colleagues happy (and suspicious about what you really want from them). If you’re keen to go even further, you should check out Moz’s free beginner’s guide.

If you are comfortable with SEO, you may want to just use the points below as a checklist when you’re working on a website.

1. Redirects

Search engines hate duplicate content, so pick a side: redirect www. to non www. (or vice versa) to avoid ending up with two copies of every page, e.g. 301

https://example.com/batman-watch

to

https://www.example.com/batman-watch

Courtesy of GIPHY.

This is pretty standard stuff, but different redirects have different impacts on SEO; for extra reading on the ranking power behind them, check out Moz’s Best practice redirection.

2. Meta data

Basic meta data falls into three tags: titles, descriptions, and links. Meta descriptions and titles should include relevant keywords for the page (but not be stuffed with them). The golden rule is to always write for a human rather than a search engine.

Always write for a human over a search engine.

Titles should ideally be under 70 characters in length and explain clearly to the reader exactly what they can expect to find on your page:

<title>Time Travel: A Beginner’s Guide from Cronofy</title>

A good meta description starts with a call to action and gives the reader a convincing reason why they should visit your website in under 230 characters.

<meta  name="description"  content="Jump into our free beginner's guide on how to make  time travel work for you. Written by Cronofy, experts in time  and space.">

Meta keywords are a legacy tag from the search engine optimization days of yore.

It’s worth checking out your competitors’ code to see if they’ve got any listed so you can see what they’re trying to rank for.

When it comes to your own site pages however, you can leave the keywords tag out to shave a fraction of a KB off your load time. Or entertain yourself by turning it into an easter egg.

<meta name="keywords" content="such keywords, much excite, wow read now">

3. Robots.txt

Most SEOs hate dealing with robots.txt.

One wrong disallow and the entire website drops out of the search engines.

You’ll instantly be a superhero if you offer to deal with it (beers for life seems like adequate compensation).

Pattern matching, robot exclusion protocol tags and much more are all covered in this article on robots.txt.

Courtesy of GIPHY.

4. Search-engine friendly URLs

This is one of the golden areas where both users and search engines want the same thing: URLs that are easily understood.

Poor URLs are pretty rare these days, but double check that your pages look more like:

https://www.example.com/batman-watch

as opposed to:

https://www.example.com/38329jdaajwhj323WTF

5. Canonical tags

This header tag tells search engines which version of a page you prefer them to crawl and rank. For example, you could have several URLs to the same page with different strings such as:

https://www.example.com/batman-watch

https://www.example.com/search.php?item=batman-watch

https://www.example.com/product.php?item=batman-watch&trackingid=1234&sessionid=5678

Courtesy of GIPHY.

If you develop for an ecommerce website, chances are this is a widespread issue for you.

Utilizing canonical tags means you can direct interest to the version you prefer (in this example, http://www.example.com/apple-watch) without being penalized by the search engines for having duplicate content across different URLs.

Google’s Matt Cutts explains all in this video.

It’s really important to get your canonical tags right as your search engine visibility can be trashed very easily if you get it wrong.

Audisto has created a great in-depth guide called Link rel=canonical: How to do URL canonicalization right that goes into a lot of detail about when and how to use canonical tags.

6. Relative vs absolute links

As a developer, it’s likely that you favor relative links over absolute.

Unfortunately, the world of SEO demands the opposite.

Check out Moz’s video, Should I Use Relative or Absolute URLs?

(TL;DR: coding relative URLs might not be the best idea for SEO) and make it a new habit for live environments. Sorry.

7. Page speed

Google has admitted that page speed is a ranking factor.

As a result, the faster your website is, the better.

Some of the techniques to achieve that include using a file compression software to reduce the size of the CSS, HTML, and Javascript files that are larger than 150 bytes, optimizing your code by removing unnecessary characters and improving your server response time.

Your SEO expert colleagues will definitely be happy if you can help them reduce the ‘page load time’ so if you know a weird old trick for shaving MB off a page, now’s the time to pull it out of the bag. Use a page speed diagnostic tool like WebPageTest.org to see how your website it currently performing.

8. Language tags

If you’re just using one language, search engines are spot on when it comes to detecting what that language is.

But if you’re utilizing different languages to present the same content, you’ll need to use the hreflang tag to ensure the right people get directed to the right places and you aren’t penalized for duplicate content.

9. Facebook Open Graph and Twitter Cards

(Okay, so these are technically social media things rather than SEO, but they’re still one of those must-do tasks for effective marketing and branding).

Open Graph and Cards serve a number of purposes, but at their most fundamental level are used to ensure that an appropriate image and description appear for a page when someone posts one of your site URLs on Facebook or Twitter (bonus: they have their own APIs).

For more detail and how tos, take a look at Kissmetrics’ detailed article: What you need to know about Open Graph meta tags for total Facebook and Twitter mastery.

Other schema and microformats, such as tags for creating those star ratings you see in Google searches, can generally be found here: http://schema.org/docs/gs.html

10. Sitemap(s)

In addition to having the minimum of a sitemap.xml file, you’ll also want to submit it to the search engines once your website is ready to be indexed (or reindexed, if you’re relaunching it or have made a substantial number of changes).

Once you’ve uploaded your sitemap(s), you can submit them directly to Google and Bing via Google Search Console and Bing Webmaster Tools.

11. Live pages

Have you ever put a page live even though you don’t want people to actually visit it just yet?

If you’re using any kind of CMS, chances are when you publish it will get added to your sitemap and the search engines will be pinged.

Best practice: only put pages live if you don’t mind random people visiting them.

If you really have to put a page live that’s not for public consumption, use a noindex tag before putting it live (don’t forget to remove it later!).

12. Nofollow links

Sometimes you end up linking to a website that’s nothing to do with yours, like when you need to credit the creator of your favorite Batman gif. In those cases — and some others — add nofollow to the link.

<a href="https://www.allthebestbatmangifs.com" rel="nofollow">Batman gif</a>

This tells the search engines that this link isn’t as important as others on your website, and allows them to focus on the ones that are more relevant.

Note: If you’re running a CMS with a good SEO plugin (e.g. Yoast for WordPress), chances are you can sit back as most of the hard work’s been done for you.

Just have a browse through the settings and a quick look at individual pages to check everything is being utilized correctly, and that you’re not duplicating tags or important files outside your CMS folders.

Also, you might not be the only person in charge of creating content for your website so don’t hesitate to share this checklist with your colleagues.

This post was originally published on the Cronofy blog.

To super power your SEO strategy, check out our Trello Calendar Connector.