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

JS SEO

Jecelyn Yeen
October 22, 2019

JS SEO

Javascript Frameworks & SEO

Jecelyn Yeen

October 22, 2019
Tweet

More Decks by Jecelyn Yeen

Other Decks in Programming

Transcript

  1. JavaScript Frameworks & SEO
    What, Why and How
    v
    Modern

    View Slide

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

    View Slide

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

    View Slide

  4. 4
    What is SEO?

    View Slide

  5. - Content
    - Strategy
    - Technical SEO

    View Slide

  6. SEO
    without
    Content & Strategy
    =

    View Slide

  7. 7
    How does Googlebot works?

    View Slide

  8. How a page get into
    Google Search?

    View Slide

  9. Crawl
    Queue
    Crawler Processing Index

    View Slide

  10. Wait….What about them?

    View Slide







  11. View Slide

  12. Some crawlers might not
    run JavaScript...

    View Slide

  13. Googlebot run JavaScript

    View Slide

  14. Crawl
    Queue
    Crawler Index
    Processing
    Render
    Queue
    Renderer

    View Slide

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

    View Slide

  16. Over 130 trillions documents
    on the web
    Data from July 2016

    View Slide

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

    View Slide

  18. Crawl
    Queue
    Crawler Index
    Processing
    Render
    Queue
    Renderer
    Ranking

    View Slide

  19. - Crawling
    - Rendering
    - Indexing

    View Slide

  20. 20
    Technical SEO for JS Frameworks

    View Slide

  21. 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

    View Slide

  22. Use proper title & meta tags

    View Slide

  23. View Slide

  24. View Slide

  25. NG-MY 2019: July 06-07

    Title tag & Meta tags are
    essential for SEO

    View Slide








  26. Meta tags for social medias

    View Slide

  27. - 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

    View Slide

  28. 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’ });
    ...
    }

    View Slide

  29. 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) {}

    View Slide

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

    View Slide

  31. Set canonical url for
    duplicate content

    View Slide

  32. 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

    View Slide

  33. Use with caution!

    View Slide

  34. /api/speakers
    blocked in
    robots.txt

    View Slide

  35. Rich result - Make your
    website shine!

    View Slide

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

    View Slide

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

    View Slide

  38. View Slide

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

    View Slide

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

    View Slide

  41. Server Side Rendering (SSR)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. Static Rendering

    View Slide

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

    View Slide

  50. 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/

    View Slide

  51. 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/

    View Slide

  52. 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();

    View Slide

  53. 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/

    View Slide

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

    View Slide

  55. 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

    View Slide

  56. 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)

    View Slide

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

    View Slide

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

    View Slide

  59. 59
    What else can go wrong?
    (Best Practices)

    View Slide

  60. Oops, errors!

    View Slide

  61. View Slide

  62. Handle errors properly.

    View Slide

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

    View Slide

  64. 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'
    });
    });

    View Slide

  65. Googlebot is stateless…

    View Slide

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

    View Slide

  67. 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';
    }

    View Slide

  68. Googlebot does not click on stuffs

    View Slide

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

    View Slide

  70. 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

    View Slide

  71. 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

    View Slide

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

    View Slide

  73. 73
    Tools & Resources

    View Slide

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

    View Slide

  75. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. 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/

    View Slide

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

    View Slide