JS SEO

JavaScript Frameworks & SEO What, Why and How v Modern

@JecelynYeen Software Architect Google Developer Expert - Angular - Web
Technologies Director - NG-MY 2019 - Women Who Code KL

- What is SEO? - How does Googlebot works? -
Technical SEO for modern frameworks - Best Practices - Resources

4 What is SEO?

- Content - Strategy - Technical SEO

SEO without Content & Strategy =

7 How does Googlebot works?

How a page get into Google Search?

Crawl Queue Crawler Processing Index

Wait….What about them?

Some crawlers might not run JavaScript...

Googlebot run JavaScript

Crawl Queue Crawler Index Processing Render Queue Renderer

Sometimes it can take up to a week before the
render is complete

Over 130 trillions documents on the web Data from July
2016

Googlebot is now evergreen (announced in May 2019) goo.gle/evergreen-googlebot

Crawl Queue Crawler Index Processing Render Queue Renderer Ranking

- Crawling - Rendering - Indexing

20 Technical SEO for JS Frameworks

Helping Googlebot - Links your pages to each other -
Googlebot doesn’t click on stuffs, use links! - Do not use hash URLs (/#products) - Exclude low quality / thin content - Create a sitemap

Use proper title & meta tags

<title>NG-MY 2019: July 06-07</title> <meta name="description" content="NG-MY 2019. Angular Malaysia
conference. First in Southeast Asia."> Title tag & Meta tags are essential for SEO

- Angular Title & Meta Service (built in) angular.io/api/platform-browser/Meta -
Vue (3rd party) github.com/declandewet/vue-meta - React (3rd party) github.com/nfl/react-helmet

export class SpeakerPageComponent { } Example: Angular Set page title
Update meta tag Inject title & meta services constructor(private title: Title, private meta: Meta) {} ngOnInit() { this.title.setTitle(‘title’); this.meta.updateTag({ name: 'description', content: ‘desc…’ }); this.meta.updateTag({ name: 'twitter:image', content: ‘imgurl’ }); ... }

ngOnInit() { this.meta.updateTag({ name: 'robots', content: ‘noindex’ }); ... }
export class HiddenPageComponent { } Exclude content from Index Set page title Inject title & meta services constructor(private title: Title, private meta: Meta) {}

Duplicated Content - /speakers/jecelyn - /speakers/Jecelyn - /speakers/8 - /speakers?id=8
Which one to show in search result?

Set canonical url for duplicate content <link rel="canonical" href="your_url">

Use robots.txt to prevent crawling User-agent: Googlebot Disallow: /private Everything
under /private will not be crawled. *will not crawl, but might be indexed

Use with caution!

/api/speakers blocked in robots.txt

Rich result - Make your website shine!

Structured Data schema.org <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article",
"headline": "Cook Weisswurst", "name": "How to Cook Weisswurst", "image": { "@type": "ImageObject", "url": "https://www.wikihow.com/images/...jpg", ... }, ... } </script>

Test with search.google.com/test/rich-results

Find out more developers.google.com/search/docs/gui des/search-gallery

Mobile page speed matters to SEO Page Ranking https://webmasters.googleblog.com/2018/01/usi ng-page-speed-in-mobile-search.html

Server Side Rendering (SSR)

➔ Angular -> Angular Universal ➔ React -> Next.js ➔
Vue -> Nuxt.js

Dynamic Rendering https://developers.google.com/search/docs/guides/dynamic-rendering

Switching between client side rendered and pre-rendered content for specific
user agents

User Browser Web Server HTML + JS for client side
rendering (Not a bot) Request with browser user agent

Googlebot Crawler Web Server HTML + JS for client side
rendering Dynamic render Complete static html (I am a bot) Request with Googlebot user agent

Dynamic Rendering - It is a workaround! - Tools -
github.com/GoogleChrome/puppeteer - github.com/GoogleChrome/rendertron - prerender.io/ - Codelabs: goo.gle/rendertron-codelab

Static Rendering

Static rendering happens at build-time at build time to produce
static files. Get meaningful content onto the user's screen faster

Static Prerendering cli build --prod Generate files to dist/ Open
browser Browse & Save each route as .html Deploy all files to server Generate static html pages = Prerendering Local serve dist/

