Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Where's your <head> at?

Sophie Gibson
March 13, 2024
76

Where's your <head> at?

Talk given at Women in Tech SEO Festival on 08/03/2024

How the structure of the can unlock SEO & CRO benefits

Sophie Gibson

March 13, 2024
Tweet

Transcript

  1. 1 2 3 How the render process works SEO elements

    in the <head> Impact on site speed 4 How to optimise the <head>
  2. Where’s Your <HEAD> At? @sophiegibson #WTSFest Structured data <script type="application/ld+json">

    { "@context": "https://schema.org/", "@type": "Recipe", "name": "Party Coffee Cake" } </script>
  3. Where’s Your <HEAD> At? @sophiegibson #WTSFest When the HTML parser

    finds a <script> tag, it pauses to load, parse, and execute the JavaScript code.
  4. Where’s Your <HEAD> At? @sophiegibson #WTSFest Any step which changes

    something in a previous step, the browser needs to go back & repeat those steps to reprocess this new information
  5. 1 2 3 Parse the HTML Fetch External Resources Parse

    the CSS Execute the Javascript Build the Render Tree Construct Layout & Paint 4 5 6
  6. The <head> is the biggest single render-blocking part of a

    page Harry Roberts @csswizard Harry Roberts - Get Your Head Straight https:/ /www.youtube.com/watch?v=MHyAOZ45vnU
  7. 1. <head> 2. <meta charset|http-equiv|viewport|robots> 3. preconnect 4. <script src=""

    async></script> 5. CSS that includes @import 6. Synchronous JS 7. Synchronous CSS 8. preload 9. <script src="" defer></script> 10. prefetch / prerender 11. Everything else (icons, Open Graph, etc.) 12. </head> Optimal <head> order for rendering Harry Roberts @csswizardry
  8. Where’s Your <HEAD> At? @sophiegibson #WTSFest Back to Dev Tools:

    Inspect > Elements Right Click > Edit as HTML
  9. Where’s Your <HEAD> At? @sophiegibson #WTSFest Delete the <head> &

    replace with our new, sorted <head> content
  10. → → → Title Tag hreflang Structured data Meta description

    Canonicals Meta robots → → → 🚨 HIGH PRIORITY 🚨 SEO STUFF
  11. Single points of Failure (SPoF) occurs when a 3rd party

    asset is called and there was some problem delivering that asset. thisisoptimal.com
  12. This in turn results in a web page not rendering

    properly – in many cases resulting in blank screen being presented thisisoptimal.com
  13. Where’s Your <HEAD> At? @sophiegibson #WTSFest stop here & move

    on to the <body> This shouldn’t be here?
  14. 1. <head> 2. <meta charset|http-equiv|viewport|robots> 3. <title><meta desc> 4. <canonical><hreflang>

    5. preconnect 6. <script src="" async></script> 7. CSS that includes @import 8. Synchronous JS 9. Synchronous CSS 10. preload 11. <script src="" defer></script> 12. prefetch / prerender 13. Everything else (icons, Open Graph, etc.) 14. </head> Harry Roberts @csswizardry
  15. Where’s Your <HEAD> At? @sophiegibson #WTSFest % Increase in conversions

    for every 100ms reduction in Largest Contentful Paint time 1.3
  16. Where’s Your <HEAD> At? @sophiegibson #WTSFest Average order value for

    organic traffic £89 Visitors per month from organic traffic 19650 Your current organic conversion rate 0.73%
  17. Where’s Your <HEAD> At? @sophiegibson #WTSFest Average order value for

    organic traffic £89 Visitors per month from organic traffic 19650 2 Second increase = 2000ms = 20 x 1.3% = 23% increase 0.92%
  18. Where’s Your <HEAD> At? @sophiegibson #WTSFest £2225 Order increase +25

    New conversion rate 0.92% Additional revenue = =
  19. Talk to me! Sophie Gibson Technical SEO Director @ StudioHawk

    www.studiohawk.co.uk @sophiegibson @studiohawk bsky.app/profile/sagibson.co.uk [email protected] linkedin.com/in/sophie-a-gibson/ ✉