JS SEO

Javascript Frameworks & SEO

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