Service worker sorcery

Key Takeaways

foreign [Music] to another episode of SEO fairy tales with me today is day smart technical SEO and Dev at tame the Bots and I just found out you invented purple Ceramics for use in jet engines I didn't date yeah how did that happen that was my first job at school and now of uni um I did interior science in an aerospace lab and got to work on that it was great fun what like First okay my my first job was a lot more boring than that but uh that is amazing so you kind of did rocket science yeah kinda ish I mean it's jet engines it's pretty cool tool rocket science light Fair we're not going to talk about rocket science light unfortunately but something that is somewhat looking like rocket science to a lot of people which is technical SEO [Music] you brought a technical SEO challenge to me that you experienced yeah what's that uh it was uh to do with service workers oh yeah no okay yeah uh twice it's actually happened uh two people have approached to me now um with sites that uh it just didn't quite work um one um it just didn't work at all and they were relying very heavily on the service worker so right um they were just ending up with blank pages and no indexing oh and the other was related but not maybe quite so serious in some ways but they only end up with like partial indexing okay but that to me is confusing because for those of you who don't know service workers the idea is it's kind of like an add-on thing like it adds to the functionality of a site but does not necessarily or not per se have such an impact because what it should be used for sure I gotta be treading carefully here is that it should basically just be a layer between your site and the network and that allows offline capabilities and push notifications and background sync and stuff so what did they do [Music] in the first case um when you have a service worker on a site you need to register it yes correct um so the price will come along you'll find the reference to the service worker register it try to register it try to register it even um however what they would do is wait for that to happen before they were doing all the other client-side rendering things so before they went and fetched all the data and put everything to do which all kind of worked for a user it could be a little slow because you have to wait for that service worker register have something like googlebot it doesn't register something it's true yeah so that's actually not even a bug or anything because the idea is again it's an optional feature that you might opt out off or browsers might not support it so you are requesting it to be registered and it might fail or never register and we actually document that behavior because a service worker might change the behavior for a returning visitor versus a first-time visitor and we assume that people on search results are first time so yeah [Music] how did you figure that one out because I think the debugging that is not super easy is it yeah it's not always very easy um basically a lot of what you're doing is looking for stuff that isn't there that should be um so the first thing you can do with them with the search console and we could look and see there's very little actually indexed the very and lots of things like software IVs so um so this is really huge this looks like an error page the few pages that were indexed were basically just the shell so when a site is client-side rendered they send just a minimal shower that's a placeholder basically until everything gets fetched in all right that's right and basically that's as far as everything got so then it's onto the light testing tools so things like URL inspected as a water test and there's Rich results test there's mobile friendly test yeah um if you run it through them you can see much the same result it's empty have what you do get is under the more info little tab you'll find on the side and you can see the resources that are loaded in or haven't loaded in sure you can see the requests being made yeah so that's it so you can see if they've failed if they've been successful or if they've just not been tried at all I was about to say let me guess you probably saw them not even being tried exactly yeah oh and then the conclusion would be oh JavaScript and Google search does not work [Music] um what there also is is there is there is a JavaScript console as well right yes so that can give some useful feedback but it depends a little bit on how the site's made because it depends on what they're logging out yeah exactly if you have no error logging that's again so at that point it's time go make friends with your devs [Music] and go and ask them basically that should be your first step after you've just discovered that there is a problem go to your devs but that's a tricky one because if you don't know what's going on what you're gonna talk about with them yeah well that's the thing you don't necessarily know how they built Psy they know how they built sci-fi you know there's a problem go and talk to them and you start from the first step you make little breadcrumbs on the trail through the path and you talk through the process of how does data come from your server and end up on the screen so each little step along the way and then and then you can like buddy up and become like a detective tag team yeah okay that's cool and get them to log each little stage in the JavaScript uh console log something like that and then you see where it fails and you can see when it fails so that when you're running through the live test again you can see exactly the point that something's not happened ah and you know you can ask them well how does you call in your main content from the API whatever exactly on something yeah and it's not coming through um you say well how exactly that's happened what function does that happen in tracing it through that way you can find the point it falls over and then hopefully the devs will have a good clear path of where to go um [Music] so in the first case um it was quite simply a case of move in all the calls um to the apis anything out of that whole pedestrian of the service worker logic that's pretty cool I like that you're basically approaching it from the perspective of oh it's kind of murder has happened let's solve this together and then you team up with the developers because I've heard other people having a different strategy than yours where they're basically trying to to figure out what the problem is and then going to their developers yeah I mean it can it can work um the problem is with a lot of modern sites these days they're they're built and they go through something like webpacks sophisticated the whole pipeline um so you can't just see oh it's this function you know and so at that point you probably don't have the tools and the information to be able to say exactly where it's failing just the outcome [Music] foreign that was partially indexed I guess that must have been even harder to debug it was because a good deal of this stuff was was there and Pages were indexing unfortunately it was uh a little block of information but it was quite the important information um one of the things one of the superpowers service workers give you is to work offline and this was information that was relevant for people going out and doing jobs and yeah right yeah yeah um the devs right thought what a great way to make that available online yes which it does good thinking and what they also thought is we want to get loads of it so they overtook the normal process of uh fetching and did it purely within the service worker I I did that in the past yeah not not gonna lie I I feel with the deaths here yeah it was irrational and it made sense and it worked for the for the yeah for the end user just unfortunately not for surge yeah exactly and unfortunately enough search [Music] and how did that manifest and so you said you used search console and specifically the coverage report yeah you could see how did that because these guys are getting covered yeah um they're getting indexed but they're just not surfacing for things they really should surface for you know someone went in and did a search for a bit of this content and it just really quite unique yeah it didn't turn on visibility and then from from that point where you see like okay so it is crawled because if it's not crawled it can't be index it is indexed as well it's just not serving in search results yeah how did you then figure out like where to go next did you then head over to the devs or was there like a step in between the first step before you head over to the desk is you just go is you just not ranking very well for this it's okay badly have you got a lot of competition um because there's not everything's technical it might be content issue yeah exactly so we had a look at the rendered HTML um if you if you look in search console I was like where's the render is you know and use the URL inspector tool you don't do the live test just the first step of it and it's a nice little panel no pretty pictures but that's not really what matters no um but you can have a look it's the HTML there and sure enough no sign of that so that that gives you something to go to the devs with I think you can even like search in the rendered HTML and then you type in the same unique content and you're like wait a minute yeah this can't show up because it's not here yeah so then that gives you a clear path to go back to the devs and basically you repeat that process so how does that get from there you know and uh it's it's just break it down steps that's nice that's interesting [Music] there's one thing one opportunity that I think we haven't talked about and that is actually the developer Tools in your browser yes because you could go into the network inspector and try to find out where does this piece of content come from yeah and I think there it says who or what initiated this yeah which then you need to go to the desk with because then it's going to be like app.min.js line one which is a huge line of access spaghetti code and you're like okay great but so you can get a little bit muddy with service workers too because you'll report that you know a lot of stuff has come from the service worker that is that is true yeah and then you're like interesting you could use the developer tools in the browser as well to disable service workers if you have a suspicion and it's the service worker that's right yeah it's a tricky one probably yeah you just need to go in devtools if you go to the application panel yeah yeah and you might need me to search to find that in the first place and then there is bypass as well if you find a service yeah this little tick box bypass uh it actually just bypass on this network so it always goes on network yeah so it's just in that way that you're on at that time it'll then start by passing the service worker but you get a great idea of what the site would look like yes service worker doesn't register it doesn't work interesting [Music] okay to recap you had a client coming into your actually two clients coming in with a site that wasn't indexed at all and then one was indexed but was missing content and both of that you could trace through Google search console and the URL inspection tools exactly to be an issue that the devs needed to look at and then you teamed up with the devs to actually work through that how did the the depth part of the process work so you went to the developers and went like where's this coming from because it's missing exactly yeah so you just go and to explain step by step yeah which way well off function calls that and then what calls that function and you trace it back um to the origin point of someone coming in so and then then that's where they can work from and fix that I guess that should be a not too hard to fix in some case well in some cases some cases certainly in the first case it was very easy fix yeah it was literally just does not work for the yeah the second case it was a little bit more finagling I've done weird things as well with service workers so so it's a great but also a dangerous tool if you're holding it wrong as Gary would say am I holding it wrong awesome Dave this was a wild ride through the history of chasing a bug in service work or with service workers in googlebot um thanks so so much for being here with me today you're welcome telling the story and for all of you out there do let me know in the comments what was your weirdest experience and how did the developers respond to it when you were asking them about what's going on there and leave us a like And subscribe to the channel to see upcoming episodes and other content that we put out stay safe take care and bye bye not creepy how dare you there is Ariel [Music]