My Real-World SEO Checklist for New Websites

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Scrimba Discount - Coding Courses!

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

• Click the link to take you to the Scrimba site
• A pop-up should appear on your screen with the discount amount and instructions on how to claim it
• Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.

Show Notes

Introduction

• I’ve recently launched a client site and as such have done a large amount of SEO preparation and checking before launch
  

SEO Title, SEO Description, and OG Image

• Ensure all pages have an SEO Title, SEO Description, and OG Image
  
  • SEO Title is a <title> tag
    
    • Recommended: 50-60 characters in length
  • SEO Description is a <meta name=”description” content=”This is my description text”>
    
    • Recommended: 150-160 characters in length
    • Some SEO experts prefer a longer description to accommodate Google snippets in search results (180-220 characters), you can pursue this if it’s part of your SEO strategy
  • OG Image is the image that appears when you link is shared on other platforms (if they support OpenGraph), think the cards that X make and the link previews that Facebook creates from text links
    
    • Dimensions: 1200px by 630px and 600px by 315px (Aspect ratio 1.91:1)
    • Size: Compressing your image below 5MB is best practice for fast loading (I personally try to get my image to be well under 1MB)
    • Format: You can use JPEG and PNG (WEBP may not be supported by all platforms, but support is quite good these days)
    • Platform Consideration: If your links are shared on specific platforms a lot, you can take them into consideration - sometimes a platform will support different image sizes and aspect ratios better, and many will actually list specific og meta tags you can add to your HTML to help build things like Twitter/X cards and other things
  • Matt’s Personal Notes:
    
    • If your site has a CMS, I recommend making all three of these into editable and required fields as soon as possible. You and/or your clients will then be forced to fill in these fields properly. As an added bonus, I like to add character limits that align with my SEO strategy (ie Description must be between 155-160 characters)
    • I also personally prefer the larger 1200px by 630px for OG images (sometimes I’ll even use 720p) I find that they look higher quality on the various platforms
    • Always keep in mind that Google can and will change SEO titles and descriptions if they feel that they have better ones available - blatant keyword stuffing, or adding additional keywords that don’t appear on the page itself contribute to this greatly so keep and eye out for it
  • Mike's Personal Notes
    
    • Automatic OG image generation can be a huge PAIN
    • Should be created on first hit but cached and used on every next hit (made this mistake before)
    • Polypane was a great tool for testing OG images and how they will appear on every platform [Link to Killian Polypane episode: https://dev.to/mikehtmlallthethings/creating-a-browser-for-developers-polypane-podcast-3435]
    • Open graph image caching on each platform can be annoying as if you set a wrong one, the old image may show up for a while after a new one is set

Performance

• Super heavy pages (slow load time wise) can cause people to think a page isn’t working (long load time) and then skip visiting the site. This contributes to lost traffic, lost backlinks (nobody wants to link to a super slow page), it can also fall below competitors that have faster loading pages on SERPs.
• Asset Sizes (usually images and videos) are the number one killer of page load times in my experience
  
  • People don’t use efficient formats like WEBP and AVIF
  • Assets aren’t compressed
  • Uploaders will often not resize an image, letting the browser take a huge 1080p for a spot that’s 300px wide (wasting space)
• Matt’s Personal Notes
  
  • Page performance SEO penalty isn’t as dramatic as some might think. Some SEO experts think that having an absolutely perfect PageSpeed score will solve a lot of SEO problems and in my experience that’s just simply not the case. However, very slow load times should be fixed as they will suffer SEO penalties because it’s almost like they’re “broken” in a way
  • When it comes to images, forcing users to upload images of certain parameters inside a CMS can help prevent mistakes
  • On larger sites I won’t check each individual image, I will just go after the biggest offenders (ie 4k image (18MB)  being used for a small 300px wide area) to get the pages to an acceptable load time - I won’t delay a site launch or stop a launch if the pages aren’t as efficient as possible (I believe this is a waste of time)

Link Structure

• If you’re replacing an old site, ensure the URLs of important pages are preserved to maintain link equity
• Have URL structure that makes sense (ie /blog/blog-post-title) don’t have all the blog posts scattered all over the place, or URLs that are non-descriptive (/a20shdfasdf)
• Choose which version you want as the default (www or non-www)
• If you use subdomains, use them in a consistent way (ie each subdomain is a different web app under the same brand, don’t just have subdomains for random things and individual pages for others, keep it consistent)
• Matt’s Personal Notes
  
  • I’m a firm believer in obvious and consistent link structure (ie Google knows what a blog is so htmlallthehtings.com/blog makes sense)
• Mike's Personal Notes
  
  • Redirects that don’t ruin link equity 
    
    • 301 for permanent and immediate preservation of link equity
    • 302 if you’re redirecting for a particular temporary reason (event is happening that you want people to be taken to)

Content

• Ensure heading structure h1-h6
• Check for articles that are too short and may be seen as clickbait (won’t rank)
• Matt’s Personal Notes
  
  • Make it easy for your clients to edit and add content
    
    • Many clients don’t even want to really make content, they want to focus on their main business activities, by making it easy the barrier to entry is lowered
  • Create digestible SEO plans for your clients
    
    • Instead of saying “okay we need 100 blog posts” try breaking things into phases “We need 10 blog posts over the next few months”

Nitpicks

• Sitemap
  
  • Ensure the appropriate pages are allowed/disallowed
• Analytics
  
  • This is very subjective thing and so the tools vary (some people want in-depth information, others just want pageviews)
• Global canonical tag
  
  • Use this to define a clearcut link that should be used and indexed by search engines (commonly the www or non-www version)
  • Ensure your global canonical tag 
• Icons
  
  • Favicon
  • Icons for saving your site to home screens or as an app (PWA)
• Matt’s Personal Notes
  
  • Even though global canonicals can help with this, I like to get my customers on the same page when sharing either the www or non-www version
• Mike's Personal Notes
  
  • HTTPS 
    
    • Sometime images come with http but that can flag some SEO tools so just changing them to https will save some headaches down the line