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

Stuart_Tofts_LH_brightonSEO_Headless_Web_Build_...

 Stuart_Tofts_LH_brightonSEO_Headless_Web_Build_sm.pdf

Stuart Tofts - Lemon Hive

September 17, 2023
Tweet

More Decks by Stuart Tofts - Lemon Hive

Other Decks in Marketing & SEO

Transcript

  1. What we Found From, the advantages, and Why brightonSEO.com migrated

    to headless​ Stuart Tofts Lemon Hive linkedin.com/in/stuarttofts/
  2. Monolithic vs headless architecture content database api code + front-end

    templated web server GraphQL or Rest API Headless architecture CMS front-end Clients content web server database database code + plugins front-end templated + css CMS Client Monolith
  3. What is headless? A headless architecture decouples the CMS from

    the presentation layer. This frees each to be the very best at its thing, so the CMS is free to focus on content and content management, and the front-end on presenting that content and enhancing user experience. headless CMS API presentation layer admin AI commerce personalization analytics
  4. Who is headless right for? Headless isn’t right for everything

    but we’re seeing improvements for advanced integration requirements, including ERP, CRM, and other third-party services
  5. Who is headless right for? Headless isn’t right for everything

    but we’re seeing improvements for complex web management situations - continual evolution, multiple editors, entities, reusable modules
  6. Who is headless right for? Headless isn’t right for everything

    but we’re seeing improvements for centralized and complex content management for various front- ends, whether web, mobile or others
  7. Who is headless right for? Headless isn’t right for everything

    but we’re seeing improvements for businesses operating in competitive markets where exceptional user experience really matters
  8. Who is headless right for? Headless isn’t right for everything

    but we’re seeing improvements for when monolithic CMSes become limiting in terms of scalability and adaptability
  9. Build with monolithic WordPress The site was getting old​ Plugins,

    plugins & more plugins! (50+) Restricting growth​ Laborious and inefficient site management limited capacity for growth The previous site​
  10. Navigating the website was difficult for users.​ Unintuitive site navigation

    Unintuitive site navigation It's hard to understand where this is navigating to It's hard to understand where this is navigating to
  11. The most vital content lacked structure, was cluttered and was

    challenging to find. ​ This Approach Doesn't Effectively Serve the Content's Purpose This Approach Doesn't Effectively Serve the Content's Purpose
  12. Inconsistency of fonts and design patterns.​ Section sizing negatively impacted

    the user experience.​ Inconsistent use of font Inconsistent use of font Multiple fonts cluttered in a single webpage.​ Text is difficult to read Text is difficult to read
  13. Use of 50+ 3rd party plugins, custom scripts & bloated

    code resulted in performance issues for the site. Previous site performance​ Code bloat:
  14. SEO difficulties: Previous site performance​ Absence of meta tags on

    pages More than 100 internal redirects Absence of image alt tags Abundance of unused javascript Sluggish page load time
  15. Plugin overload Juggling a multitude of plugins for a single

    task introduced complexity and operational challenges. Challenging site management​
  16. Challenging site management​ Redundant content management: Managing content from one

    event to the next was both repetitive and time-consuming.​ It's hard to understand where it's navigating. It's hard to understand where it's navigating.
  17. Media content limitations Lack of media content reusability and image

    optimization capabilities hindered performance & efficiency. ​ Challenging site management​
  18. Why headless stats​ According to an article by Storyblok​ 83%

    reported a general improvement of companies reported that switching to a headless CMS improved time, budget, productivity, meeting their KPIs, and revenue/growth.
  19. Why headless stats​ According to an article by Gitnux -

    link 25% faster switching Headless commerce platforms enable businesses to switch technologies 25% faster than their traditional counterparts.
  20. Why headless stats​ According to an article by Gitnux​ 60%

    of major retailers switching 60% of major retailers in North America are predicted to adopt a headless platform by 2025.​
  21. Why headless stats​ According to an article by Gitnux​ 24%

    more conversions Companies utilizing headless commerce see an average 24% increase in revenue.
  22. Content treated as data Better content editing experience Multiple Workspaces

    Superior developer experience Sanity, headless CMS​
  23. brightonseo.com brightonseo.com Superior developer experience Flexible and dynamic rendering options

    Clean and mature documentation Great potential for improved visibility in Search Engines Next.js, website front-end​
  24. Vercel – hosting (Next.js) ​ Fast and smooth deployment User-friendly

    interface Easy integration with the backend CMS Real-time collaboration and preview features Cool future friendly features (edge functions, analytics, AI integrations)
  25. Streamlined event handling. Various entity types exist and we've established

    an efficient structure for managing these directly from Sanity Studio. Content is treated as data​ ​
  26. Events, people, speakers, sessions, talks, and more are now organized

    as structured data in the backend. This improves content management, efficiency and content integrity Nested data organization​ ​
  27. The entity approach ensures content integrity and eradicates redundancy. ​

    Structured data for content integrity Speaker Session Talks Sponsors Event
  28. Efficiency improvements Auto generate talk list page Auto generate people

    list page Auto generate talk detail page Auto generate people detail page Create entities in sanity
  29. Flexibility through UI​ Developers empowered to create better performing front-ends

    improving user experience, structure, site speed and tech SEO. Speaker Session Talks Event Sponsors Speaker Activities Talks Track Sponsors
  30. Streamlined SEO Management​ All essential SEO aspects are manageable with

    ease through the CMS. Along side this we customised SEO factors for brightonSEO as required.​ All of these areas are configurable All of these areas are configurable Implement SEO rules or tool tips for effective optimization strategy in content management. Implement SEO rules or tool tips for effective optimization strategy in content management. SEO becomes more strategic, and more powerful SEO becomes more strategic, and more powerful
  31. Auto image optimisation Optimisation from Sanity Sanity allows setting image

    hotspots, ensuring optimal rendering across diverse devices.​ Hotspot selected Hotspot selected Cropping option Cropping option Using a single image for diverse front-end renderings.
  32. Auto image alt tags Alt tags can be autogenerated through

    Next.js & Sanity Auto generated alt tag Auto generated alt tag Improved accessibility
  33. What we found PageSpeed and other CWV factors are essential,

    but use them from a UX point of view, not just a number
  34. What we found Developer experience matters - and it’s more

    fun when you can actually achieve things with the freedom of headless
  35. What we found The technology is moving quickly. Next.js 13.4

    (e.g. live front-end editing), Sanity v3, and more
  36. What we found Now’s a good time to start looking

    into headless, and how it can help
  37. Kelvin Newman - brightonSEO​ “We'd outgrown our WordPress setup as

    our events have grown and become more complex. Moving to a modern, future-proof headless solution using Sanity and Next.js has facilitated our growth, which includes rapidly launching a website for our first US conference. 

 We have exciting plans for future development, which includes integrating more features such as additional schema markup, allowing attendees to build personalised schedules and automating some of our processes.”
  38. Where to find us www.lemonhive.com​ We also have a stand

    this year #22 22 5x3 22 5x3 4 6x4 7 Cafe 43 21 21 41 42 39 35 34 37 38 33 55 16 24 14 20 19 17 18 5X3 40 6
  39. Kelvin Newman - brightonSEO​ “We'd outgrown our WordPress setup as

    our events have grown and become more complex. Moving to a modern, future-proof headless solution using Sanity and Next.js has facilitated our growth, which includes rapidly launching a website for our first US conference. 

 We have exciting plans for future development, which includes integrating more features such as additional schema markup, allowing attendees to build personalised schedules and automating some of our processes.”