Static Prerendering cli build --prod Generate files to dist/ Program
Puppeteer Browse & Save each route as .html Deploy all files to server Automate with Puppeteer Local serve dist/

Puppeteer - Programmable Chrome Browser const puppeteer = require('puppeteer'); (async
() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); })(); const fs = require('fs').promises; await fs.writeFile('food.html', html, 'utf-8'); await browser.close(); await page.goto('https://ng-my.org/food', { waitUntil: 'networkidle2'}); const html = await page.content();

Static Prerendering cli build --prod Generate files to dist/ Program
Puppeteer Browse & Save each route as .html Deploy all files to server Find an even easier library to help us! Local serve dist/

Static Rendering Solution - Webpack - npmjs.com/package/prerender-spa-plugin - github.com/GoogleChromeLabs/prerender-loader -
General - github.com/chybie/prerender-xs

Prerendering // prerender-run.js const { prerenderer } = require('prerender-xs'); const
path = require('path'); const minimalConfig = { routes: ['/', '/route1', '/route2/b'], // all the routes staticDir: path.join(__dirname, '/dist'), // where your SPA located } const data = await prerenderer(minimalConfig); // node prerender-run.js

SSR / Dynamic (puppeteer, rendertron) Static (prerender-spa-plugin) - Rapid changing
content that always change (e.g. news) - Require a server - Dynamic Rendering is a workaround - SSR increase complexity* - Predictable content (e.g. company site, event site) - Can host in cloud storage (S3, Firebase hosting)

Video series: goo.gle/js-seo-videos

You don’t need SEO if your pages are behind login

59 What else can go wrong? (Best Practices)

Oops, errors!

Handle errors properly.

Redirect to 404 fetch('/api/speakers/jane-doe') .then(res => res.json) .then(speaker => {
if (!speaker.exists) window.location.href = '/404'; });

No index when result not found fetch('/api/speakers/jane-doe') .then(res => res.json)
.then(speaker => { if (!speaker.exists) this.meta.updateTag({ name: 'robots', content: 'noindex' }); });

Googlebot is stateless…

Which means… No Service Workers local storage, session storage, IndexedDB,
Web SQL, Cookies or Cache API

Page B won’t be indexed // script on page A
userAgreesGDPRbutton.addEventListener('click', () => { writeCookies('gdpr_agreed', true); }); // script on page B if (!readCookies('gdpr_agreed') { window.location.href='/page-a'; }

Googlebot does not click on stuffs

Which means… Expect Googlebot to decline user permission requests. Handle
feature detection fallback.

Handle feature detection if ('geolocation' in navigator) { // load
content once we get location info navigator.geolocation.getCurrentPosition(loadContent); } else { // load fallback content } Uh oh, feature supported but rejected

Handle feature detection if ('geolocation' in navigator) { // load
content once we get location info navigator.geolocation.getCurrentPosition( loadLocalContent, loadFallbackContent); } else { // load fallback content } Load fallback content

Fix Search-related JavaScript problems goo.gle/search-js-troubleshooter

73 Tools & Resources

- cards-dev.twitter.com/validator - developers.facebook.com/tools/debug/sharing - search.google.com/test/mobile-friendly Useful validators

Mobile friendly test - Screenshot - Loading issues - Rendered
HTML https://search.google.com/test/mobile-friendly

https://search.google.com/test/mobile-friendly

https://search.google.com/search-console/about

https://developers.google.com/web/tools/lighthouse

SEO Audits - HTTP header responses - Correct meta tags,
hreflang & descriptive link text - Tap targets sizing - Checking robots.txt - Coming soon: Structured data

Useful resources & references - Headless Chrome: an answer to
server-side rendering JS sites (link) - Prerendering explained (link) - Get started with dynamic rendering (link) - Google search resources (link) - Rendering on the web (link) - Javascript SEO video series (link) - Technical SEO demystified (link) Office-hours hangouts with the webmaster teams - https://www.google.com/webmasters/connect/

Thank you! Follow @JecelynYeen slides: speakerdeck.com/chybie/js-seo Instagram me! @ngmykia

JS SEO

JS SEO

More Decks by Jecelyn Yeen

Other Decks in Programming

Featured

Transcript