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

2. Where’s Your <HEAD> At? @sophiegibson #WTSFest Where’s Your <head> At?
3. How to optimise the <head> for SEO success Where’s Your <head> At?
4. 1 2 3 How the render process works SEO elements in the <head> Impact on site speed 4 How to optimise the <head>
5. Where’s Your <HEAD> At? @sophiegibson #WTSFest
6. Where’s Your <HEAD> At? @sophiegibson #WTSFest Contains important SEO tags
7. Where’s Your <HEAD> At? @sophiegibson #WTSFest Canonicals <link rel="canonical" href="https://www.myaweso mesite.com">
8. Where’s Your <HEAD> At? @sophiegibson #WTSFest Title Tag <title>My Awesome Website</title>
9. Where’s Your <HEAD> At? @sophiegibson #WTSFest Meta description <meta name="description" content="We are an incredible website">
10. Where’s Your <HEAD> At? @sophiegibson #WTSFest Meta robots <meta name="robots" content="index, follow">
11. Where’s Your <HEAD> At? @sophiegibson #WTSFest hreflang <link rel="alternate" href="https://www.myawes omesite.com" hreflang="en-gb">
12. 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>
13. Where’s Your <HEAD> At? @sophiegibson #WTSFest
14. Where’s Your <HEAD> At? @sophiegibson #WTSFest Google needs to find and read this information
15. Where’s Your <HEAD> At? @sophiegibson #WTSFest
16. Where’s Your <HEAD> At? @sophiegibson #WTSFest ↜ ↜ ↜
17. Where’s Your <HEAD> At? @sophiegibson #WTSFest How the render process works
18. Where’s Your <HEAD> At? @sophiegibson #WTSFest Parse the HTML
19. Where’s Your <HEAD> At? @sophiegibson #WTSFest Fetch External Resources
20. Where’s Your <HEAD> At? @sophiegibson #WTSFest Parse the CSS
21. Where’s Your <HEAD> At? @sophiegibson #WTSFest Execute the Javascript
22. Where’s Your <HEAD> At? @sophiegibson #WTSFest Build the Render Tree
23. Where’s Your <HEAD> At? @sophiegibson #WTSFest Construct Layout & Paint
24. Where’s Your <HEAD> At? @sophiegibson #WTSFest https://debarshiraj.hashnode.dev/ho w-does-your-browser-renders-the-w ebsite-that-you-see-on-screen
25. 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.
26. Where’s Your <HEAD> At? @sophiegibson #WTSFest https://debarshiraj.hashnode.dev/how-does-your-browser-renders-the-website-that-you-see-on-screen
27. Where’s Your <HEAD> At? @sophiegibson #WTSFest
28. 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
29. 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
30. 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
31. Where’s Your <HEAD> At? @sophiegibson #WTSFest
32. 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
33. Where’s Your <HEAD> At? @sophiegibson #WTSFest
34. Where’s Your <HEAD> At? @sophiegibson #WTSFest
35. Where’s Your <HEAD> At? @sophiegibson #WTSFest
36. Where’s Your <HEAD> At? @sophiegibson #WTSFest
37. Where’s Your <HEAD> At? @sophiegibson #WTSFest ❌ ❌
38. Where’s Your <HEAD> At? @sophiegibson #WTSFest
39. Where’s Your <HEAD> At? @sophiegibson #WTSFest Two Tools
40. Where’s Your <HEAD> At? @sophiegibson #WTSFest Dev Tools
41. Where’s Your <HEAD> At? @sophiegibson #WTSFest CAPO Chrome Extension
42. Where’s Your <HEAD> At? @sophiegibson #WTSFest https://chromewebstore.google.com/detail/capo-get-your-%EF%B9%A4%F0%9D%9A%91%F0%9D%9A%8 E%F0%9D%9A%8A%F0%9D%9A%8D%EF%B9%A5/ohabpnaccigjhkkebjofhpmebofgpbeb?pli=1
43. Where’s Your <HEAD> At? @sophiegibson #WTSFest Benchmark
44. Lighthouse
45. Where’s Your <HEAD> At? @sophiegibson #WTSFest
46. Where’s Your <HEAD> At? @sophiegibson #WTSFest
47. Where’s Your <HEAD> At? @sophiegibson #WTSFest Open CAPO
48. Where’s Your <HEAD> At? @sophiegibson #WTSFest
49. Where’s Your <HEAD> At? @sophiegibson #WTSFest
50. Where’s Your <HEAD> At? @sophiegibson #WTSFest Click on ‘Sorted head order’
51. Where’s Your <HEAD> At? @sophiegibson #WTSFest Scroll to bottom of text
52. Where’s Your <HEAD> At? @sophiegibson #WTSFest Right Click > Copy > Copy Element
53. Where’s Your <HEAD> At? @sophiegibson #WTSFest Paste in Code / Text Editor
54. Where’s Your <HEAD> At? @sophiegibson #WTSFest Back to Dev Tools: Inspect > Elements Right Click > Edit as HTML
55. Where’s Your <HEAD> At? @sophiegibson #WTSFest Delete the <head> & replace with our new, sorted <head> content
56. Where’s Your <HEAD> At? @sophiegibson #WTSFest Test, Test, Test
57. Where’s Your <HEAD> At? @sophiegibson #WTSFest Re-Run Lighthouse
58. Where’s Your <HEAD> At? @sophiegibson #WTSFest Before After
59. Where’s Your <HEAD> At? @sophiegibson #WTSFest Mmmm, tasty & quick speed improvements
60. Where’s Your <HEAD> At? @sophiegibson #WTSFest
61. Where’s Your <HEAD> At? @sophiegibson #WTSFest ↜ <head> HIGH PRIORITY 🚨SEO STUFF 🚨
62. → → → Title Tag hreflang Structured data Meta description Canonicals Meta robots → → → 🚨 HIGH PRIORITY 🚨 SEO STUFF
63. “WATCH OUT!” for
64. Single points of Failure (SPoF) occurs when a 3rd party asset is called and there was some problem delivering that asset. thisisoptimal.com
65. This in turn results in a web page not rendering properly – in many cases resulting in blank screen being presented thisisoptimal.com
66. Where’s Your <HEAD> At? @sophiegibson #WTSFest
67. Where’s Your <HEAD> At? @sophiegibson #WTSFest
68. “WATCH OUT!” for
69. Where’s Your <HEAD> At? @sophiegibson #WTSFest INVALID HTML
70. Where’s Your <HEAD> At? @sophiegibson #WTSFest stop here & move on to the <body> This shouldn’t be here?
71. Where’s Your <HEAD> At? @sophiegibson #WTSFest https://validator.w3.org/
72. Where’s Your <HEAD> At? @sophiegibson #WTSFest
73. Where’s Your <HEAD> At? @sophiegibson #WTSFest
74. 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
75. Where’s Your <HEAD> At? @sophiegibson #WTSFest
76. Where’s Your <HEAD> At? @sophiegibson #WTSFest
77. Where’s Your <HEAD> At? @sophiegibson #WTSFest
78. How to conduct a Core Web Vitals audit slideshare.net/sophiegibson3 @sophiegibson Sophie Gibson StudioHawk
79. Where’s Your <HEAD> At? @sophiegibson #WTSFest Getting Buy In
80. Where’s Your <HEAD> At? @sophiegibson #WTSFest % Increase in conversions for every 100ms reduction in Largest Contentful Paint time 1.3
81. 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%
82. 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%
83. Where’s Your <HEAD> At? @sophiegibson #WTSFest £2225 Order increase +25 New conversion rate 0.92% Additional revenue = =
84. Where’s Your <HEAD> At? @sophiegibson #WTSFest SEO’s Stakeholders
85. Where’s Your <HEAD> At? @sophiegibson #WTSFest
86. Talk to me! Sophie Gibson Technical SEO Director @ StudioHawk www.studiohawk.co.uk @sophiegibson @studiohawk bsky.app/profile/sagibson.co.uk sophie@studiohawk.co.uk linkedin.com/in/sophie-a-gibson/ ✉