Blog

SEO Standards for Front-End Coders & Back-End Developers

SEO Standards

This is a post for any HTML coder or back-end developer who wants to know what it is that they should know about SEO. On-site SEO requires more than just an SEO expert. It’s a team effort. It means getting multiple people involved, including a designer, and front- and back- end developers. Everyone must understand their role in building a search engine-friendly website.

When building a website, these are the roles typically involved:

  • The SEO strategist does the keyword research and plans the required landing pages based on what they know of the client’s business goals and needs. They provide a list of pages that must be on the website as well as any front-end coding recommendations that are specific to the needs of a particular website.
  • The information architect takes that information from the SEO strategist to then integrate that into their IA work for a website that is both usable and search engine-friendly.
  • The designer creates an interface that translates the IA wireframes into a well-branded, effective communication tool that can handle the necessary content as specified for SEO purposes. The designer is also partly responsible for ensuring that the fonts they use that are crucial to the SEO project are machine-readable and that the page load time and bounce rates will not be negatively affected by a design element.
  • The front-end coder must ensure that content is coded to in a search-engine friendly fashion.
  • The back-end developer needs to ensure proper canonicalization of URLs and provide the tools necessary to help with SEO.

SEO standards for Front-End Coders:

To make it easy for front-end coders and back-end developers to have a list of items to consider when doing their part of the website building process, I've made a list of standards to go by:

  • CSS vs Tables

This shouldn’t require mentioning, but websites should be using CSS rather than a table structure. This allows for improved ordering of content elements on the page. For example, being able to place a long left sidebar below rather than above a block of unique content would be nice. CSS allows that to happen.

  • Usage of H tags and other style elements

Limit the usage of H tags (H1, H2, H3, etc) and <strong> tags to non-repetitive content. That means don’t use these HTML tags on site-wide headings, sidebars, footers, or anything that is repeated across the website or multiple pages. Instead, use a regular div. Reserve these tags for unique content on every page.

  • Fonts

As much as possible, use machine-readable fonts. An alternative is to use font-replacement such as @font-face. As a last resort, use an image to display text. Place the image in an image tag (rather than using CSS) with alt text that repeats what is written in the image, word-for-word.

  • Images

For images that are stylistic elements, using CSS background images is fine, but for content elements, found within a body of text that is unique to a page, use a regular image tag. For logos, use an image tag rather than using text replacement, as seen here. http://css-tricks.com/rethinking-css-image-replacement/  (see “The New Way”). Alt tags should contain the words seen in the image.

  • Site speed

A web page should not take more than 3 seconds to load on a 10Mb connection. The front-end coder is not responsible for the entirety of what makes a page fast or slow, but they do have a role to play. That means consolidating CSS and javascript files, loading javascript at the end of the page, creating sprites and seeking other size-cutting opportunities.

  • Making content readable

Search engines have trouble reading content that is within <script> tags or that loads dynamically (such as AJAX). Anything that does not come loaded as the page loads will most likely not get picked up by search engines. Do not use dynamically loading content unless it is explicitly stated in the website specification document.

SEO Standards for Back-End Developers

Canonicalization

A canonical URL is the version of any given web page’s URL that we want indexed by search engines. Canonicalization is the process by which we achieve that result. Every page on a website should only be accessible from one URL. Additional URL parameters can be added, if handled using techniques described here.

  • Dealing with www and index pages.

By default, all of the following URLs should redirect to www.example.com

example.com
example.com/index.(.*)
www.example.com/index.(.*)

There may be cases where a website owner prefers to use the non-www version or a subdomain as their root domain. That is fine as long as all other versions redirect to that chosen version.

  • Dealing with trailing slashes

URLs may have a trailing slash “/” at the end. Sometimes they do not. The server should always redirect to one or the other. Ideally, the version with the slash is preferred.

Example:
www.example.com/blue-widget should 301 redirect to www.example.com/blue-widget/

Note that this is not an issue with root URLs, such as www.example.com. A slash will never appear at the end of that URL.

  • Canonicalizing subpages

A product page on an e-commerce website that is accessible at 3 different URLs is not a good idea. The example demonstrates a problem stemming from the CMS architecture. Ideally, there should only be one URL.

/product/reebok-black-crossfit-shoe/ET256/


/shoes/product/reebok-black-crossfit-shoe/ET256/


/shoes/fitness/product/reebok-black-crossfit-shoe/ET256/

In this case, where categories and subcategories appear to be constantly changing, the best URL to use is /product/reebok-black-crossfit-shoe/ET256/. No other URLs should open this page. It’s okay to add parameters to the URL. For example, the existence of the following URLs is okay if the canonical link tag is used.

