User First SEO: A Non-contentious Guide to Building Pages Users Will Find and Love

A presentation at Denver Startup Week in September 2020 in by Marlena Baker

Slide 1

Slide 1

SEP 14-18, 2020 DenverStartupWeek.org #DENStartupWeek 2020 TITLE SPONSORS

Slide 2

Slide 2

DIVERSITY, EQUITY, INCLUSION & ACCESSIBILITY At Denver Startup Week we strive to make all of our sessions a space where attendees can connect, learn, and grow — regardless of gender identity, gender expression, race, ability, sexual orientation, and the combination of those identities. As you leave today and throughout the week, introduce yourself to someone who doesn’t look like you or who may identify differently than you. #DENStartupWeek

Slide 3

Slide 3

User First SEO: A Non-contentious Guide to Building Pages Users Will Find and Love Annie Wolff Marlena Baker 09/17/2020

Slide 4

Slide 4

Marlena Baker - Software Engineer at Quizlet since 2019 - Passionate about accessible, equitable, quality education - Co-organizer of the Denver Vue.js meetup - Member of Dvlp Dnvr’s Education and Content team #DENStartupWeek

Slide 5

Slide 5

Annie Wolff - Senior Software Engineer @ Quizlet since June 2019 - A recent convert to the awesome nerdiness of technical SEO - Middle School Chapter Leader with STEMBlazers - Mentor and member of the mentor committee at Turing School #DENStartupWeek

Slide 6

Slide 6

Identifying the Problem Building Usable Pages Choosing the Right Technologies Delivering your Content Quickly Making your Content Discoverable Taking the Next Steps #DENStartupWeek

Slide 7

Slide 7

Identifying the Problem Building Usable Pages Choosing the Right Technologies Delivering your Content Quickly Making your Content Discoverable Taking the Next Steps #DENStartupWeek

Slide 8

Slide 8

You may have the most amazing content that is incredibly relevant to millions of searchers, but if Google can’t find it or understand it, users won’t be able to either. #DENStartupWeek

Slide 9

Slide 9

As a developer, you can rely on your knowledge of user experience to improve SEO. #DENStartupWeek

Slide 10

Slide 10

Identifying the Problem Building Usable Pages Choosing the Right Technologies Delivering your Content Quickly Making your Content Discoverable Taking the Next Steps #DENStartupWeek

Slide 11

Slide 11

How Googlebot explores the web Your Page’s URL Crawl Queue Index URLs Processing URL Linking HTML URL Content Crawler Render Queue #DENStartupWeek Rendered HTML Renderer URL

Slide 12

Slide 12

Helping Programs Read Your Page #DENStartupWeek

Slide 13

Slide 13

Semantic HTML

<HEADER /> <DIV /> <DIV /> <NAV /> <A />/> <SPAN <DIV />/> <MAIN TITLE <ARTICLE /> <DIV /> <P /> /> <SPAN <DIV /> /> <FOOTER #DENStartupWeek <H1 <SPAN /> />

Slide 14

Slide 14

Semantic HTML <a aria-label=”Quiz 12” href=”https://quizlet.com/292548967/quiz-12-flash-cards/” title=”Quiz 12” > <h4>Mktg research FINAL quiz 12</h4> </a> #DENStartupWeek

Slide 15

Slide 15

Easy Access to Main Content Pop up advertisements Interstitials Image source: https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html #DENStartupWeek

Slide 16

Slide 16

Validation W3C Markup Validation Service https://validator.w3.org/ #DENStartupWeek

Slide 17

Slide 17

Lighthouse Best Practices Audit SEO Audit https://developers.google.com/web/tools/lighthouse #DENStartupWeek

Slide 18

Slide 18

Identifying the Problem Building Usable Pages Choosing the Right Technologies Delivering your Content Quickly Making your Content Discoverable Taking the Next Steps #DENStartupWeek

Slide 19

Slide 19

The Big “JS” Question Does the use of a JS framework like React or Vue negatively impact SEO? #DENStartupWeek

Slide 20

Slide 20

But… Server Side Rendering is Still Safest Whenever possible, it is better to return as much rendered HTML as possible on the first response from the server. #DENStartupWeek

Slide 21

Slide 21

