What To Do When Google Can't Understand Your JavaScript By Jody O'Donnell
-
Upload
search-marketing-expo-smx -
Category
Marketing
-
view
2.045 -
download
1
Transcript of What To Do When Google Can't Understand Your JavaScript By Jody O'Donnell
#SMX #21A2 @gimpslice
What To Do When Google Can't
Understand Your JavaScript
Althoughthisisatemplate,theseslideshavebeencreatedasexamplestoshowyouwhat’spossiblewithinthetemplate.PLEASEDELETEALLEXAMPLESLIDESANDNOTESBEFORECREATINGORIMPORTINGYOUROWNDECK. YOU MUST USE THE SMX FOOTER ON YOUR TITLE SLIDE! Thetemplateworksbestifyouuseittocreateapresentationfromscratch.However,thisblanklayoutoffersyouflexibilitytoinsertyourownslidesabovetheSMXfooter.Youmustusethisfooteratonalmostallofyourslides.Ifascreenshotoverlapsthefooteronoccasion,that’sfine–butdoyourbesttocropappropriately!Beforeyoudoanythingelse,replace“#XXa”inthefooterwithyoursession’sspecifichashtag.InPowerPoint,SelectVIEW>SLIDEMASTERtoeditandincludeitonallslidesofyourpresentation.Alsoaddyour@twitterhandle(or@companyhandleifyouprefer).Askyoursessioncoordinatorforthesession’sspecifichashtag!Thistemplateishigh-resolution16:9.DONOTchangeitto4:3.Alsonotethatifyouimporta4:3presentationinto16:9youmayencounterdisplayissues.ThetemplateusesCenturyGothic&Corbelasdefaultfonts.Arialisasecondaryfontthatmayappear.NotethatolderversionsofPowerPointmaynothavetheseasanoption;changetoArialorotherstandardsans-serif-font.Wheninsertingtext,you*MUST*useonlystandardfonts.Wecannotguaranteeeventlaptopswillhavespecialtyfontsinstalled,norcanwedosoonsite.Powerpointswithanimationsmaynottranslatewelltopdf/slideshareformat–youmayalsosubmita2ndversion/scrubbeddeckmoreappropriateforpostingonlinebySMXproductionstaff.
Example Title Slide:
Althoughthisisatemplate,theseslideshavebeencreatedasexamplestoshowyouwhat’spossiblewithinthetemplate.PLEASEDELETEALLEXAMPLESLIDESANDNOTESBEFORECREATINGORIMPORTINGYOUROWNDECK. YOU MUST USE THE SMX FOOTER ON YOUR TITLE SLIDE! Thetemplateworksbestifyouuseittocreateapresentationfromscratch.However,thisblanklayoutoffersyouflexibilitytoinsertyourownslidesabovetheSMXfooter.Youmustusethisfooteratonalmostallofyourslides.Ifascreenshotoverlapsthefooteronoccasion,that’sfine–butdoyourbesttocropappropriately!Beforeyoudoanythingelse,here’showtoreplace“#XXa”inthefooterwithyoursession’sspecifichashtag.InPowerPoint,SelectVIEW>SLIDEMASTERtoeditSLIDE#1toincludeitonallslidesofyourpresentation.Alsoaddyour@twitterhandle(or@companyhandleifyouprefer).Askyoursessioncoordinatorforthesession’sspecifichashtag!Thistemplateishigh-resolution16:9.DONOTchangeitto4:3.Alsonotethatifyouimporta4:3presentationinto16:9youmayencounterdisplayissues.ThetemplateusesCenturyGothic&Corbelasdefaultfonts.Arialisasecondaryfontthatmayappear.NotethatolderversionsofPowerPointmaynothavetheseasanoption;changetoArialorotherstandardsans-serif-font.Wheninsertingtext,you*MUST*useonlystandardfonts.Wecannotguaranteeeventlaptopswillhavespecialtyfontsinstalled,norcanwedosoonsite.Powerpointswithanimationsmaynottranslatewelltopdf/slideshareformat–youmayalsosubmita2ndversion/scrubbeddeckmoreappropriateforpostingonlinebySMXproductionstaff.
#SMX #21A2 @gimpslice
JodyJ.O’DonnellSEOTechnicalDirectorMerkle,Inc
#SMX #21A2 @gimpslice
WebsitesneedtobeDiscoverableandCrawlableWebpagesneedtobeunderstoodthroughSEOsignalsWebpagesneedtheirContenttobeScoredcorrectlytobeIndexedWebsitesneedtobeIndexedproperlytoRank
Let’s Start with the Basics
#SMX #21A2 @gimpslice
WearenotgoingtotalkaboutBingexceptinthetraditionalsenseofreadingtheHTTPHeadersandtheHTMLSourceBingandtheothersearchenginesstillrequireHTMLsnapshots:§ HTMLSnapshotsandtherenderedDOMbyanormalbrowserengine(readbyGoogle)shouldbeidentical
Oh…Bing.
#SMX #21A2 @gimpslice
FirstthingyoudidwasturnJSoffinnewbrowsersJavaScriptwasn’ttheproblem,butittooktheblame.Lookin’atyouMSIE3-6
The Browser Wars
#SMX #21A2 @gimpslice
Itwasn’tthatJavaScriptgotbetter§ Microsoftdecidedtoplayball§ InternetExplorergotbetterToday,JavaScriptisoneofthemostpopularprogramminglanguagesintheworld
So…What Happened?
#SMX #21A2 @gimpslice
jQueryandMootoolscameoutinlessthanayearofeachotherOutoftheboxsolutionsforfree!Client-SideApplicationsthatusetraditionHTMLandCSSstatements
JavaScript Libraries
#SMX #21A2 @gimpslice
Developmentismuchfasterwhenyoureferenceafreelibraryratherthancreateiteachtime§ Browsercompatibilitywasabiggerdeal,too
ItworkedwithSEO!
What did this do for Us?
#SMX #21A2 @gimpslice
SEOAin’tAllThat§ Userexperienceismoreimportantthanever
§ Attentionspansareshort§ Wecan'tholdtechnologyhostagebecauseofSEO
At the End of the Day
#SMX #21A2 @gimpslice
LibrariesEvolvedtoentireframeworksFrameworkswereoutoftheboxsolutionsforcreatingapps§ Appscanbeonclientorserver§ TheframeworkscreatedoutoftheboxMVC’s
Programmersarenowfreetoconcentrateonfunctionality
JavaScript Frameworks
#SMX #21A2 @gimpslice
FromanSEOstandpoint,welookattheresult§ Ourexaminationisinthecode,notthebackendtoproduceit
Wearenotgoingtodiscussthedifferencesbetweentheframeworks§ Northeclient-sidevs.server-siderendering§ SPA’sandframeworksshouldbeabletoproduce1URLtoonepieceofuniquecontent
SPA’s and JavaScript Frameworks
#SMX #21A2 @gimpslice
#SMX #21A2 @gimpslice
TheybuiltahistoryAPIcallbetweentheCodeandthebrowserSpecifically,afunctioncalledpushState()Twoofthosevariables§ TitleTag§ URL
History API - pushState()
#SMX #21A2 @gimpslice
#SMX #21A2 @gimpslice
SEO’sneedtounderstandthedifferencebetween:
§ HTTPHeaders§ HTMLSource
§ HTMLSnapshot
§ RenderedDOM
Different Places to Look
#SMX #21A2 @gimpslice
Allsearchengineshavetwoorders§ HTTPHeaders– x-robots-tag,link:canonical,link:hreflang
§ HTMLSource– metarobotstag,<link>canonical,<link>hreflang
SEO Signals by Order of Precedence
#SMX #21A2 @gimpslice
DOM – The Third Order
#SMX #21A2 @gimpslice
JavaScriptredirectsaretreatedinasimilarmanneras301redirects
What were the Results?
#SMX #21A2 @gimpslice
DynamicallyinsertedcontentistreatedinanequivalentwhetherintheHTMLsourceorintheDOM.§ ThisgoeswithSEOSignalsaswell
What were the Results?
#SMX #21A2 @gimpslice
Oneoftheteststhatfailed§ Therel=“nofollow”tagwascompletelyignoredintheDOM
WethinkthisisanOrderofPrecedenceproblem§ CrawlsignalsarepickedupstartingintheHTMLsource,lookingfortherel=”nofollow”signal
§ Essentially,adedupingmechanismmayberesponsible
One Discrepancy
#SMX #21A2 @gimpslice
SEOSignal:§ wewillpickitupanduseitthefirsttimeweseeit
Content:§ Moreofamixedbag,theycouldchoosewhichcontenttheyscoreandindex
SEO Signal vs. Content
#SMX #21A2 @gimpslice
Asasecondaryeffect,ourarticlegotpickedupinahackernewsthreadThesinglepiecethatcamefromthiswholediscussionwasasmallpartwithaself-purportedEx-GoogleEmployee§ Discussionaboutifgooglewouldwaitfor120secondsbeforetakingthesnapshotincaseofinjectedcontent
§ Googleengineerdidagreethattheydidanditwasafixedtime
Wasittrue?
Hackernews
#SMX #21A2 @gimpslice
Google Fetch & Render PageSpeed Insights
www.maxxeight.com/js-timer/
#SMX #21A2 @gimpslice
MostEcomsiteshavecategorypageswithhundredsofproductstolist
The Category Page Conundrum
#SMX #21A2 @gimpslice
Youhadthreechoices:§ View-AllPages§ PaginatedPages§ LazyLoading(whichdidn’thaveanSEOoption)
The Category Page Conundrum
#SMX #21A2 @gimpslice
InfinitescrollchangedwithHTML5’sHistoryAPINowwecantieaJSListeningHandlerwithapushState()call§ Youcanpush{{URL+?page=2}}intotheURLbar– REMEMBER:Youcanupdatetitletaghere,too
Infinite Scroll + HTML5
#SMX #21A2 @gimpslice
SearchenginescanreferenceanyoftheindividualpagesandrendertheHTMLequivalentofthatsinglepage
§ THISISWHATYOUDOWITHPAGINATIONALREADY!!!
Infinite Scroll + HTML5
#SMX #21A2 @gimpslice
TheuserscrollsasfarastheywantFantasticUserExperience
Infinite Scroll + HTML5
#SMX #21A2 @gimpslice
ThereisaproblemWestillneedlinks!
Partial Solution
#SMX #21A2 @gimpslice
#SMX #21A2 @gimpslice
TherenderedHTMLversionoftheDOMshouldbeaworkingHTMLcopyofthepage§ Whenyou“InspectElement”youareseeingthevisualrepresentationoftheDOM
The Rendered DOM
#SMX #21A2 @gimpslice
HTMLSnapshotsshouldbeasclosetoanexactHTMLinstanceoftheDOMaspossibleGooglebotdoesnotneedtheseatthistime
Let’s Talk Snapshots
#SMX #21A2 @gimpslice
DonothaveconflictingsignalsbetweentheOrdersofPrecedence
§ BeconsistentbetweentheHTTPHeaders,HTMLSourceandrenderedDOM
Conflicting SEO Signals
#SMX #21A2 @gimpslice
InorderfortheDOMtofullyrendercorrectly,thebrowserneedsaccesstoalltheassetsbeingrequestedforthepageThisistrueforgooglebottorendertheDOM,too§ Ifgooglebotcan’taccessassetslikeJavaScript,pagerenderscanbeincomplete
Crawl Signals – Robots.txt
#SMX #21A2 @gimpslice
Crawlsignalscanbepickedupanywhereinthe:§ HTTPHeaders(canonicals)§ HTMLSource(links)§ DOM(links)
CrawlsignalsshouldbeconsistentbetweentheOrdersofPrecedence§ Conflicting,orsignalsthatonlyappearonlyintheDOM(suchastherel=“nofollow”)mightnotbeseenorinterpretedcorrectly
Crawl Signals
#SMX #21A2 @gimpslice
ThewebisstillbasedonlinksAJSfunctionisnotahyperlinkelement§ WehaveseenGoogleincorrectlycreateURL“strings”andgenerateURLsthatdon’texist
Onclick + window.location != <a href=”#”>
#SMX #21A2 @gimpslice
NavigationstillneedstobelinksthatgotothecorrectpageSamewithFacetedNavigation§ Eachfacetlinkneedstocorrespondtoanactualpageintheclick+reloadmethod
§ TheactualloadingcanbeAJAXcallsfortheuser
Crawl Signals - Navigation
#SMX #21A2 @gimpslice
GooglebotisalameuserGooglebotdoesn’tclickonbuttonsanddoesn’tscrolldownthepage,etc§ ThereforethecontentneedstobeloadedintheDOMautomatically,notbasedonuserinteractions
§ Wehaven'tseenAJAXsequencesbeingindexedandinterpretedbyGooglebot.
Content Considerations
#SMX #21A2 @gimpslice
1URLperpieceofcontentand1pieceofcontentperURL–§ ItisessentialtohaveeverypieceofcontentaccessibleviaitsownURL
§ SinglePageApplications(SPAs)shouldactuallynotbeusinga“singlepage”orsingleURLwhendeliveringthecontent
Changing Content Best Practices
#SMX #21A2 @gimpslice
TabbedcontentshouldallbeintheDOM§ SamewaywewouldwantitifweweretalkingaboutputtingitintheHTMLsourcetobeginwith
Changing Content
#SMX #21A2 @gimpslice
BecauseoftheDOMSnapshot(5seconds)§ Contentinjectedautomaticallyafter5secondswon’tbescoredorindexed
§ SEOsignalsafter5secondswon’tbeincludedinthescoring
§ HTMLSnapshotsneedtoalignherewiththecontentwithinthat5secondcutoff
Content - DOM Timeouts
#SMX #21A2 @gimpslice
Reviewsonpagesaregenerallylikeoldlazyloadpages§ ThefirstgroupingisloadedintheDOM
§ TherestareAJAXcalls§ ReviewsbehindtheAJAXcallswillmostlikelystillnotbeindexed
Content - Reviews
#SMX #21A2 @gimpslice
Indexationsignaldirectivesshouldbealignedaswell§ X-Robots-TagandMetaRobots“noindex”§ JavaScriptRedirects
Indexationsignalhints§ Relnext/prevconsolidationsignals§ LinkCanonicaltags§ LinkAlternatetags
Index Signals
#SMX #21A2 @gimpslice
#SMX #21A2 @gimpslice
SPA’s and Status Codes
#SMX #21A2 @gimpslice
SPA’s and Status Codes
#SMX #21A2 @gimpslice
IfURLdoesn’texist->§ JSredirecttoapagethatactually404§ DonotuseMeta-EquivRefreshtoredirect
Ifyouneedtoredirect:– 302–ItneedstobeserversidebeforebeforetheJSapploads(rewriterule)
– 301-sameas302orJSredirect(consideredas301byGoogle)
Status Code Challenges
#SMX #21A2 @gimpslice
#SMX #21A2 @gimpslice
HTTPHeaders,HTMLSource,HTMLSnapshotsandtheDOMallcontainSEOsignals§ GoogleislookingatallthreeOrdersofPrecedenceforsignals§ Bing/Restofworldlookatitthroughthetraditionaltwoorders§ BeconsistentinyourcontentandSEOsignals
A Signal is a Signal is a Signal
#SMX #21A2 @gimpslice
GoogleisdumpingtheDOM§ LineupcontentandSEOsignalatalllevelsofprecedence§ TheDOMshouldbeanHTMLrepresentationoftheworkingpage§ LookatyourpagesinFetchandRendertoseehowGoogleisabletorenderthepage
Googlebot only as Good as the DOM
#SMX #21A2 @gimpslice
Googlebotcan’trenderdynamiccontentdrivenbyuserinteractionssuchasclickandmouseover§ Itisn’tauser,itisn’tgoingtointeractwiththepagebeyondalinkorapost§ Itwon’t“scr0ll”tothebottomofthepage§ YouneedtoassignauniqueURLtoeachpieceofuniquecontent
Googlebot is a Lame User
#SMX #21A2 @gimpslice
WeTestedJavaScript!§ http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
HacknewsThread§ https://news.ycombinator.com/item?id=9529782
AngularAirHangout§ https://www.youtube.com/watch?v=lxulee01zyY
Links to articles referenced
#SMX #21A2 @gimpslice
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU! SEE YOU AT THE NEXT #SMX