/product/reebok-black-crossfit-shoe/ET256/

/product/reebok-black-crossfit-shoe/ET256/?cat=shoes

/product/reebok-black-crossfit-shoe/ET256/?cat=shoes&subcat=fitness

For each of the URLs above, what’s called the canonical link tag should be added to the <head> section of the page. The purpose of the canonical link tag is to tell search engines which version of a URL to index. As mentioned earlier, the version of the URL that we want to index is /product/reebok-black-crossfit-shoe/ET256/. In this case, the canonical link tag should look like this on all 3 of the above URLs:

<link href="http://www.example.com/product/reebok-black-crossfit-shoe/ET256/" rel="canonical" >

Side note: for tracking purposes, marketers need to add additional parameters to a URL. Those parameters should not be overridden and they should not cause the page to give a 404 error.

CMS Features that help with SEO

Since most websites use some sort of content management system, it means that the SEO specialist will need to rely on the CMS to help them modify website content to reach their objectives. Here are CMS capabilities that help with SEO:

  • Ability to modify title tags and key meta data on all pages. That means the content that goes into the following areas:

<title>{CONTENT}</title>
(by default, use this: {Page Name} | {Company Name})

<meta name="description" content="{CONTENT}" >
(by default, leave this empty)

<meta name="robots" content="{CONTENT}" >
(by default, use index,follow)

<link href="{CONTENT}" rel="canonical" >   
(by default, match the URL of the page. So if the URL of the page is http://www.example.com/product/reebok-black-crossfit-shoe/ET256/ then the canonical link tag should look like: <link href="http://www.example.com/product/reebok-black-crossfit-shoe/ET256/ " rel="canonical" >

  • Updating of the sitemap.xml file:

The CMS should be able to generate a sitemap.xml file and place it in the root folder of the website (www.example.com/sitemap.xml). It should contain all main pages of the website and auto-update when new pages are added or some are removed. This is the format to follow:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
</url>
</urlset>

When a website contains multiple sections, for example a WordPress-controlled blog, and some other self-contained sections, it may be easier to generate a separate sitemap for each section. These can be linked to using a sitemap index file, as seen in this example: http://www.bluefountainmedia.com/sitemap.xml

  • Updating of the robots.txt file

The robots.txt file controls where search engine crawlers are allowed to go. This file should be editable via the CMS. Magento has a list of subdirectories that should be disallowed by default that should be included from the start.

  • Editable page sections

Although it is not an SEO requirement, it is beneficial for tracking purposes to be able to edit various parts of all web pages on the website. These include:

Immediately after the opening <head> tag.
Immediately before the closing </head> tag.
Immediately after the opening <body> tag.
Immediately before the closing </body> tag.

There are various tracking scripts that help in obtaining information about user behavior that need to be added to any of these areas. There should be a way to add a tag to all pages as well as each page individually.

  • Image uploads

When images are uploaded via the CMS, file names should be editable rather than being rewritten to a random string by the CMS. Image titles and alt tags should be editable (they usually are in most content management systems).

  • Page speed

To optimize page load time, various back-end load time cutting techniques should be employed, a long list of which can be found here: http://gtmetrix.com/recommendations.html. Pages should not take more than 3 seconds to load.

  • 404 configuration

When a random URL is accessed, the server should return a 404 response - not a 302, 200 or any other.

If this post has been beneficial or if you have any other standards that should be added here, let me know in the comments below!

Search Engine Optimization Whitepaper

Categories:

Share this post

Comments on this post

  1. All web professional should read this blog once. If we will develop a website with good effect then what will happen if we are not getting sales. Main object of website how to get more business. So every web designer & developer should know SEO requirements before start design of a website.

  2. oh! your post is so useful for me! Thanks a lot for sharing, I’ve learned a lot :)
    Especially from “SEO Standards for Back-End Developers”

  3. I am really enjoying reading your well written articles and its really helping me. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Thanks for sharing. Keep up the good work.

  4. Pingback: Common Web Design Faux Pas | THE Tech Scoop

  5. Very well written and easy to understand..

  6. Very well written guide. In my experience working with Front-End and Back-End developers, there are section points which both of these “persons” don’t understand and always looks to around the obvious truth.
    So, that`s a good startup!

    I would love if you add how the back-end developers can handle with the .htaccess file helping the SEO job. I think a Technical SEO person, should absolutely know what the .htaccess file is doing and how to manipulate and improve it.

    Thank you

Comment on this post

*
*

Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Featured Blog Article
Download our Free Whitepapers
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052