How Can you Know What you Page Looks Like to Crawlers? Have you ever tested your product against different browsers and found that something wasn’t working the way that you thought? Testing for Googlebot is just same! https://developers.google.com/search/docs/guides/javascript-seo-basics #DENStartupWeek

Slide 22

Slide 22

Mobile First Indexing Because so much of today’s web browsing happens on phones, Google has moved to primarily use the mobile version of sites for indexing and ranking. https://developers.google.com/search/mobile-sites/mobile-first-indexing #DENStartupWeek

Slide 23

Slide 23

Tools to use Mobile Friendliness Tool https://search.google.com/test/mobile-friendly #DENStartupWeek

Slide 24

Slide 24

Tools to use Google Search Console URL Inspection Tool https://www.searchenginejournal.com/automate-url-inspection-tool-python-javascript/301639/ #DENStartupWeek

Slide 25

Slide 25

Identifying the Problem Building Usable Pages Choosing the Right Technologies Delivering your Content Quickly Making your Content Discoverable Taking the Next Steps #DENStartupWeek

Slide 26

Slide 26

Google cares about Performance “Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.” Source :https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html #DENStartupWeek

Slide 27

Slide 27

Core Web Vitals: Largest Contentful Paint Read More… Image Sources: https://web.dev/lcp/ #DENStartupWeek Read More…

Slide 28

Slide 28

Core Web Vitals: First Input Delay Read More… Image Sources: https://web.dev/fid/ #DENStartupWeek Read More…

Slide 29

Slide 29

Core Web Vitals: Cumulative Layout Shift Do you want to continue? Do you want to continue? Confirmed! �� Yes Thank you! No Yes No Image Sources: https://web.dev/cls/ #DENStartupWeek

Slide 30

Slide 30

Lighthouse Performance Audit Image Sources: https://onesoftwaretester.wordpress.com/2018/05/01/running-application-audits-with-lighthouse/ #DENStartupWeek

Slide 31

Slide 31

PageSpeed Image Sources: https://kinsta.com/blog/google-pagespeed-insights/ #DENStartupWeek

Slide 32

Slide 32

Real User Metrics Image Sources: https://docs.datadoghq.com/real_user_monitoring/dashboards/ #DENStartupWeek

Slide 33

Slide 33

Identifying the Problem Building Usable Pages Choosing the Right Technologies Delivering your Content Quickly Making your Content Discoverable Taking the Next Steps #DENStartupWeek

Slide 34

Slide 34

Stepping back to the site level Now that we’ve got great pages, how can we make sure that they are found? #DENStartupWeek

Slide 35

Slide 35

Internal Linking #DENStartupWeek ?

Slide 36

Slide 36

Global Navigation Google uses the frequency and prominence of links to understand their importance. #DENStartupWeek

Slide 37

Slide 37

Information Architecture You can use breadcrumbs and subject pages to indicate the relationships between pages on your site. #DENStartupWeek

Slide 38

Slide 38

XML Sitemaps Image Source: https://searchengineland.com/managing-sitemap-xml-with-google-search-console-311790 #DENStartupWeek

Slide 39

Slide 39

Tools to understand your site’s link structure Google Search Console Internal Linking Report https://searchengineland.com/managing-sitemap-xml-with-google-search-console-311790 #DENStartupWeek

Slide 40

Slide 40

Identifying the Problem Building Usable Pages Choosing the Right Technologies Delivering your Content Quickly Making your Content Discoverable Taking the Next Steps #DENStartupWeek

Slide 41

Slide 41

Build with users in mind Test your technologies Deliver your site quickly Expose the right content #DENStartupWeek

Slide 42

Slide 42

References & Further Reading -https://developers.google.com/search/docs/guides/javascript-seo-basics -https://web.dev/vitals/ -https://moz.com/learn/seo/internal-link -https://web.dev/lighthouse-performance/ -https://web.dev/lighthouse-seo/ -https://developers.google.com/speed/pagespeed/insights/ -https://developer.mozilla.org/en-US/docs/Web/HTML/Element - #DENStartupWeek

Slide 43

Slide 43

Q&A #DENStartupWeek

Slide 44

Slide 44

Thank you! Slides: https://noti.st/marlenabaker/ Quizlet set: https://quizlet.com/520530164/user-first-seo-flash-cards/ annie-wolff #DENStartupWeek marlenabaker