Technical SEO for Developers | 17 Tips to Rank Higher!

all right don't get me wrong search engine optimization 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 Alex I lead the developer experience team here at prismic and 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 you know maintain your website especially for technical SEO all right 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 why 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 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 the first core web vital is largest contentful paint and that's essentially the amount of time it'll take 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 the next core web vital is first input delay and that's the amount of time until the page is interactive so if a user clicks on a button while your page is first loading this is basically how much time

does it take until that button actually does something and the third core web vital is cumulative layout shift basically how much does the page shift 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 that's what this measures and it is the most grading thing when it happens and so it's very good that Google measures that because it's not a good 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 so next up number two 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 aren't 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 alternates by using Source sets with your images you can handle different formats and sizes you should 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 is 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 um 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 Cloud Nary 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 it 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 nox which have image tools built in now but no matter which of these tools you choose to use bottom line is no editor no content team should ever be able to ship a huge uncompressed JPEG to your home page 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 and optimize perform an image that's on us the developers we have a lot of tools up our sleeves now make sure we're doing it all right we're on to tip number three 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 and 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 it helps everyone understand your content better use semantic HTML all right we've covered some of the accessibility things moving on to number four mobile responsiveness

honestly you and I both know this is a must-have right like we got this around 60 percent of visitors are coming in on a mobile device page 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 gotta we've gotta check it out don't do that make it fake make it nice all right number five reduce JavaScript I know it hurts to hear I know you 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 for and 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 next 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 hurts that first time to interactive right if you're adding the Bing pixel and the

Facebook pixel and the Myspace pixel and The Tick Tock picks if you're adding all of that stuff that is a lot of JavaScript that you're adding on top and it's gonna really really hurt your page speed it really hurt your user experience and Google's gonna 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 all right this one is big do not require JavaScript to actually load in the content

of your page the page should load its content even if I have JavaScript disabled when it comes to SEO statically generating the page or server-side rendering that page is so much safer than rendering it only on the client yes Google's crawler can run JavaScript but what if my buggy JavaScript breaks when Google tries to crawl my page I would rather it break break and still get all my content then break and just have a completely empty contentless page make sure you are pre-rendering your content and then you know sprinkling JavaScript on top all right number

seven when talking about a good user experience that also helps with SEO use a clean nice sensible URL structure clean URL structure that means you're using short descriptive and keyword Rich URLs look at these two URLs here look what I got here green Genie IO g01 or green Gene AIO slash guides slash how to install green Genie which one do you think is more clear to users more clear to Google when it comes to trying to figure out what the content on these pages is don't get cryptic don't get shorthand or whatever make sure you're

using good keyword Rich URLs when you are using your url patterns alright we are into our next and that is talking all about metadata so these next five if you're a big metadata head you're gonna love these all right we're going to start off with something you probably have already but that's a title and description it's kind of the bare minimum when it comes to metadata but at the same time you really need them because they are just what show up when you Google for a page it's the title and the description for these you're

going to use a title element and a meta tag with name description the important part that people get wrong here though is that they have to be unique for every page don't put the same description on every single page same title on every single page make sure these are getting changed up for each and every single page otherwise Google's gonna think it's all the same content or at least it's not going to help you out all right number nine on our full list XML site Maps is kind of what it sounds like it is a

site map that Maps out all the pages of your site and guess what format it's in XML baby you don't need one of these as long as your site's been submitted to Google Google is really good about crawling through links and finding most of the pages of your site but it does help Google understand the structure of your site and it is very very helpful and almost necessary if you have hundreds or thousands of pages it just gives Google a nice list of saying hey these are all the pages I have I would like you

to index all of these please all right number 10 structured data this is a type of metadata that has a specific structure to give Google information about articles products local businesses events reviews recipes and it really helps Google provide Rich details in search results so when you search for things and Google doesn't just kind of give you like a list of links but it gives you more details images all that kind of stuff that is coming from this structured data Google really likes giving those kinds of Rich results so make sure that you are putting

structured data in wherever it makes sense for you you go Alex I don't I don't know how to do that how do I do that no problem go to schema.org find a category for the thing that you have maybe it's a product maybe it's a recipe you're building a site for a recipe site right and you go in there find the exact category that you're looking for and just fill in the information like I said it's structured they'll kind of walk you through it and then all you got to do is add that metadata to

the appropriate pages and Google will be able to understand what you're sharing with it a lot better all right number 11 canonical tags if you have duplicate content across your site canonical tags basically let you tell Google which one is the preferred version so that Google doesn't penalize you for having duplicate content it's also helpful if you've posted blog posts across the internet like on dev2 you can use a canonical tag to tell Google hey the one that's on my site that's the canonical or like the real version all right number 12 open graph meta

