SEO Basics: Why It All Starts at the Technical Level

SEO is arguably more important than ever. You're not just trying to rank for potential customers, but also trying to be found by AI tools when someone asks about your services. In this article, we're going to focus on a part that's often forgotten: the technical side. SEO starts at the development stage of your website and it should be part of the planning, not an afterthought.

Website Code Structure

This is where it all starts, it can be easy to get wrong though, especially if the website's content is not static and is being provided by admins of a content management system. It all depends on having a solid foundation, and then providing any content authors the required training to maintain it moving forward.

There's a few key aspects of your website's code structure that matters, this is not an exhaustive list, but is a solid starting point and is commonly where I find gaps.

1. Hierarchy

2. Image Alt Descriptions

3. Semantic Code

4. Clear Link Text

Hierarchy

This is an easy one to miss, especially when there's user-submitted content through some kind of admin portal. This relates to the hierarchy of the headings on the page, and this also ties in to semantic code which we'll go into more detail with below.

It's key to separate how something looks from how it fits on the page. Over the years design on the web has evolved dramatically, with various different trends, all of this means that we may break some rules in order to get something that looks good. However, while we can break some design rules, we shouldn't break the page hierarchy rules.

On the web, you typically have access to six heading sizes, h1 - h6. These can be commonly associated to set font sizes, so you visually see a difference. While this is okay in most instances, when you start incorporating that into a design, you may find that the design wants a heading sized more like a h4, but you must consider the position of that heading.

A typical layout may have a title, then multiple sections with their own headings, and may have sub-sections within those. If your page has a h2, it must have a h1 above it in the hierarchy, most SEO tools would trigger this as a fail, or at least a warning, since you should follow this rule as it helps search engines, and assistive technologies, understand the structure of your page.

Let's take an example from our own website here, our home page has a section "A full suite of services from concept to launch", this has some cards each representing a service.

The heading sizes here may look more like a h2 for the main section heading, then maybe a typical h4 or h5 for the card headings. However, if we looked into the code we would see that is not the case. We have a h2 for the main section, our page hero has our page's h1, then those cards are all h3 headings as they all sit under our section, so the hierarchy means they need to be one level down. We then styled them to look how they do to fit the design we were going for.

Our admin, where I'm writing this article, also accounts for this. So those cards we can control the heading size that they use, which would then be based on where on the page it is placed. Our text editors, also don't allow h1 to be added, this is our page title and so we shouldn't ever have more than one of them per page.

For content editors, it can take some getting used to, but over time and with the correct system-training it can just become second nature, and will have a big impact on how search engines and assistive technologies can read and understand your page.

Image Alt Descriptions

This is an aspect of technical SEO that I think everyone is mostly aware of, however, can be missed especially post-development when the content is now being created and maintained via an admin panel. On the web an image should have what is called an "alt description". This serves two purposes:

1. First, if the image fails to load for some reason, a web browser would typically render this description in its place.

2. Second, it is used by search engines and assistive tools to understand what the image is. So being descriptive is quite useful for these scenarios.

If an image is missing this description, then search engines won't know what it is, potentially harming the ranking of that page, and assistive technologies wouldn't be able to explain it to a user, hurting their experience.

Any good content management system (CMS) should provide a way to set this alt tag. Statamic, which we use as our go-to and is powering this website makes it super easy by editing an uploaded image (asset), in addition to adding custom fields every image will have the ability to define the alternative text.

On the top-right you can see where we specify the alt description (or alt text) for this image. Yes, we put the effort in to make sure it is an inception of alt text!

It's then just a case of making sure the entered text is correctly output with the image. Simple!

Semantic Code

This one is fairly simple, and is something that with the introduction of HTML5, means that there's more HTML tags available when building a web page to help describe what different parts of the website are. Of course we have the usual image, video, paragraph etc. however, it's important to make use of some of the other ones that are not often used, and while they all behave like a normal div element, they do have their own semantic meaning to help search engines and screen readers understand the page and its structure. Here's our top-tips:

• <header> - Used to represent a header of the context. Typically a web page would have one, which would usually hold the brand logo, navigation links, search etc. however, it is valid to have multiple and could be used to represent a header of an article, card, or similar component.

• <footer> - Similar to <header> except it represents the footer of the context. Mostly used for the footer of a website, with navigational links, branding etc. but can also be used for other components such as the footer of a card, popup or other component.

• <section> - This represents a section on the page, typically it would contain a heading, and representing a group of content. This is commonly used for different sections of a web page, like our services section above, this is wrapped in a <section>.

