by ueshiy

Slide 1

Slide 1 text

AMPରԠͱ͔ͦͷ΁Μͷ࿩ @uessy_akr

Slide 2

Slide 2 text

͸͡Ί·ͯ͠ʂ ΋͘͠͸͓ٱ͠ͿΓͰ͢ɻ ਓੜ2ճ໨ͷ๺ւಓɻ פ͍ʂʂʂw • ͏͑͠ʔ @uessy_akr • ओʹTwitterʹੜଉ͍ͯ͠ΔίΞϥ • σΟϨΫγϣϯ ٴͼ ։ൃ @

Slide 3

Slide 3 text

AMP

Slide 4

Slide 4 text

஌Γ߹͍ͷํ ʮ".1ରԠ͍ͨ͠ΜͰ͢ΑͶʔʯ ʮͳΔ΄Ͳʯ

Slide 5

Slide 5 text

AMPͱ͸ʁ ͜Εɻ (PPHMFݕࡧ݁ՌͰ͸ ཕϚʔΫ͕෇͍͍ͯΔ

Slide 6

Slide 6 text

AMPͱ͸ʁ Google͞Μᐌ͘ ".1ϓϩδΣΫτ͸ɺϞόΠϧΠϯλʔωοτͷ ߴ଎ԽΛ໨ࢦ͢Φʔϓϯιʔεͷऔ૊ΈͰ͢ɻ ೥݄೔ (PPHMF+BQBO#MPHϞόΠϧ΢ΣϒΛ΋ͬͱ଎͘ IUUQTKBQBOHPPHMFCMPHDPNCMPHQPTU@IUNMΑΓ

Slide 7

Slide 7 text

AMPͱ͸ʁ ඞਢࣄ߲(1/2) wEPDUZQFIUNMͰ࢝ΊΔ͜ͱɻ wIUNM͸IUNM⚡΋͘͠͸IUNMBNQͱॻ͘ɻ wIFBEͱCPEZ͕ඞཁɻ wIFBEͷதʹMJOLSFMDBOPOJDBM ISFG40.&@63-͕ඞཁɻ  40.&@63-ʹ͸ɺ௨ৗͷ)5.-ϖʔδͷ63-΋͘͠͸ ".1ϖʔδࣗ਎ͷ63-Λࢦఆɻ wIFBEͷ࠷ॳͷࢠཁૉͱͯ͠  NFUBDIBSTFUVUG͕ඞཁɻ

Slide 8

Slide 8 text

AMPͱ͸ʁ ඞਢࣄ߲(2/2) wIFBEͷதʹ  NFUBOBNFWJFXQPSU  DPOUFOUXJEUIEFWJDFXJEUI NJOJNVNTDBMF  ͕ඞཁɻJOJUJBMTDBMF΋ਪ঑ɻ wIFBEͷதʹ  TDSJQUBTZODTSDIUUQTDEOBNQQSPKFDUPSH WKTTDSJQU͕ඞཁɻ wIFBEͷதʹ".1#PJMFSQMBUF$PEF͕ඞཁɻ

Slide 9

Slide 9 text

AMPͱ͸ʁ AMP Boilerplate Code body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-moz- keyframes -amp-start{from{visibility:hidden} to{visibility:visible}}@-ms-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-o- keyframes -amp-start{from{visibility:hidden} to{visibility:visible}}@keyframes -amp- start{from{visibility:hidden}to{visibility:visible}} body{-webkit- animation:none;-moz-animation:none;-ms- animation:none;animation:none}

Slide 10

Slide 10 text

͓ɺ͓͏…

Slide 11

Slide 11 text