tags now you might be saying Alex doesn't directly impact SEO Google doesn't care about open graph stuff that's Facebook and Twitter and slack and yeah I agree with you uh it doesn't actually directly help SEO but it does indirectly help seo let me explain first open graph metadata is the information that tells slack and Facebook and Twitter what image and what description and everything to show when that link is shared on those social platforms so I'm sure we've both had the experience where we share a link and a beautiful image comes up and a rich

description comes up and it looks really appealing and people want to click on it and then we've also shared a link where none of that happened and they just see a URL and that's it people are much more likely to click on the link that has the open graph data which gives it images and description to entice people to click and the more people that click on it on social the more people will see it and the more people that see it the more likely they are to link to it in their own blog post

linked to it on their own sites and that my friend is what we call a backlink and Google really likes backlinks so they are going to bump your site up in the search rankings so once again this is an indirect way of improving your SEO all right we're into the last category we're looking at some admin tasks [Music] we're starting off with number 13 SSL certificates or https you might know this as the little lock in the URL bar or the thing that yells at you in Chrome when a site doesn't have it or their

certificate expired this is incredibly necessary this helps keep your users secure when visiting your website so it's kind of a must-have now Google will give your site a boost if you have one of these but since everyone has one since everyone's using https these days you don't want to be the one person with the one site in the world that doesn't have that and is not getting that boost from Google it's pretty much like you're getting punished if you don't have one you probably do posts like netlify and versl give you one of these pretty

much out of the box if you don't have one check out let's encrypt.org for a free one it's also what netlify uses to give you yours it's a wonderful service make sure you're using https number 14 manage redirects so yes it happens that Pages change Pages move you have a better URL structure and you want to shift page a over to you know URL B make sure you're managing that redirect however you're doing it with your framework and your host and all that stuff you've got to do this because Google doesn't want to send people

to a dead site broken links can absolutely tank your SEO numbers a well-performing blog post that you used to have that you change the url on can absolutely just disappear off the face of Google if you don't manage your redirects in that same vein number 15 have a useful 404 page people like to have 404 pages that are quirky and fun and neat and all that stuff but that's fine but make sure that 404 page is also doing its job and trying to get users to the page that they were at it's not enough just

to go oops you should really make sure that your 404 page has some kind of search functionality or something so that when a user does find it and they shouldn't find it too often they can actually get to the content they were looking for so make sure that if you have that 404 page it's doing something all right number 16 have a robots.txt page honestly every site should have one why because Google wants you to Google recommends it sites should have these robot txt files especially because it is where you show Google where your XML

sitemap is so without it you you know Google can guess where that sitemap is but you want to be specific you want to tell Google exactly where stuff is so have a robots txt file even if you're accepting robots and by robots we mean Google's crawler even if you're accepting those on every single page still have a robots txt that allows Google to search everything or to index everything and point it to your XML site map specifically all right number 17 the final Point site audits this is is how we make sure that everything we've

done all the work we've put into this that it is exactly how it needs to be that we are giving Google Everything at Once to give us a really good high page ranking first and foremost we want to check for our core web vitals those three metrics that Google holds above all the rest and says if you're nailing these three you probably have a good user experience if you run your site through Chrome Lighthouse or Google page speed insights both of those will give you that information and let you know how you're doing on those

three metrics and a whole bunch of other stuff not only will they give you a score but they'll give you specific feedback on the link you bought to some Google docs that will help you to fix up whatever might be low and also a lot of other good tools that test all kinds of things like backlinks and all the metadata on your page and lots of other good stuff personally I use a chrome plugin by Wu rank called SEO analysis and website review that I can link in the description there are also tools that will

help more with the content side but you as the developer should probably at least help set those up let your content team know how to get in there something you should be aware of first and foremost for that is Google search console Paige says that Google search console tools and reports help you measure your site search traffic and performance fix issues and make your site shine in Google search results your content team can submit the site map itself and they can make sure that pages are getting ranked and listed in there it is kind of

like a transparent way of seeing what does Google have indexed and what are they doing about it is there anything that Google doesn't like about certain pages gives you a lot of feedback it's kind of a must have beyond that there are also tools like semrush and ahrefs that I like to use just to make sure I'm getting a kind of robust amount of data all right and with all those tools the key is to scan the site routinely and remember SEO is a moving Target you've got to make sure you're keeping up to date

on all the SEO best practices because what might have you at number one today you might not be there tomorrow just because Google might have changed what it's looking for Google might have changed something about the core web vitals who knows right you need to make sure that you are keeping up to date and then keeping your sites that you're maintaining or that you're working on up to date as well all right we made it that is all the points I have for you but let's just recap real quick remember technical SEO is on you

the developer it helps Google and your users understand the content better in order to get better technical SEO you're going to want to optimize your user experience you want to make sure you include all relevant metadata and handle all those administrative tasks and over time you're going to see improved search rankings and organic traffic and against user experience and engagement and even increase conversions and you know business growth all that good stuff so thank you so much for watching if you found this video helpful please click that like button and if you want more web

development content would love it if you subscribed my name is Alex take care I'll see you next time