Javascript Progressive Web Apps: What SEOs Need to Know By Max Prin

#SMX #32A @maxxeight

What SEOs Need To Know

JavaScript & Progressive

Web Apps (PWAs)


What’s a Web App?


Traditional Page Lifecycle Web Application Lifecycle

What’s a Web App?

Initial GET request

POST request

HTML

HTML

Initial GET request

AJAX call

HTML (App shell)

JSON, HTML,

etc.


What’s a Progressive Web App?

Native Apps

Web Apps


Reliable & FastApp shell cached locally (on 1st load)

• Fast loading when offline or with slow connection (on subsequent loads)

Mobile-friendly (responsive)

Secure (HTTPS)


EngagingBookmark (icon) on device’s homepage

Push notifications


WHAT ABOUT ACCESSIBILITY FOR SEARCH ENGINE BOTS?



Native Apps

Web Apps


How Search Engines Typically Work

Render


Issues for all crawlers§ Potentially a unique URL (or non-crawlable URLs)§ A unique HTML document (the “app shell”)

– Same <head> section (title, meta and link tags, etc.)

Issues for crawlers other than Google (and Baidu)§ Client-side rendering of content (HTML source code vs. DOM)

Web Apps (SPAs, PWAs)


§ Crawling– 1 unique “clean” URL per piece of content (and vice-versa)

Making Sure Search Engines Can Understand Your Pages


Crawling: Provide “Clean”/Crawlable URLs

Fragment Identifier: example.com/#url– Not supported. Ignored. URL = example.com

Hashbang: example.com/#!url (pretty URL)– Google and Bing will request:

example.com/?_escaped_fragment_=url (ugly URL)

– The escaped_fragment URL should return an HTML snapshot

Clean URL: example.com/url– Leveraging the pushState function from the History API

– Must return a 200 status code when loaded directly



– onclick + window.location ≠ <a href=”link.html”>





§ Rendering– Don’t block JavaScript resources via robots.txt






– Load content automatically, not based on user interaction (click, mouseover, scroll)



Rendering: Load Content Automatically






– For Bing and other crawlers: HTML snapshots







– For Bing and other crawlers: HTML snapshots

§ Indexing– Avoid duplicate <head> section elements (title, meta description,

etc.)



Main content gets rendered here

Same title, description, canonical tag, etc. for

every URL


Tools


SEO Crawlers Rendering Web Pages

Merkle’s proprietary crawler


LEARN MORE: UPCOMING @SMX EVENTS

THANK YOU! SEE YOU AT THE NEXT #SMX

Javascript Progressive Web Apps: What SEOs Need to Know By Max Prin

Marketing

Transcript of Javascript Progressive Web Apps: What SEOs Need to Know By Max Prin