Recently, I challenged myself to more clearly define the essentials for developing a sound website structure and add these to daily practice. Documentation is key for clarification (personally), so please enjoy this brief but thorough read, and add the knowledge to your toolbox. Let me know if you have any additions or perhaps a correction.

As we get started – if you’re not sure how to view a clear outline of the hierarchy of your website content, get the HTML5 outliner extension for Chrome.

Logo

Use an image tag for the main website logo, including a descriptive alt tag with the full company/blog’s name (as opposed to a background css image).

Images

Use images in post/page content and the background css property for decorative images and styling.

Name files using descriptive words that would show if an image doesn’t load. DSC0157.jpg provides no meaning to what the main subject of the photo contains. Google has more information about image best practices.

Serve appropriately scaled image sizes for different devices sizes. A phone should not have to load a 2500×1500 pixel image. Large files are detrimental to load time.

Use captions with images when you can. They are read three times more often than if the image is talked about in the body copy. (This is likely due to how we’re trained to scan content.)

Heading Tags

There should only be one H1 heading tag on a single page.

The front page should use your company/blog’s name as the H1.

Single, post, and category pages, should use the H1 for the title. The company name should be no more than an <h3> on these pages.

Javascript & CSS

Move scripts out of template pages and enqueue them to make sure they load first and can be cached. Combine and minify links and scripts to minimize load time and the number of http requests. W3 Total Cache (WordPress plugin) handles several web performance optimizations for caching, minifying and delivering content.

Breadcrumbs

Using breadcrumbs can help search engines crawl your site easier and is useful to visitors on your site.

Pagination

If you have a blog or multiple posts spanning more than one page, pagination links and Previous / Next links using a ‘rel’ attribute send a signal that these pages are related and sequential.

<a href=’products.php?page=1’ rel=’prev’>Previous Page</a>
<a href=’products.php?page=3’ rel=’next’>Next Page</a>

WordPress Plugins for SEO

I develop websites using the content management system (CMS) WordPress. The most highly recommended SEO plugin for WordPress is Yoast SEO, which includes sitemap generation. I also use their Google Analytics plugin.