SEO for a non-SEO web developer
SEO is a learned & practiced skill. There is no doubt about the fact the keeping up with the latest on how search engines rate and rank websites is a full-time job and, frankly, one that I don’t have time to keep up on. There are however best-practices and other basic things I can do to help a site look good in search results.
Below are a few of the things I look for and try & force when I create a website. This list is compiled from searches on the subject over the years as well as reports generated by online tools like SEO Site Checkup & Site Checker Pro.
I use ExpressionEngine to build CMS backed websites so I use quite a few EE examples throughout this post, but the concepts here apply no matter how you create sites.
Content quality & keyword usage are additional concepts not within the scope of this article.
Metadata
The metadata in a page header (i.e. description, and Open Graph tags) are a simple thing to force a user to include when they create a new page. Generally I use the Description Tag, canonical and Facebook Open graph tags
<meta property=”og:image” content=”“/>
<meta property=”og:title” content=”“/>
<meta property=”og:url” content=”“/>
<meta property=”og:site_name” content=”“/>
<meta property=”og:type” content=”“/>
<meta property=”og:description” content=”“/>
Within ExpressionEngine I create SEO fields for all appropriate entries that I can’t pull from available data. Namely, description & og:description, og:image, canonical (if the content isn’t original). All the others I can pull from EE tags.
Meta Title Tag
There are 2 different structures I use for the title tag. One for the Home page and the other for all of the interior pages.
Homepage:
This consists of a site name and then a short description, usually an abbreviation of my meta description and usually separated by a pipe character. SeoSiteChecker says that the length of the title tag should be between 35 & 65 units (or characters).
An example would be: “St. Jacob’s Lutheran Church | A congregation of the ELCA”. and the search result looks like this:
Interior pages:
This is a little simpler. The format I use here is
title | site_name
Your interior pages should have a page title that reflects the page content - and ideally - the page headline should match. I force this in Expression Engine by using the format above, which - to continue my earlier example - would render a result such as: “Christian Education | St. Jacobs Lutheran Church”. Admittedly, it becomes a little hit or miss matching the title length recommendations, but I feel a descriptive and accurate title is better for both SEO & for user experience.
CSS & JS
When it comes to CSS & JS, there are several things I watch out for:
- Limit the number of CSS & JS and other library calls from remote sources. I find it best to download and store various css & js libraries locally & call them into my page from there. This speeds pageload. Examples would be Font Awesome, various “slider” packages, jQuery etc.
- MInifi & combine CSS & Javscript: The individual size of all those CSS, JS & Font files all contribute to lengthening page load. I always choose the minified verion of these files to load and then, in EE I use an Add On such as Minimee to combine all the files and store them in a single cache file.
- Inline CSS Styles: Don’t use them. Create classes & store them in your master CSS file. Google looks poorly on inline styles. They also contribute to your page size (although minimally - every little bit you can save helps).
Heading Tags
A good heading structure will help the viewer skim through your pages content. When I design a site, I keep in mind that every page should contain one single tag and then as many h2, h3, h4, h5 & h6 as it needs. I don’t worry about a page containing all the heading tags, but rather that I use from highest to lowest, so I may have my single H1, and then 2 H2’s, 3 H3’s and a few H4’s.
Structurally, that’s all there is to it but what is of more importance is that the headings contain good content with a decent mix of keywords.
Images
Images on the page are as important to good SEO as anything else. Descriptive image names, the presence of the “alt” attribute tag and good image size optimization are all things to look for.
When using a CMS, it’s hard getting the user to pay attention to the image name, all you can really do is make them aware - but when building out a site, put the tools in place to make them add the “alt” attribute and when an image is uploaded, and use a utility to create various sizes and optimizations, and then call the appropriate image in each use instance.
When I have fixed image positions in a page layout, I make sure to require fields for the alt attribute in either the page flow or in an “image Grid” created for the purpose. Another option is to apply the name of the image specified when the image is uploaded to the alt tag in your page layout. Images that are too big slow your page load and page load affects SEO.
The list above really only scratches the surface, but I have found all the items listed to be a good starting point. If you use tools such as SEOsiteCheckup or Site Checker Pro, you can dig deeper. Running a site through these tools when I have completed, and then at various points after is a regular practice I follow.