Chris Reddington

Published on Mon, May 3, 2021

SEO Development Web Development

One of my recent tasks for Cloud with Chris was to investigate some additional areas for SEO improvements. If you’re unaware, SEO stands for Search Engine Optimization; a set of practices to improve your ranking in search engines such as Google, Bing and others when they crawl and index your website. I was already in a good position, but there were some things that were frustrating me, we’ll explore those in this blog post.

From the screenshot below, you’ll notice a few interesting details among the results -

  • There are a series of smart links which appear directly the main cloudwithchris.com result. One for about, and one for a certain podcast episode.
  • Some links contain additional ‘metadata’. For example, the YouTube, Facebook and Dev.To links have a set of breadcrumbs above the link, showing an outline of the site’s structure.
  • Not shown in the screenshot, but you may have noticed that some sites have an integrated search input when you’re searching on your favourite search engine.

Search results for Cloud with Chris in Google

Search Engine Optimisation is based on a number of factors, including -

  • Description Metadata on your pages
  • Keywords on your pages
  • Unique titles for each of your pages
  • Page load times
  • Good security practices (e.g. HTTPS)
  • and much more…

There are plenty of existing articles that talk about how to optimise these common SEO practices, so I recommend you search for these as I’m going to aim to not reinvent the wheel. If you’re interested on how I achieve some of these in Cloud with Chris, you can take a look at the metadata partial template that I use within my Hugo template.

Initially, some of the content in my metadata partial built upon existing examples from the Hugo Community without fully understanding the purpose (lower priority item on the backlog), including an example below;

<script defer type="application/ld+json">
  { 
    "@context": "http://schema.org", 
    "@type": "WebSite", 
    "url": {{ .Permalink }}, 
    "sameAs": [
      {{ printf "%s%s" "https://twitter.com/" .Site.Params.social.twitter | htmlUnescape |  safeHTML }}, 
      {{ printf "%s%s" "https://github.com/" .Site.Params.social.github | htmlUnescape |  safeHTML }}
    ], 
    "name": "{{ .Title }}", 
    "logo": {{ "/favicon.ico" | absURL }}
  }
</script>

This is an interesting snippet of code. What is it doing? Well, this is the magic that tells search engines how to display our listings, combined with the metadata that we mentioned earlier (Title, Description, etc.).

So, what is schema.org? According to the schema.org site Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond… Founded by Google, Microsoft, Yahoo and Yandex, Schema.org vocabularies are developed by an open community process, using the public-schemaorg@w3.org mailing list and through GitHub.

As you’ll probably gauge from the above, schema.org is an open specification to provide structured data so that the search engines understand the desired listing for our search results. Once again, if you’re interested you can find how I’ve implemented these standards in my metadata partial template.

There are a couple of resources that were invaluable in implementing this -

Example schema.org validation in Google Rich Results Test

Navigating over to my Google Search Console admin center, I see a new area which focuses on enhancements. This targets the schema types that I have defined. At time of writing, this includes Breadcrumbs, Sitelinks searchbox and Videos. As an example, when we look at breadcrumbs, we can see that Google has been crawling the site and picking up the additional metadata over recent days.

Google identifying breadcrumbs enhancements over recent days

What does that look like from a Search Result perspective? Notice that the most recent result in the list was the event sourcing and materialised view episode? Searching for that in Google gives us the following result -

Showing breadcrumbs in Google Search

This can be incredibly powerful. For example, have you ever searched for ‘How To’ content and noticed that certain results automatically bubble up to the top of the page, with a card displaying step by step instructions? Guess how that’s done… You guessed it, using a structured schema approach! Schema.org is one example of using structured data. There are others, including JSON-LD (which we’ve been using throughout this post, and Cloud with Chris), Microdata and RDFa. You can find further details on these, and how structured data works in general over at Google’s page - Understand how structured data works.

I’m now in the process waiting for Google to discover the changes, re-crawling/re-indexing the site over time. The breadcrumb results seem to be working well so far, but I haven’t seen any changes based upon Person/Blog/Podcast episode as yet, so will be monitoring the impact of these changes.

What do you think of using structured schema to influence the search engine results? Have you implemented this on your own site, and have some ideas or recommendations? Or have you read through this, and thought of some ideas that I may have overlooked? I’d love to hear further! Let me know over on Twitter, @cloudwithchris.

Thanks for reading, and I hope this has encouraged you to investigate implementing structured schema for your own ite! Until the next blog post, bye for now!

Related

JAMStack and the Cloud - A winning combination

Blog

JAMStack and the Cloud - A winning combination

When I mention the term JAMStack, I’m not pretending that I’m Paddington bear with a stack of Jam sandwiches! If you hadn’t heard, JAMStack is a term that describes applications based on JavaScript, APIs and Markup. That means, we’re referring to files that are content in …

Development Static Content Hugo Cloud Design Patterns Web Development Azure CosmosDB Azure Storage Serverless

Chris Reddington Published on Wed, Jan 20, 2021

Optimise your site - Addressing recommendations from securityheaders.com

Blog

Optimise your site - Addressing recommendations from securityheaders.com

Introduction

In my blog post earlier this week, I mentioned that I recently spoke at the Northern Azure User Group. The other speaker for the evening was Scott Hanselman, who talked about his journey moving a 17 year old .NET App into Azure. This was his blog. Along the way, he called out some of …

Web Development Security Blogging How To Azure Storage Static Content

Chris Reddington Published on Wed, Apr 14, 2021

32 - Accelerate .NET to Azure with GitHub Actions

Episode

32 - Accelerate .NET to Azure with GitHub Actions

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want. With .NET Core bringing a cross platform approach, getting your …

DevOps Developer Development

Chris Reddington Isaac Levin Published on Fri, Mar 26, 2021

Contributing to Open Source

Blog

Contributing to Open Source

Contributing to Open Source Software. It sounds so formal, doesn’t it? I thought that for quite a long time, and it put a bit of a mental barrier in place for me to begin my journey. I am a classic over thinker, but that’s perhaps another blog in its own right!

Contributing to Open …

Development Open Source Community How to

Chris Reddington Published on Tue, Jan 12, 2021