• <main> - Specifies the main content of a page - usually between the header and footer.

• <nav> - Represents a set of links, usually with other containing elements to help with layout, it typically represents the main navigation of the page, usually within the header.

This only scratches the surface, there are a few more semantic elements which should be used where relevant to help describe the page.

Clear Link Text

This is another simple one, but is very easy to fall into the trap. A link to another page actually needs to be quite descriptive as it helps assistive technologies when reading out the page, and has some support with SEO as well. It isn't always needed though and very much depends on the context.

What do I mean here, well let's take for example you have a simple section with a header, text, and maybe an image. There's a call to action within that section that takes you to a more detailed page. In most cases it may have the text "Learn More". This is okay in some instances, however, it is generally better to try and make this more descriptive, by maybe saying "Learn more about X".

It is very much one that isn't a massive impact, but especially if it's a larger section it can be beneficial. Sometimes a hidden link would be used as well, for example if you want a whole card clickable, these should still have a link description for screen readers, and should be descriptive too. Using our section example above, each of the service cards shown are a clickable link, however, if you were to look at the generated code the link has a descriptive label, "Learn more about Website Design".

Getting your code structure right is the foundation, but search engines also rely on data that isn't visible on the page itself. That's where metadata comes in.

Metadata

This is quite an easy one, and is for the most part a set and forget, especially for a CMS powered site. I'm not referring to the typical meta data around title, description etc. as I think those are all fairly well defined. I'm referring to the JSON-LD specification, or JSON for Linking Data. This is used by search engines and other technologies to get more metadata about a page, it's quite common for this to be a good contributor to the rich data you might see on Google, with the extra links etc. under a search result.

It's mostly a machine-readable format that is hidden in the page, but would be populated with key data relating to the page. Such as the entity type (article, event, place, etc.) plus any other associated data such as contact details, title, address, etc.

It is worth incorporating and is a great way to provide additional detail that you may not want visible on the design, but do want search engines to have access to. This article has a few too, the one relating to the article itself looks like this:

{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "SEO Basics: Why It All Starts at the Technical Level",
    "url": "https://www.grizzlypumpkin.com/dev-den/seo-basics-why-it-all-starts-at-the-technical-level",
    "datePublished": "2026-03-24",
    "publisher": {
        "@id": "https://www.grizzlypumpkin.com#business"
    },
    "author": {
        "@type": "Person",
        "name": "Thomas Erbe"
    },
    "description": "SEO isn't just a content or post-development process, it starts with your website's code. We cover the technical SEO fundamentals that would give your website a solid start.",
    "dateModified": "2026-03-27"
}

With solid structure and metadata in place, there's one more technical factor that can make or break your rankings: performance.

Performance

I won't focus too much on performance as it could probably have its own article entirely, especially given some of the really poor performance I've seen from some websites. Performance is really important for many reasons, but the two that I find most important are:

1. Search engines and SEO, if your webpage takes too long to load they'll typically reduce your rank in favour of competitive pages that load faster.

2. Users, if a user has to wait too long they'll typically leave before allowing the page to load. Studies have shown that a load time of over 3 seconds can cause up to 53% of users to leave and look elsewhere.

There are a few things to consider when it comes to performance:

1. Hosting - good, efficient, hosting is critical. You don't need to break the bank, but having a slow hosting provider is going to lose potential business.

2. Caching - having caching set up, both browser caching but also page caching can also be a huge improvement, especially when your pages are generally quite static, which most are.

3. Image size - Images can be a huge drain on performance for a webpage, ensure they're optimised and in modern formats. This can either be done manually, or any good CMS should have tools built in for this.

4. Code optimisation - if you have slow code then other performance optimisations may not have a big impact. Ensuring that code is well written and optimised for its needs is vital, especially since it can be tricky to go back and correct it without disruption. This is vital for plugin-heavy systems; WordPress and others, where you don't know the quality of each of those plugins.

5. Core Web Vitals - this is worth a further deep dive in a dedicated article, however, it is a set of metrics that Google and others use to understand the overall performance of a webpage. I find the scanning and tests are not always accurate compared to real-world usage, but it can be great tool and test to give a baseline and identify any critical issues that should be resolved.

Conclusion

We've gone through a few different aspects of the more technical side of SEO, which in my experience I find is not always considered as much as it should be. Technical SEO would provide a solid starting point for any continued optimisation and monitoring. It starts with good code.

As the saying goes "garbage in, garbage out".