1000万以上のWebページを AMPにした話 / making_over_10million_amp_pages

Transcript

1. 1.

   1000ສҎ্ͷWebϖʔδΛ AMPʹͨ͠࿩ HTML5 Conference 2018 ฏ໺ ণ࢜(@shisama)

2. 2.

   ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto office @shisama_ @shisama

   Node.js Core Collaborator ؔ੢NodeֶԂOrganizer
3. 3.

   ஌͍ͬͯ·͔͢ɾɾɾʁ

4. 4.

   None
5. 5.

   ࠓ೥ͷय़ʹAMPରԠ͠·ͨ͠

6. 6.

   Why AMP? • ଎౓վળ • SEOΛԼ͛ͳ͍ͨΊ • Ϣʔβʔ਺ͷ૿Ճ

7. 7.

   Why AMP? • ଎౓վળ
 ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্
 ɹ὎53%ͷϢʔβ͕அ೦ͯ͠͠·͏
 ɾىಈ͕࣌ؒ1ඵ஗͘ͳΔ
 ɹ὎ίϯόʔδϣϯ཰͕ 7% ‑Down

8. 8.

   ଎౓վળ DOMContentLoaded: 633 ms Load: 1.45 s DOMContentLoaded: 1.15 s

   Load: 3.52 s ௨ৗϞόΠϧϖʔδ AMP
9. 9.

   SEO

10. 10.

    AMPରԠޙ̏ϲ݄ͷϢʔβʔ਺Λൺֱ ΦϨϯδ͕ࡢ೥ɺ ੨͕ࠓ೥ Ϣʔβʔ਺૿Ճ

11. 11.

    1088ສޠऩ࿥!

12. 12.

    Ͳ͏΍ͬͯେྔͷϖʔδΛAMPʹ͔ͨ͠ • ஈ֊తʹAMPʹ͍ͯ͘͠
 ɾ޿ࠂ΍Ϣʔβʔ਺΁ͷӨڹ͕৺഑ • ༗ޮͳAMPϖʔδ͔ݕূ͢Δ • ศརͳAMPίϯϙʔωϯτΛ࢖͏

13. 13.

    ஈ֊తʹAMPʹ͍ͯ͘͠

14. 14.

    ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ͸
 <link>ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ

15. 15.

    ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ͸
 <link>ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ <link>͕ଘࡏ͠ͳ͚Ε͹ ݕग़͞Εͳ͍

16. 16.

    // ඇAMPϖʔδଆ if (word.startWith("n")) { <link rel=“amphtml" href=“https://ejje.weblio.jp/…“/> } //

    AMPϖʔδଆ if (word.startWith("n")) { <link rel=“canonical" href=“https://ejje.weblio.jp/…“/> } n͔Β࢝·Δ୯ޠͷΈ AMPͱͯ͠ݕग़ͤ͞Δ ஈ֊తʹAMPʹ͍ͯ͘͠
17. 17.

    ஈ֊తʹAMPʹ͍ͯ͘͠ Google AnalyticsͰAMPϖʔδ΁ͷΞΫηε਺Λ ܭଌ͠ͳ͕Βɺগͣͭ͠ରԠ୯ޠΛ૿΍ͨ͠

18. 18.

    ༗ޮͳAMPϖʔδ͔ݕূ͢Δ

19. 19.

    ༗ޮͳAMP͔ݕূ͢Δ #development=1 ༗ޮ͔Τϥʔ͔݁ՌΛදࣔ

20. 20.

    Τϥʔͷ಺༰͕දࣔ͞ΕΔ ༗ޮͳAMP͔ݕূ͢Δ

21. 21.

    ༗ޮͳAMP͔ݕূ͢Δ

22. 22.

    ༗ޮͳAMP͔ݕূ͢Δ

23. 23.

    Promise.all([ amphtmlValidator.getInstance(), getHtml(), ]).then(([validator,html]) => { const result = validator.validateString(html);

    for (const error of result.errors) { throw new Error(error.message); } }); CIͰ࣮ߦͯ͠ νΣοΫ͢Δ͜ͱ͕Մೳ ༗ޮͳAMP͔ݕূ͢Δ
24. 24.

    ϦϦʔεޙ͸Search ConsoleͰ֬ೝՄೳ ༗ޮͳAMP͔ݕূ͢Δ

25. 25.

    ศརͳAMPίϯϙʔωϯτΛ࢖͏

26. 26.

    ศརͳAMPίϯϙʔωϯτΛ࢖͏ https://www.ampproject.org/docs/reference/components ໿छྨͷ".1ίϯϙʔ ωϯτ͕ఏڙ͞Ε͍ͯΔ

27. 27.

    ྫ͑͹͜ΜͳίϯϙʔωϯτΛ࢖͍ͬͯ·͢ BNQBDDFTT ϩάΠϯػೳ BNQJNH ը૾ͷ஗ԆಡΈࠐΈΛߦ͏ɻJNHͷ୅ΘΓʹ࢖༻ BNQTJEFCBS αΠυόʔϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBDDPSEJPO ΞίʔσΟΦϯϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBVEJP

    Ի੠Λ࠶ੜͰ͖Δɻ୯ޠͷൃԻԻ੠ʹ࢖༻ ศརͳAMPίϯϙʔωϯτΛ࢖͏
28. 28.

    amp-sidebar amp-accordion amp-img ը૾ͷ஗ԆಡΈࠐΈ αΠυόʔϝχϡʔ ΞίʔσΟΦϯϝχϡʔ ศརͳAMPίϯϙʔωϯτΛ࢖͏

29. 29.

    • ඇAMPϖʔδʹ΋AMPίϯϙʔωϯτΛར༻ • AMPϖʔδͱͷUI౷Ұ • ଎౓վળ • ίʔυΛڞ௨Խ ศརͳAMPίϯϙʔωϯτΛ࢖͏

30. 30.

    ௨ৗϞόΠϧϖʔδ AMP ྫ
    αΠυόʔϝχϡʔͷ6*Λ౷Ұ ྫ
    αΠυόʔϝχϡʔͷ6*Λ౷Ұ ศརͳAMPίϯϙʔωϯτΛ࢖͏

31. 31.

    • ଎౓վળ
 amp-imgΛ࢖ͬͯը૾ͷ஗ԆಡΈࠐΈ • ίʔυΛڞ௨Խ
 amp-accessΛ࢖ͬͯϩάΠϯͷ࣮૷Λڞ௨Խ • etc… ศརͳAMPίϯϙʔωϯτΛ࢖͏

32. 32.

    ·ͱΊ • AMP͸଎౓վળʹ༗ޮ • AMPͷͨΊͷपลπʔϧͳͲ΋ἧ͍ͬͯΔ • ศརͳίϯϙʔωϯτ͕ଟ਺ఏڙ͞Ε͍ͯΔ • ඇAMPϖʔδͰ΋ར༻Մೳ

33. 33.

    Thanks!