Technical SEO

This week at work I’ve been tasked with creating and presenting a brief talk about technical SEO.

So I thought, why not turn that into a blog post? That way I can get my thoughts down on virtual paper, hopefully share some information with others, and have a bit of a technical SEO blueprint ready for use in future projects.

So What Is Technical SEO?

Technical SEO, is focussed on the actions us developers can take to improve the search engine optimisation of our applications and websites.

While on-page SEO is more concerned with the structuring of elements, and off-page SEO is the process of building backlinks/incorporating social media into your overall SEO and marketing strategy.

Technical SEO is more concerned with the code.

The Basics

The basics we start with include page titles, meta description and keywords tags.

You can find out more information about meta descriptions from Google here.

A quick note on Google Search Central guidelines: 💡 read and follow them.

Below is an example meta tag.

<meta name="description" content="A really useful accurate summation of a web page designed to both inform and entice the user to click for more!!!..." >

Although Google doesn’t explicitly disclose the secrets to search result success, they are the best guidelines we have in my opinion (it’s not a groundbreaking opinion I’ll give you that). My point here is that there are a lots of guides and businesses willing to sell you ‘instant success’ at a price. They have no secret. Just follow Google best practices and you will be OK.

If you are using a CMS such as the omnipresent WordPress, you will find plugins that will cover the basics of technical SEO for you.

I favour Yoast SEO for my websites that are built with WordPress although I know developers who prefer All in one SEO. The free version of Yoast easily allows anyone without any coding skills to manipulate basics such as:

• Meta Description
• Meta Title
• Meta Keywords
• Slug

In addition to those basics, the free version of Yoast also includes some Schema.org markup.

If you don’t know about Schema markup. It’s essentially some code that can be added to your pages to help describe the the content to search engines. The more search engines know about your content, the more confidently and accurately they can serve it up to users.

I’ll discuss Schema.org in more detail later.

The Canonical Tag

Your website is likely to have duplicate content.

What does Google say about duplicate content?

If you have a single page that’s accessible by multiple URLs, or different pages with similar content (for example, a page with both a mobile and a desktop version), Google sees these as duplicate versions of the same page. Google will choose one URL as the canonical version and crawl that, and all other URLs will be considered duplicate URLs and crawled less often.

https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls

So basically, if you fail to explicitly identify a definitive version of a page to Google, you run the risk of a an incorrect version being selected, then your ‘duplicate’ pages could lose crawl time and that nobbles your SEO efforts.

In technical terms, we call the definitive version of a web page the canonical version. We can mark this up by adding a canonical tag to the page. You can see an example of a canonical tag below taken from a previous post of mine about earth day.

 <link rel="canonical" href="https://chrisfarrelly.co.uk/opinion/earth-day-and-sustainable-technology/" class="yoast-seo-meta-tag">

From a technical standpoint it’s important to state that, although you may only have one version of a page on your site if Google can access it via multiple URLs, then that makes it duplicate content. So commonly, on ecommerce sites there are product filters. These can append query strings to the URL to filter through the products and generate multiple links to the same content. The same thing can happen if you have affiliate links or some other kind of tracking that appends query strings to the URL.

Once again, the free Yoast SEO plugin will take care of the canonical URL for you if you are using WordPress. Alternatively add a canonical link to the head of your page to avoid any issues.

Schema.org Markup

Schema markup or structured data plays a big role in how your web pages are perceived by Google.

Depending on the content, markup can be added to a page that could improve the search appearance of that page.

Above is an example of a product page enhanced with structured data. I’ve added the structured data in a code example below.

<script type="application/ld+json">
{"@context":"https://schema.org/",
"@type":"product",
"offers":{"@type":"Offer",
"seller":{"@type":"Organization",
"name":"John Lewis & Partners"},
"availability":"InStock",
"url":"https://www.johnlewis.com/sirdar-hayfield-baby-bonus-spots-dk-knitting-yarn-100g/p5675820",
"priceCurrency":"GBP","price":"3.70"},
"productId":"5675820",
"sku":"240119791",
"url":"https://www.johnlewis.com/sirdar-hayfield-baby-bonus-spots-dk-knitting-yarn-100g/p5675820",
"mpn":"240119791",
"name":"Sirdar Hayfield Baby Bonus Spots DK Knitting Yarn, 100g, Blossom","description":"<p>Soft, acrylic DK knitting yarn with a popular colour-effect.</p>\n\n\n<p>In a standard weight, compatible with any standard double knitting pattern, you can add a sprinkle of extra interest to all your favourite double knitting projects for your little ones.</p>\n\n\n",
"image":"http://johnlewis.scene7.com/is/image/JohnLewis/240119791","brand":{"@type":"Brand","name":"Sirdar","logo":"//johnlewis.scene7.com/is/image/JohnLewis/sirdar_brl"},
"color":"Blossom",
"aggregateRating":{"@type":"AggregateRating","reviewCount":7,"ratingValue":4.9}}
</script>

The most significant enhancement for the user is probably the star rating. I know when I’m browsing for a product I like to see a rating in the search results.

The rating section of the search result is being generated by the “aggregateRating” part of the Schema JSON.

Again, Yoast SEO does add some basic product structured data to a product page if you are using Woocommerce. Some custom code would be needed to get the star rating included in your search result.

It is important to say that you should also be using an external review platform such as Trustpilot to gather reviews. It is seen as more trustworthy than reviews that you are in complete control of.

Google specifies what type of enhancements can be added for different types of content in their search central docs with previews of the potential results.

XML Sitemap

A real basic from a technical standpoint here, but you should be creating an XML sitemap for crawlers to use to navigate around your site and get all your content crawled and indexed. Yoast will generate an XML sitemap if you are using WordPress, and whenever a page or post is added to the site, it will be automatically added to the sitemap.

Ensure that your sitemap has been submitted to Google search console and is being detected to help with page indexing.

Website Speed

Website Speed is also a technical SEO basic we should all consider. As a developer there are actions we can take to improve page speed.

We all want interactivity on our pages nowadays, this calls for the use of javascript. If we just add scripts to a page without thought it can cause a page to render more slowly. A slowly rendered page will return lower pagespeed scores and have an adverse affect on SEO.

It is possible to mitigate the render blocking action of a script by using ‘async’ or ‘defer’ as an attribute in the script tag.

<script async src="https://invitejs.trustpilot.com/tp.min.js" type="text/javascript"></script>

In the above code example the script would be loaded in parallel with the DOM and then executed as soon as the script was downloaded.

<script defer src="https://invitejs.trustpilot.com/tp.min.js" type="text/javascript"></script>

If we use the defer attribute the script will again be downloaded alongside the DOM, but execution will take place after the DOM is fully loaded.

Defer gives you more certainty about when the script is going to be executed. So if you need to manipulate the DOM it could be the better solution.

That is as far as I’m going to go with this introduction to Technical SEO.

I hope you learned something or found something of use to you.

---

To achieve good page speed you also need good hosting.

Krystal offer great value award-winning support and great ethics.

I strongly recommend them.