Alright, don’t get me wrong, search engine optimization (SEO) isn’t why I became a developer either. I want to build cool apps and websites, but I would also like for people to see those cool apps and websites. And yeah, SEO really does help in that regard. Okay, for a minute, just pretend that you were in construction and a company hires you to build them a store, and you do it.

You build them a beautiful store, the store that they asked for, it’s wonderful, and then you put it in a desert where no roads or sidewalks or anything lead to that store. You would know that that’s not what the company wanted, but you’re doing the same thing. If you build a site that is good, it looks really nice, it’s pretty, but it doesn’t have any good technical SEO. You’re doing the same thing.

I’m Bulbul, today we are talking about technical SEO, and I’ll cover everything you need to know to improve your site’s SEO. Now, there are two halves to the SEO equation, content and technical. Content SEO deals with creating high-quality content, optimizing titles and descriptions, and this is typically handled by writers or content teams.

Then there’s technical SEO. That’s all about optimizing your website structure and page speed, and you, the developer, need to take care of this. I put things into three main categories of technical SEO. I’m going to touch on user experience, metadata, and all those admin tasks that you’ve got to do just to maintain your website, especially for technical SEO.

User Experience (UX)

First big category is user experience, user experience, or as the kids call it, UX. You might be surprised to hear that Google actually cares quite a bit about user experience. You might think it’s a search engine, what does it care about users using it? But Google actually wants to give users the best site possible, so if your site takes forever to load, shifts around a whole bunch when it’s coming in, and it’s just a poor experience for your users, they’re not going to recommend your page.

1. Core Web Vitals

So here are eight things you can do to improve your user experience that will also improve your technical SEO. First up, core web vitals. These are three metrics that Google uses to see just how good the user experience is going to be on your website.

Largest Contentful Paint (LCP) 

This measures the amount of time it takes for the largest content element, like a hero image or a heading, to become visible. This is essentially when a page looks like it’s done loading.

First Input Delay (FID)

This is the amount of time until the page is interactive. So if a user clicks on a button while your page is first loading, this measures how much time it takes until that button actually does something.

Cumulative Layout Shift (CLS)

This measures how much the page shifts around as it loads. There is nothing worse than trying to click something, then the page loads and it shifts around, and you click something entirely different. This is very frustrating for users and is why Google measures it as part of the user experience.

Google takes these three core web vitals into account when it is ranking pages, so we need to make sure that we are making really good scores on all three of these. A lot of the things we cover in this section will affect these core web vitals.

2. Optimize Your Images

Next up, we need to optimize our images. Images will probably be the largest files you send to your client, and big files can slow down your page speed, so huge images that aren’t compressed or optimized are going to wreck your largest contentful paint score.

Make sure your images are responsive for their screen size. You should be sending small images to mobile devices and bigger images to desktop screens. You should also be using the most modern format that the user’s browser can handle. Formats like AVIF and WebP are so much smaller and still look great compared to JPEG and PNG alternatives.

By using source sets with your images, you can handle different formats and sizes. You should always, always, always lazy load off-screen images. If your user might not see that image, don’t load it, especially not right at the beginning when your page is first loading in. Defer that load to later and you’ll have a much faster initial page load.

This next one is huge for cumulative layout shift. Make sure you’re setting height and width on your images. If you don’t set it, your content’s going to shift around because the browser doesn’t know how big that image is until it loads it in and then it finds out and then stuff pops all over the place.

That sounds like a lot of work to do for each image though, and you’re not the one that’s going to be uploading images for all time, right? You’re going to have editors and content teams coming in to upload images. So how do you accomplish all this? Well, there’s a few ways. One, your page builder or CMS might have a feature.

Here at Prismic, we have a built-in image CDN. So anything that an editor uploads will automatically be processed and optimized in the way that you set it up in the code. Similarly, you can use image CDNs like ImageX or Cloudinary and do similar things by setting parameters in the code to change those images as they are displayed on the site.

These image CDNs can handle the resizing of images. They can handle serving up AVIF to browsers that can handle it and then falling back to older standards of images for other browsers. They’re wonderful, wonderful tools, but you’ve also got frameworks like Next and Nuxt, which have image tools built-in now. But no matter which of these tools you choose to use, the bottom line is no editor, no content team should ever be able to ship a huge uncompressed JPEG to your homepage.

It is on you, the developer, to make sure that images are being processed. So make sure you’re using some kind of a tool, some way of letting them, the editors, the content team, upload whatever they’re trying to upload, and then you are filtering it or optimizing it and then giving the viewer passing to the browser an optimized performant image. That’s on us, the developers. We have a lot of tools up our sleeves now. Make sure we’re doing it.

3. Work on Your Accessibility

Many accessibility practices also actually benefit SEO. Think about it. People who are using screen readers are using a device to understand that page better. If you help that device understand the page better by using things like alt text and other things that we’ll touch on, you also tell Google what that page is about. By helping devices understand the content of the page, you’re helping everyone. So one accessibility must-have is alt text on images. It helps three groups of people understand:

• Visitors with low vision
• Visitors who encountered an error when that image loaded
• Search robots like Google

Dog with eyebrows image, dog in a blue hoodie image, unlabeled image. You are currently on an unlabeled image. Without that alt text, those three groups are left wondering if that image added anything to the content.

Another best practice that helps with both accessibility and SEO is using proper heading structure. This means you’re organizing your content and using H1 elements for the topic, H2 elements for subtopics, and so on. In fact, you should be using semantic HTML elements all over your site. Headings are great, but so are lists and nav elements and article elements and asides.

Really, this benefits everyone and helps everyone understand your content better. Use semantic HTML.