ɾ5IF0QFO(SBQIQSPUPDPM ɾ5XJUUFS$BSET ͳͲՄ ϝλσʔλͷهड़

Slide 12

Slide 12 text

IUUQTEFWFMPQFSTGBDFCPPLDPNEPDTTIBSJOHXFCNBTUFSTΑΓ ϝλσʔλͷهड़ OGP(The Open Graph protocol) 'BDFCPPLଞ 4/4Ͱ࢖ΘΕ͍ͯΔ 63-γΣΞ࣌ͷ ෇ਵ৘ใఆٛ

Slide 13

Slide 13 text

IUUQTEFWUXJUUFSDPNXFCTJHOJOIUUQTEFWUXJUUFSDPNDBSETUZQFTTVNNBSZMBSHFJNBHFIUNMΑΓ ϝλσʔλͷهड़ TwitterCard 5XJUUFSͰ࢖ΘΕ͍ͯΔ 63-γΣΞ࣌ͷ ෇ਵ৘ใఆٛ

Slide 14

Slide 14 text

ϝλσʔλͷهड़ schema.org ͷϚʔΫΞοϓਪ঑ QIQDPO෱Ԭ-5εϥΠυࢀর IUUQTTQFBLFSEFDLDPNVFTTZ@BLSQIQDPOGVLMUKTPOME

Slide 15

Slide 15 text

͓͚͓͚ɻ

Slide 16

Slide 16 text

ϚʔΫΞοϓํ๏ αϯϓϧ(1/3) Sample document h1 {color: red} IUUQTXXXBNQQSPKFDUPSHKBEPDTSFGFSFODFTQFDSFRVJSFENBSLVQΑΓ

Slide 17

Slide 17 text

ϚʔΫΞοϓํ๏ { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": [ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } ʙதུʙʙதུʙ αϯϓϧ(2/3) IUUQTXXXBNQQSPKFDUPSHKBEPDTSFGFSFODFTQFDSFRVJSFENBSLVQΑΓ

Slide 18

Slide 18 text

ϚʔΫΞοϓํ๏ αϯϓϧ(3/3)

Sample document

Some text

Slide 19

Slide 19 text

੍໿

Slide 20

Slide 20 text

w TDSJQUUZQFBQQMJDBUJPOMEKTPO  Ҏ֎ېࢭɻ w ".1ʹඞਢͷTDSJQU͸ྫ֎ɻ

Slide 21

Slide 21 text

࢖༻Մೳ

Slide 22

Slide 22 text

ཁมߋ w JNHˠBNQJNH w WJEFPˠBNQWJEFP w BVEJPˠBNQBVEJP w JGSBNFˠBNQJGSBNF

Slide 23

Slide 23 text

࢖༻ෆՄ w GSBNF w GSBNFTFU w PCKFDU w QBSBN w BQQMFU w FNCFE

Slide 24

Slide 24 text

w ISFGଐੑ͸KBWBTDSJQUͰ࢝·ͬͯ͸ ͍͚ͳ͍ɻ w UBSHFUଐੑ͕ଘࡏ͢Δ৔߹͸ɺ  ஋͸@CMBOLͰͳ͚Ε͹͍͚ͳ͍ɻ

Slide 25

Slide 25 text

w ".1#PJMFSQMBUF$PEFͰͭ͸ඞਢɻ w ΋͏ͭɺIFBEͷதͰϨΠΞ΢τௐ੔༻ ʹهड़͕ڐ͞ΕΔɻ  ࢖༻ՄೳͳຒΊࠐΈDTT͸͚ͭͩɻ w ͦͷ৔߹͸TUZMFBNQDVTUPNTUZMF Ͱهड़ɻ w Ұ෦࢖༻Ͱ͖ΔDTTʹ੍ݶ͋Γɻ w ֎෦ͷDTTͷಡΈࠐΈ͸ෆՄɻ

Slide 26

Slide 26 text

ରԠ

Slide 27

Slide 27 text

طଘϖʔδͷAMPରԠ " طଘϖʔδΛ".1ϖʔδԽ͢Δ # طଘϖʔδͱ͸ผʹ".1ϖʔδੜ੒

Slide 28

Slide 28 text

طଘϖʔδͷAMPରԠ " طଘϖʔδΛ".1ϖʔδԽ͢Δ # طଘϖʔδͱ͸ผʹ".1ϖʔδੜ੒

Slide 29

Slide 29 text

طଘϖʔδͷAMPରԠ GoogleͷςετπʔϧͰઌୡऀΛνΣοΫ

Slide 30

Slide 30 text

΍͸Γ ϓϨʔϯςΩετ ʴ ΞΠΩϟονը૾ ͱ͔͕ແ೉Ͱ͢ΑͶ…

Slide 31

Slide 31 text

ײ૝ w ".1ରԠ͢Δ৔߹͸  ௨ৗ)5.-ͱ͸ผʹɺ".1ϖʔδΛ  ੜ੒ͨ͠ํָ͕͔΋ʁ w ".1σβΠϯݪଇʮσϕϩούʔʹͱͬͯͷ ࣮૷ͷ͠΍͢͞ΑΓ΋ɺ  ϢʔβʔΤΫεϖϦΤϯεΛ༏ઌ͢Δɻʯ  ๻ʮࠨ༷Ͱ͔͢ɻʯ σβΠϯݪଇr".1 IUUQTXXXBNQQSPKFDUPSHKBMFBSOBNQEFTJHOQSJODJQMFTΑΓ

Slide 32

Slide 32 text

builderscon tokyo 2018 ։࠵!! ͓·͚ w ೥݄೔ ໦ ʙ݄೔ ౔ w ܚጯٛक़೔٢Ωϟϯύεڠੜؗ

Slide 33

Slide 33 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