accelerating the mobile web with amp - wordpress.com › 2016 › 06 › steve-gr... · install +...
TRANSCRIPT
AcceleratingtheMobileWebwithAMP
SteveGrunwell@stevegrunwell
stevegrunwell.com/slides/amp
WhoamI?SeniorWebEngineer@Open-sourcecontributorHusband+(new)fatherCoffeeroaster
10up
WhatisAMP?
WhatisAMP?Open-sourceinitiativetospeedupthewebformobile
WhatisAMP?Open-sourceinitiativetospeedupthewebformobileSpecializedHTML+JS,prioritizescontent
WhatisAMP?Open-sourceinitiativetospeedupthewebformobileSpecializedHTML+JS,prioritizescontentEasilycachedbythird-partyproviders
Benefitsforusers
BenefitsforusersNear-instantpageloads,devoidofheavyscripting
BenefitsforusersNear-instantpageloads,devoidofheavyscriptingClean,consistentreadingexperience
BenefitsforusersNear-instantpageloads,devoidofheavyscriptingClean,consistentreadingexperienceAMP-enabledpagesareclearlyidentifiedassuch
Benefitsforpublishers
BenefitsforpublishersConsumerpreference
Notcurrentlyarankingfactor( )source
BenefitsforpublishersConsumerpreference
Notcurrentlyarankingfactor( )Contentisconsideredforthe"TopStories"carousel
source
Whoisitfor?
Whoisitfor?Journalists,blogs,andothernewssites
Whoisitfor?Journalists,blogs,andothernewssitesSiteswithheavypageweights
Howisthisnotjustamobilesite?
Howisthisnotjustamobilesite?Itkindofis,butbuilttoastandard
Howisthisnotjustamobilesite?Itkindofis,butbuilttoastandardNotaboutofferingadifferentsiteexperience,justafasterwaytoaccesscontent
Howisthisnotjustamobilesite?Itkindofis,butbuilttoastandardNotaboutofferingadifferentsiteexperience,justafasterwaytoaccesscontentSeamlesstransitionbetweenAMPpagesandfullsite
StructuredData
StructuredDataAMPusesSchema.orgmarkuptodescribethecontent
StructuredDataAMPusesSchema.orgmarkuptodescribethecontentPagesmustpassstructureddatavalidationinordertofullybenefitfromAMP
Analytics
AnalyticsSupportsanumberofanalyticsprovidersoutofthebox
AnalyticsSupportsanumberofanalyticsprovidersoutoftheboxAnalyticsproviderscansubmitsupportfortheirplatformstotheAMPProject
Supportedanalyticsproviders
AdobeAnalyticsChartbeatcomScoreGoogleAnalyticsParsely…andmore!
Advertising
AdvertisingAdvertisingisstillpermitted,butonlyifitadherestoguidelines
"SustainableAdPractices"
AdvertisingAdvertisingisstillpermitted,butonlyifitadherestoguidelines
"SustainableAdPractices"Currentlysupports~40differentadnetworks
Noscriptswithinadsmayexecute
ImplementingAMP
WrittenbyAutomattic+othersDrop-insupportwithhooks/filtersforcustomizingoutput
AMPplugin
WrittenbyAutomattic+othersDrop-insupportwithhooks/filtersforcustomizingoutputCurrentlyusedtoenableAMPacrossWordPress.com
AMPplugin
WhatcanIcustomize?Header/footerDisplayedpostmetaPagewidth,colors,etc.AnalyticsAdplacements
IntegratingwithYoastSEO
OverridedefaultSchema.orginformationwiththatgeneratedbyYoast
AutomaticallyconnectsMonsterInsights(formerlyGoogleAnalyticsbyYoast)
GlueforYoastSEO&
CustomizingAMPwithGlueAffectedposttypesDefaultimagesColorsAnalyticscode
AMPinthreeeasysteps:
AMPinthreeeasysteps:1. Install+activatetheAMPplugin
AMPinthreeeasysteps:1. Install+activatetheAMPplugin2. Install+activateGlueforYoastSEO&plugin
AMPinthreeeasysteps:1. Install+activatetheAMPplugin2. Install+activateGlueforYoastSEO&plugin3. TweakconfigurationviacodeorSEO›AMP
TestingYourImplementation
TestingintheBrowser
TestingintheBrowserAMPversionofapostaccessiblebyappending/amp/totheURL
TestingintheBrowserAMPversionofapostaccessiblebyappending/amp/totheURLUses<link rel="canonical" />toreferencethecanonical,non-AMPversion.
AMPValidationTool
AMPValidationToolValidationtoolbuiltrightintotheAMPlibrary
Justadd#development=1totheURL
AMPValidationToolValidationtoolbuiltrightintotheAMPlibrary
Justadd#development=1totheURLExposescommonimplementationerrorswithinthemarkup
AMPValidationToolValidationtoolbuiltrightintotheAMPlibrary
Justadd#development=1totheURLExposescommonimplementationerrorswithinthemarkup
AMPValidationErrors
StructuredDataValidationTool
StructuredDataValidationToolcanvalidatethe
Schema.orgmarkupusedbyyourAMPimplementationGoogleStructuredDataValidationTool
StructuredDataValidationToolcanvalidatethe
Schema.orgmarkupusedbyyourAMPimplementationAlertsyoutoproblemswithimages,content,andmore.
GoogleStructuredDataValidationTool
StructuredDataValidationToolcanvalidatethe
Schema.orgmarkupusedbyyourAMPimplementationAlertsyoutoproblemswithimages,content,andmore.Importantforpublishershopingtoappearinthe"TopStories"carousel
GoogleStructuredDataValidationTool
GoogleSearchConsole
GoogleSearchConsolea.k.a.GoogleWebmasterTools
GoogleSearchConsolea.k.a.GoogleWebmasterToolsProvidesafullreportofAMPindexinganderrors
Gotchas
AMP<3simages
AMP<3simagesThebenefitsofAMParereallyonlyapparenttopublishersthatuseimagesintheirmedia
AMP<3simagesThebenefitsofAMParereallyonlyapparenttopublishersthatuseimagesintheirmedia
Technicalblogsmaysuffer
AMP<3simagesThebenefitsofAMParereallyonlyapparenttopublishersthatuseimagesintheirmedia
TechnicalblogsmaysufferConsiderfreestockphotos,CreativeCommons-licensedimages,etc.
AMP<3simagesThebenefitsofAMParereallyonlyapparenttopublishersthatuseimagesintheirmedia
TechnicalblogsmaysufferConsiderfreestockphotos,CreativeCommons-licensedimages,etc.
Besuretoreadthelicenses!
AMPImagesizesPublisherLogo
600x60px
FeaturedImage>=696pxwide
Source:bit.ly/1X69CID
Googleisstilla"BlackBox"
Googleisstilla"BlackBox"AMPisnotagoldenticket
Adheringtostandardsjustmakesyoueligibletobeconsidered
Googleisstilla"BlackBox"AMPisnotagoldenticket
Adheringtostandardsjustmakesyoueligibletobeconsidered
NoguaranteethatAMPwilleverbearankingfactor
ThankYou!SteveGrunwell
stevegrunwell.com10up.com
stevegrunwell.com/slides/amp