4. Mobile Responsiveness

Honestly, you and I both know this is a must-have, right? Like we get this. Around 60% of visitors are coming in on a mobile device. Pages are ranking higher if they’re mobile-friendly because Google, of course, is going to show those pages more frequently than sites that are not mobile-friendly. Because once again, a lot of folks are using mobile devices these days.

My friend Kevin Powell says that websites are responsive by default. They ship out of the box as responsive, so they’re only not responsive when we break them. So you can do this. I believe in you. Make your site responsive. Also part of being mobile-friendly is having a proper viewport meta tag and also a readable font size on all devices. Don’t make it so that when the screen gets small, so does your font and we’ve got to check it out. Don’t do that. Make it fake. Make it nice.

5. Reduce JavaScript

I know it hurts to hear. I know we want to throw JavaScript at everything, but the more that we send, the worse our first input delay score is going to be. It’s going to take longer for all that JavaScript to process and for anything to actually happen on our page.

So part of that is checking your bundle, seeing how big that bundle coming from Next or Nuxt or whatever framework you’re using is. Can you drop any of those packages? Can you tidy them up somehow? Beyond your framework, make sure that you are reducing trackers that can slow down your site. Every single tracker that you put in hurts your page speed and hurts that first time to interactive, right?

If you’re adding the Bing pixel and the Facebook pixel and the MySpace pixel and the TikTok pixel, if you’re adding all of that stuff, that is a lot of JavaScript that you’re adding on top and it’s going to really, really hurt your page speed. It really hurt your user experience and Google is going to dock you for it. So you need to make sure you find a balance between having every tracker in the world and having a really speedy site that Google is going to rank well on search pages.

6. Do Not Require JavaScript to Load Content

Do not require JavaScript to actually load in the content of your page. The page should load and display the content, whether or not JavaScript is there or not. And then with that, of course, don’t send a blank document that then uses JavaScript to populate it with content, right?

These are all practices that make your page slower and harder to use and hurt your core web vitals and ultimately your SEO. So that’s a lot to look at for user experience, but it’s definitely doable. I believe in you.

7. Clean URL Structure

Make sure your URLs are short, descriptive, and keyword-rich. This helps search engines understand what the page is about and provides users with a clear idea of the content they’re about to access. A clean URL is not only more user-friendly but also more likely to rank higher.

Metadata

Next up is our metadata section. These next five tips focus on all the metadata you need to take care of to make sure your site is properly indexed and ranked.

8. Optimize Title and Description

First off, you need to use unique titles and meta descriptions for each page. Make sure you’re helping Google understand exactly what is on each page by using unique, descriptive titles and meta descriptions. This will also help when your page shows up in search results because the user will know exactly what they’re clicking on and be more likely to click on it.

9. XML Sitemaps

Create an XML sitemap. This helps Google understand the structure of your site. If you have a lot of pages, this is especially important. Your sitemap should be up-to-date and include all the important pages of your site. Tools like Yoast SEO for WordPress or the XML Sitemap Generator can help you create and maintain your sitemap.

10. Structured Data

Use structured data to provide Google with detailed information about your content. This can help Google understand and index your content better. There are many different types of structured data you can use, depending on the content of your page. For example, you can use structured data to mark up articles, products, events, and more. Check out schema.org for specific categories and formats.

Structured data can also help your content appear in rich snippets in search results, which can increase your click-through rate.

11. Canonical Tags

Use canonical tags to indicate the preferred version of duplicate content. This can help prevent penalties for duplicate content and ensure that Google knows which version of the content to index and rank.

For example, if you have multiple URLs that point to the same content (like a blog post that appears in different categories), you should use a canonical tag to indicate the preferred version.

12. Open Graph Meta Tags

While not directly impacting SEO, Open Graph tags can help your content look appealing on social platforms, which can lead to more clicks and backlinks, indirectly boosting your SEO. Open Graph tags can control how your content appears when shared on platforms like Facebook and Twitter, ensuring that the title, description, and image are displayed correctly.

Admin Tasks

The last section covers all those admin tasks you’ve got to do just to maintain your website and make sure it’s properly optimized for SEO.

13. SSL Certificates (HTTPS)

Ensure your site uses HTTPS for security. Google gives a boost to secure sites, and users are more likely to trust and engage with your content if it’s served securely. You can get a free SSL certificate from Let’s Encrypt or other providers.

14. Manage Redirects

Properly manage redirects to avoid broken links, which can hurt your SEO. Use 301 redirects for permanent changes and 302 redirects for temporary changes. Tools like Redirect Path can help you manage and monitor redirects.

15. Useful 404 Page

Have a functional 404 page with search functionality to help users find the content they were looking for. A good 404 page should provide options for the user to navigate back to the homepage or search for the content they were trying to find.

16. Robots.txt File

Use a robots.txt file to direct Google’s crawler and point to your XML sitemap. This file can help you control which parts of your site are crawled and indexed. Make sure your robots.txt file is up-to-date and does not block important pages from being crawled.

17. Regular Site Audits

Regularly audit your site to ensure everything is optimized. Use tools like Chrome Lighthouse, Google PageSpeed Insights, and other SEO audit tools to check your core web vitals and other SEO factors. Regular audits can help you identify and fix issues before they become bigger problems.

Remember, technical SEO is on you, the developer. It helps Google and your users understand the content better. To improve your technical SEO, optimize user experience, include all relevant metadata, and handle all those administrative tasks. Over time, you’ll see improved search rankings, organic traffic, enhanced user experience, engagement, and increased conversions and business growth.

Thank you so much for reading. If you found this guide helpful, please share it. For more web development content, stay tuned. Take care and see you next article!