YTread Logo
YTread Logo

Martin Splitt Technical SEO 101 for web developers

Jun 06, 2021
so i guess you've warmed up but some premieres cartola look what a shore can yeah now and that's it with russian can i say a few more words basically i'm the timer i'm like yahoo mirage ania yeah wait now so basically i'm a kid very whiny when it comes to my russian vocabulary. I don't know today. I like to talk a little bit about SEO and more specifically

technical

SEO but I think before we can dive into that I would like to give you my definition of SEO what it is and how it works and you know how it concerns us web

developers

and then So, once we've figured out what SEO should be doing or could be doing, we want to get

technical

, we want to figure out how to do it. my web pages actually get into search engines now they differ from search engine to search engine but some very broad concepts are pretty much the same across all search engines.
martin splitt technical seo 101 for web developers
I can't speak for other search engines, obviously I don't know how they do it. everything but i know how googlebot does it so we'll talk about googlebot as an example of a simpler generic search engine, once we figure out how our pages are getting into search we can also investigate things that can possibly go wrong and how we can treat them how we identify them how we treat them and then once we have a foundation to start with i want you to send to take away a bunch of tips where you can learn more and basically stay up to date too, good enough blah blah Let's start with the gist of this talk.
martin splitt technical seo 101 for web developers

More Interesting Facts About,

martin splitt technical seo 101 for web developers...

What is? Search Engine Optimization SEO Ok, great, but what does that even mean? Who here has worked with an SEO? What do you think an SEO does? That's the Bunz. I thought. I'm so sorry for making you uncomfortable. Get some chocolate. So sorry. Oh god, I'm actually sorry. I hurt you. Get some chocolate too. There you go. Oh can I It only worked before. It worked five minutes. It worked on my machine anyway, so it's not necessarily clear what you're owed. I always do and that's a lot of what they do actually, but we often see bad SEO examples.
martin splitt technical seo 101 for web developers
Do you know who here has a blog or a website? or you would be interested in us sharing your link with other bloggers so that you get more SEO but that is what we perceive as SEO and it is unfortunate that we perceive it as SEO and you may know these link farms on these pages that are full of links and without content, that's also a bad example of SEO, it's not good SEO, it's not SEO and actually because we're filtering this kind of thing, so what is SEO? Depends who you ask but my personal definition of SEO starts with content, an SEO should work with marketing and sales people to find out who our customers are, who should be visiting our website and what they are looking for, what are they trying to to achieve and how does that fit with what we want to do either we want to sell a product or we want to promote an event or something like that so we have to figure out what we want in terms of content what it is that people want from us that we can deliver on our site website and then they should also talk to product owners and business stakeholders and figure out what the broader strategy is here is what we're looking for we're looking for subscriptions we're looking for repeat readers we're looking for people to buy products what we're trying to do is something very strategic now great that's great Martin but what does it matter to me as a web developer this is s marketing and sales and business stakeholders expect there is a third thing there is a third important pillar and that is technology I think a good SEO should also be able to understand what is happening on their pages and what technology decisions are being made or are being have taken that led to the situation in which it finds itself.
martin splitt technical seo 101 for web developers
They should be testing and monitoring. pray your site in terms of how it is performing in the search engines and then give you solid and helpful feedback and help you make the right decisions and make the right investments who here is interested in web performance who here is happy with the performance of your business web performance here prioritized to optimize web performance sees that's the problem and I think because SEO works and understands the strategy and the content side of things and they work with these other stakeholders that's great it would be for us web

developers

if it's like our website is very slow we need to fix that and SEO goes yes and here is the financial reason why and here is the business reason why and that is why we are not reaching our business goals so that they can be our allies and we can be theirs, so I think this is fantastic because it means that we can and should work along with SEOs as well as they should work with us they don't have to be developers don't worry you guys can't do that I trust you all will be great web developers however they can help you if you know how to monitor testing and give you feedback on the things they see, how about you implement something, how nice would it be to know it's not?
You will see your search engine results drop like you are leaving the search engine and you are not getting more people on your website and that is a problem. This can be avoided with an SEO helping you test it before it goes live and then you can fix it maybe even if they are in the planning session they could have said well wait a minute there is something I heard and saw let me find you the article or the video or blog post that helps you fix this so good SEO supports us and we can help you and this talk is more or less about the tech side like the other things but let me just say one thing before we get in on the technical part on that side I think SEO on the ide technique without looking at the content and the strategy is just a chocolate ice cream emoji a tag of no you know it's a bit useless to make you polish a turd if you have a content terrible none of the optimizations on the technical side will go that's i'll help you if your strategy doesn't make sense for your business none of the optimizations on the technical side will help and let me give you an example lets say my toast ra messed up I'm German I eat breakfast and I like proper breakfast and unlike a proper German I'm probably really into toast too and you know it's like we have good bread but we also like to toast things now my toaster broke, so i need a new toaster so i go to google and search for new toasters now i guess i come across this website what is this?
Well it's all about hot cakes whatever it is and the highlight on this website is this header that says clever simple beautiful which doesn't mean anything good so I still don't know what this is. i'm the age it looks less like a toaster maybe it's a toaster core i don't know so i read the rest it will interrupt your breakfast i don't want my breakfast to be interrupted i want it calm and quiet and tasty and toasty so no and so it's like thermochemical food processing and I'm like what is what is that is cooking is frying is toasting what and then it's like the best invention since sliced ​​bread is like haha ​​yeah I still have no idea what this is so maybe I look the other things that are on this website and then I look at things like our philosophy.
I don't want a philosophy lesson. I want to toast your measure of hot bread. I don't even know what that hot bread thing is. click hot bath x10 and then i can join the movement i dont want to join a cult i wont toast why the hell who thought this was reasonable content and now i look at the same website with a slight change i need a toaster the highlight says the fastest toaster yeah this is probably a good page i'm kind of here you'll never burn your toast again yeah heck yeah how often did my old toaster burn my toast when it wasn't in the kitchen because it wouldn't rise and then it was a mess and it would make me angry and interrupt my breakfast you know what I didn't want to happen and give me a quicker toast which is great because I usually get up a little later than I should you know it's kind of convenient if that thing really toasts the fastest thing and trying to toast in a toaster phase so toast toast making a toaster face is probably what makes all this stuff great but maybe I'm Very committed, you know, so maybe I'm not ready to commit to buying this specific toaster.
So how do I know which toaster is the right toaster for me? It will be a good companion in my breakfasts from now on. I don't know but conveniently they have how to choose a toaster section so I can figure out how should I choose my toaster what critical criteria do I look at and co Conveniently they not only have this one they have other toasters as well so I can compare and once I know what I want to commit, I can buy a toaster. Similar website. Probably the same technical base. Very different content. Very different results.
The website helps me buy a new toaster, the other one joins the movement. I don't know what that is, but I don't want any of that. Germans joining the movements is not a good thing I think anyway so let's talk technology and conveniently we don't need a helmet or safety glasses or safety gloves either so we can just figure out how we can do things ok and to do that we could start by figuring out how a page actually gets into a search engine like i said i can't speak for all search engines but i know how google search works so we'll see how google search does and we use this thing called google bot and it starts with a list of urls that we call the crock you so we have a list of urls and we take a url from that t list and then we basically do an HTTP request to get the HTML that's it what we call crawling, that's the first step of the process and we basically start by making this HTTP request by taking the HTML and then we process it and three things happen when we process the The first thing is that m we'll go through the html to find links with urls because we can requeue them so the next free crawler can make the same process happen there so it's like optimization we already do once sorry once After we have done this optimization, the next thing is to look at the content.
What is this page about? It's about toasting my toaster. toaster phase and how to choose a toaster something like that so we put these things in the index so someone looking for toasters can find a list of urls from our index that contains stuff about toasters that's a quick search ex cool mechanism that's very okay but there's one thing here remember I say let's make an HTTP request and get the HTML which is literally what you would do with curl so you just take we don't use curl but basically that's what happens we get the HTML, but in a single page app like react angular view whatever we don't really have that much content to put into the index we just load our JavaScript, whoops we know that's why we put the HTML in a queue. we also put the html in the rendering queue because we have to know how to render your page now that the web is big google knows more about search google knows more than 130 trillion pages so obviously we can't open 130 trillion tabs of the one-time browser. so we have to stagger that a little bit and we do it using this queue mechanism and once we have the resources available it starts a service called the web render service the proxy render service is basically a headless chrome that in actually opens your page and actually renders it and runs all the javascript in the process once it's done we get a new HTML which we feed in to process.
Whoops, sorry, we have some new HTML that we put into processing and then we can search for links again. and then we can also look at the content that was generated by JavaScript and put that in the index once things are in the index if i search for toasters sorting happens sorting means we look at everything for this topic in the index and sort it and use there so many factors to do that there are so many things in there that it's really very difficult for a user to figure out why something ranked higher than other things, but basically we try to figure out what is the best result for this specific user or this situation generally for this particular query I'm asking because it's a difference if I'm asking for the cheapest toaster or the fastest toaster or a toaster comparison or buying a toaster there are different things that might be better on different sites er than others for these different queries , we have to classify them somehow, classification is a whole different can of worms.
I'm not going to open that up, so the rest of the talk will focus on the first three stages, crawling, rendering, and indexing that we're in. I'm not going to talk about ranking today, so I'm not going to talk about ranking factors or any of the magic thatit happens in classification of very different topics okay great so now we've discussed this and we know we can do cool stuff and we actually announced on google i/o that the google part is now evergreen which means that we've recently updated the Google bot to run Chrome 74, which is the current stable Chrome, but we also make sure that we'll always be up to date within a couple of weeks of a stable Chrome release, so you no longer worry about what kind of version Googlebot runs.
We're continually testing these new versions before rolling them out to small sets of URLs to make sure our indexing infrastructure is working properly, but if you'd like more information, check out the blog post I wrote in that there's also a video of the debriefing session. i/o where we go into a lot more the details on these things are great so googlebot is evergreen which means we can assume that if it works in our browser and it probably works in googlebot as well that's good news so this HTML will be will run with JavaScript and render your content, we can index this content. great, but as you know, as developers, we make mistakes, and sometimes these mistakes are small mistakes with big consequences, right?
I think they were like some things where someone made a typo somewhere and then an entire financial trading company went bust. These things happen and they can happen with our websites too so you made a ton you can make a little mistake and then it has an impact that you wouldn't want to see if your SEO or if you are monitoring your pages using the tools we provide like console mobile friendly search or test you have a good chance of spotting them but you know they will just give you an example it's me flying a glider i learned how to do it but here i do it one little mistake one little mistake and boom that can help you happen to you and that can happen with Googlebot too, we can't protect you from everything, mistakes happen in this case, you realize I'm holding my arms like this. then it would have been flying this way.
It was flying towards my face. Good job my man. So how do you detect these things and how do you handle them? Let's say you look at your server logs and discover hmm Googlebot because Google BOTS tells you in the user agent string that it is Googlebot Googlebot doesn't actually go to some of my pages some of my products aren't there some of my new stories they're not there some of my images aren't there whatever some things are missing or you search your site like you google and see that some parts of your site aren't actually present so the first question I usually ask when that happens it's how links are made and i can't believe in 2019 i have to talk about this but here we are people are still making this mistake so i'll talk about links with you this is the link the well linked linked item has an H reference and that href doesn't have a url I can go to great now if it's a signals page app probably intercepts the navigation prevents the page from refreshing and basically caly it uses Ajax like xhr or fetch to get the data from the backend that's cool that's ok because it still has a url i can go to all cool this isn't so googlebot and other crawlers don't click your stuff we look for one URL that doesn't have a URL and then you could say oh I'm smart I'm going to play with you give you a URL to go to no that doesn't really go anywhere that's not good oh but this is a URL is it?
TRUE? content is a link if it does something else when clicked great then its a well placed button but if it takes me somewhere else googlebot and other crawlers dont click your stuff so no its not a good link and then as if he knew No Oh, chin smack, don't do these things near a Buddha, just use the first two. Be ok everyone else mm-hmm ok that's the point I want you to take away but I can't believe I have to talk about this but ok now you got it Google says don't do that it's so ah. well anyway also mm-hmm when i say these links go to urls look at your urls very carefully so here we have two examples one has a host and a route call and then the other has a route hostname and a section fragment identifier if I have a very long page I would say the Wikipedia article on Jam.
I don't even know if that exists or if it's long, but let's say you have a very long article on Jam, the history of Jam for a long time. popular flavors different companies that make it 2015 jam wars i don't know something like that and you can use snippets to identify which section you are interested in but the crawlers don't care because if i look up the jam history i want to go to this page i want to go to the same page i search for popular flavors of jam so we ignore them stuff and that's been fine until single page apps were initially introduced because the only way to know that content is to change without anything triggering a navigation and let's get a javascript event it was actually the history sorry the hash change event so what? what we did is we had bindings to different hashes and these would basically just cause an event which we can listen to and then we can change the content using ajax cor cool but that's a hack originally this was never intended to work that way so that we like to exploit an implementation detail rather than the standard one and since then we have ace 2 api the history api gives us the ability to have clean urls that just work and when i say just work just work in internet explorer if you're using Opera Mini on a very similar low-end device or if you're on a type of computer running IE 10 or IE 8 they won't be very fast, so I'm assuming a page refresh that you know page refresh is better than wait for this very slow computer to run the javascript to make the change i just want the content and this works fine just use the history api most frameworks do n by default others allow you to switch for that switch to it don't use or trust url fragments and then you can use something like search console and you can check your coverage report which tells you what pages are in search and Google search index and I could say yes it was crawled that's great I mean sorry it was discovered so the links and snippet urls are not my problem and they were discovered but not indexed at this point, what does that mean? it means you're in the crawl queue that we have I haven't crawled this page yet it might p persist for a while, it might go away quickly but it might persist for a while, why is that because of the crawl budget?
Well, what is the crawl budget? pages the second is how often we need to crawl your pages and re-crawl your pages which is called crawl demand now let's look at the crawl rate for a second crawl rate is the symptom of the problem or the challenge we have to master i.e. we want to crawl your pages as fast as possible without harming your users or your servers so imagine you have a million products and we discover a million urls and say yeah this is great ok it's like grabbing them all and that could be fine, but what if your web server is a Raspberry Pi on someone's desktop?
It shouldn't necessarily do that, but it knows we'd probably bring down their web server, so what we do is crawl with a certain amount and look at things. ke response time and response code here your service says all is well Fast response 299 milliseconds and we can go with 300 requests per second so maybe we can increase it a bit ah server down maybe this is not good idea we could actually take a step back but let's say we'd bet and we'd like to try it an even bigger amount of crawl and your server won't screw this up like what the hell and we say oh sorry we'd like to crawl a little bit less don't worry about it sorry for the yelling so we look at a bunch of things and try to figure out how much we can crawl you can also use the search console to tell us not to crawl too much you can say like oh there are offers from Black Friday they're all on our website just crawl a hundred pages a second or something and then you can tell us not to review this which also works but this has nothing to do with ca quality of your website don't worry about that it's ok not low crawl but it doesn't hurt your rankings it doesn't hurt your indexing it just means we're not going to update the content as fast in our index but that's about it so it doesn't necessarily matter also the crawl demand we look at things like this the really popular page is it like an internet login page or is it really like something that a lot of people link to organically if you buy links that don't count sorry so we look at the organic links we look at things like how often does this show up and look at how well it usually ranks and then we realize this is actually a pretty good page we should probably go back but is that true or always true, I know that a Wikipedia article might not change that it could often change every couple of days or maybe even a couple every two weeks, so we also look at how current it is. ualized is this page, when was it last updated, how often is it updated, we keep track of that like, oh, this page hasn't been updated in five years. but now it's updated and then updated again a week later, like maybe we should review every couple of weeks and then if that doesn't happen again we like to go back a little further, this has nothing to do with nothing to say. about quality or if your page ranks well it doesn't matter what really matters here is that we're trying not to kill your page and we're trying to make the right decisions and how often we crawl your stuff a news page with content that changes every two weeks we could crawl a little more often than a page on the history of jam the history of jam is not that exciting i think maybe i'm wrong to change my mind and also what is burial to understand with what budget it is they are not just the pages we crawl, are also the resources attached to them, so if you have a page with ten images and the stylesheet, we find your page, find the stylesheet, and find all ten images, the same goes for requests from Ajax. and Ajax asks for ts counter towards your crawl budget because we're still calling a server somewhere so hmm however we do caching for get requests so lets say you have two pages with the same css but different images , one image each, we go to the first page we crawl or look for the style sheet we look for the image, we go to the second page, we use the cache for the style sheet because we already have it and it hasn't expired since and then we do the other image, so resource count matters, but you can only cache get requests if you make post requests from your api arena with an xhr.
We will not detect them. We'll also crawl content you might not want in search and we might also call things that are actually duplicates. the content or the same page is accessible through multiple URLs. I'll talk about that in a second. One other thing to note our url parameters. If you're using url parameters instead of routes, that's perfectly fine, but if you have url parameters that appear. in links that don't change the content of the website you want to tell us that and I'll explain in a second why also soft bugs if you have an error condition you should tell us that in the HTTP status code because we're considering that's ok if you want to get more about crawl budget in general or how to optimize it we have a great blog post and another blog post linked to that and where you can learn more but let's talk about duplicate content for a second sorry will you? take a picture of this because i saw some phones going up anyway one two three four missing so lets say you have a document rating website that has pictures of dogs and people might like to rate or rate or comment or something you you have a best dog of the day or of the week and then you have the individual dog pages today.
Leica is top dog, so / top dog actually shows the likes page as we do, but also cuts out the dogs that like our page shows any day. you could do to help us well what I what you could do is know that we are crawling both pages and we are pulling one so you can tell us that you know what is the same as this other page and then if we crawl the top dog first if we see as the canonical is this and we're like ok ok we don't track the other one because we know it's the same very good thank you very much you can save a request which is pretty good if you have manypages that might be specifically good can you tell us what you think the canonical is the url we should be using for this content but we may not always use it so thanks for the hint but sometimes you find that that's not exactly what we need or what you want and then we choose a different canonical that's not a problem unless we choose a completely wrong canonical then you can totally tell us or use the public support channels we have but normally it's stuff like german retailer website and swiss retailer website both written in german have the same content but one is f dot CH bonus a dot d e and then sometimes companies tell us CH is the canonical and de is the canonical but they have the same content so we think they are the same we have different entry points here so for people searching in Switzerland we can still show the CH domain but d We'll go with the canonical being German, for example, because the market is bigger and there are probably more links and signals that we get from that. don't worry about it but it's good to give us this hint too if you have content you don't want to end up in search let's say I have a really stupid high school photo on my website in a /private/ Martin Schmidt high school photo dot JPEG I don't want this to be tracked so I can use a robots.txt file on my server to tell us not to track this and that's great.
I can say don't put this, don't crawl this, but if somebody else links to it and we index and crawl this page, then look how Martin is a link Martin plays a high school picture to this particular URL and we're like okay, what we put it in the crawl queue and then before we crawl it we think oh we can't crawl this but we have the information that this is a high school photo of Martin so we could still put it in the index because it still could be helpful, but here's a way to prevent that from happening to you you can use an HTTP status code a header sorry it's not a status code an HTTP header in the header of the X robots tag to tell us not to index this and you can also put it in a HTML you can tell us not to index this page the HTML tag and HTTP HD header are pretty messy if your bot is in this then we'll never see them so we want to be careful with your s robots in general be careful with your bots some people think they can use it to optimize their crawl budget then get too excited so this page should have cats but if you look at this there are no cats here it's just a blank empty page.
I check it out, I see that makes an API request because it's a cl The client-side rendered app makes this API request and doesn't find it sorry it finds the robots.txt file and the robots it sees don't send API requests for you sir so we can't get the api data be careful. with your robots.txt file, this tool, by the way, is called a mobile-friendliness test, it's fantastic, it not only tells you if your page is mobile-friendly, but also gives you information about page load and it gives you a javascript error so that's kind of like Great now let's talk about your L parameters so this is a specific cat url and we can track that it's perfectly fine no problem but what about with those same two cats, but is there something that adds a timestamp and then is there something that adds the session? identifier which could be like someone posted this from their own europe while online or something and now we find this url and we'll crawl it.
What can you do to help us not track this unnecessarily? us that this is just the same thing and it redirects to the page without this url parameter and then we'll figure out eventually we'll figure it out or this url parameter doesn't matter and you'll be fine now let's talk about smooth arrows smooth arrows are tricky can happen with a bunch of different things and can also lead to what we call infinite crawlspaces so I go to the url which doesn't exist but it's a single page app so the server only serves index.html and JavaScript. and it says yes whatever here you go and then I see an error message ok ok well no because the service said this page is ok so Auto safe bye and that doesn't make us happy , TRUE?
Googlebot isn't exactly excited about this, so yeah, and now imagine you have a page that has a pagination error, you have a link to the next page, and that just increments the counter and scales infinitely, but your server says yes. , this is ok and then it shows an empty page so we would start with like page 1 ok see the link to page 2 ok see the link to page 3 ok and now we don't have any more cats but we see the link to board 4 and your server says ok we see the link to page 5 you say ok not good thats not a good idea but how do you solve this in a single page application?
Are you screwed now? No, it's not the first option, it actually leads to things like this we also have error detection for this, we try to catch this before it happens, but sometimes it happens, sometimes we don't catch it, and then this ends up happening. The only way to fix this is by redirecting us if you know of your URL to try this. to fetch the dog, the dog doesn't exist, that's fine, no problem, we'll just redirect to a page where we know the server is responding with a 404, so the bar not found will give us a 404 and we're like ok this is a redirect from this other page so we are tracking less or if we find out after a couple of years and all the links to this are gone then we will stop tracking this, you can also use a meta robots tag , so here we have a meta robots tag somewhere and it says everyone go ahead have fun and once we figure it out this page doesn't exist we change it to say don't index this and now you're wondering ha ha that's a interesting way to do it.
I know this exists and could be a good solution right? It is not because it is not due to our channeling. Remember we took the URL. We get the HTML which now has no index in its rendering. Oh this is not an index so I can just continue to the next url because this doesn't want to be in the index hmm that means our JavaScript never got executed so it never got a chance to remove the index so i removed all the pages from the index now good job another things that can go wrong is when you do things like this let's say i have a home page with the gdpr warning and the cookie policy and the privacy policy and what not and you're basically getting the user to click accept and then you set a cookie that the user accepted and then when the user goes to this news story on your website or this blog post then you check if this deal has happened and if not , it just redirects you to the home page and asks them to accept and set the cookie and then they can click again.
The problem with this is that Googlebot will get stopped here because it's going to be in this redirect and we're going to say oh so this page doesn't actually exist or doesn't exist anymore and now it's just this front page that's weird, yeah, and that's because googlebot doesn't have any state besides cache so we're not using cookies ok you can write to cookies but we'll clear them before the next crawler happens so no cookies no local storage , no session storage, no TV index, it has all these interfaces but you can't use them through the page they load correctly, so if you write something to the index so it's at the beginning of the load of your JavaScript and then read it, it will work, but it won't if you want, go to the following url and then to the crawler. picks it up and then runs it because the cookies and everything else will have been cleared in between and it makes sense that this isn't a bug if you think about it imagine a user searches for something and finds the new story as a search result clicks but it lands on your home page it says yes to the cookie and I was like where is this article now so instead what I should do is make this cookie appear on every page where the cookie hasn't been set yet .
It will be fine to deal with the cookie popup if you do it right, but the user will have a better experience because they will come to your page and see that the cookie popup says yes of course, and then they can read the article without having to stop. navigating through your home page you also want to use the Redetection feature because even though there are a ton of features present it doesn't mean they always like to work or work properly or are actually present you know just because you have a nail doesn't mean you also have a hammer to hammer it into the wall.
I need to make sure I have the hammer in the other hand before I use it right but that can sometimes go a little wrong so I'm actually an example so we check if this browser supports geolocation that's great so we load local content. for me so if this is again a new site i might load new stories from russia now and back in switzerland it will load swiss news if my browser doesn't support your location ok we just load like the global news great however this API generates a permission popup which I can decline and sometimes on one of my older phones the GPS stopped working so it never actually got a GPS location and timed out .
I wouldn't get any content here because my browser says yes. Geolocation is s supported, but then error conditions occur and I don't actually get the content. Googlebot will reject these permission requests. What's the point of giving us like the microphone axis or the webcam axis in Googlebot? How would you like to see our data center? that's not going to happen so what you need to do is always look for error conditions and handle them correctly in this case if the geolocation exists but fails we also load the alt content much better everyone gets content all the time if you want to get more information about specific features of Googlebot, where features have limited support or are not supported, we have put together a guide that walks you through the steps to figure out what is going on so that you can more easily try to troubleshoot your issues too you want to make sure that users see your page in the best light possible, so if I'm looking for an apple pie recipe and all I get is Barbara's baking blog 20 times, I'm like, but what's the recipe, too we have this like snippet descriptions these are called meta descriptions or snippets as we call them sometimes and you can give them per page and then i know which is fine, then cupcakes, I don't care for brownies. i don't care about apple pie that's what i care about you don't have to write this that's what your content writers, copywriters and sometimes also seo are good at optimizing but you have to make sure it has a foundation Solid technique for providing them and the way to do it in react for example is react hull install that addon package bundle and then you can use your page component properties to populate the title and meta descriptions and other meta tags so in this case we give it a useful title and a useful description let's say like Barbara's apple pie recipe this is the apple pie recipe my grandmother used and it's really easy to make quick and fantastic and everyone loves it love it great that's all i want to click on that result i'm hungry you might notice that in angular you have the built in title and meta services they do the same thing as in react just give it the properties you need to create a style and meta fragment and in view you use the view mera package to do the same thing that's great and if you want to learn more about these things we have a video series called the JavaScript SEO series at our youtube channel. which is about these and other things we also talked about tests and essential tips and the different frameworks and all that kind of stuff we also talked about a concept I'll discuss later great now we talked a lot about JavaScript and how Google search is processed but the reality it's that not all crawlers do this, there are other search engines and then there are social media and other apps that crawl your page when you share a link but don't run javascript on your page, so how do you handle that?
Maybe consider something like server side rendering. HTML, as it comes with client-side rendering, you have to get the HTML and then, voila, you have to download the JavaScript, parse it and run it, and then it outputs more years. I don't want to do that and since you lose all of your JavaScript there is something called hydration, most frameworks offer that one way or another which means your JavaScript becomes optional so you get the HTML very fast and then once you knowruns the JavaScript it actually upgrades to the regular single page app and client side app if you don't want to do that because you know that doing it on every request is a pretty high cost that you incur you might want to do a prerendering that makes sense if you have a page like a blog or marketing page where you know when the content on my blog changes the content only changes if I write a new blog post or edit an existing one so I know it's precisely what i need to re-render it and then you can use something like a headless browser for example you can use puppeteer or whatever service will do it for you or really rewrite your app slightly in universal javascript and run the javascript on the server side which works just as well.
If you don't want to make changes to your front-end, you can also use a solution called dynamic rendering, it's in the video series as well, We'll talk about that in a second, but let's see how the server side works. the render would work in react so here i am using next js' which is a higher level framework that uses react components but basically pre-renders it to apologize so each site renders it for me on the fly, so it's nice that it works with the ings as now info and all that kind of cool stuff and this is a lot of fun to work with and it's actually quite successful there was another talk at the same time about the next JS so sorry to have you here but definitely check out the videos once they are loaded if you want to react before rendering there is a thing called react instant which uses a headless chrome to crawl my different pages and generate the html for me which i can then deploy to any static hosting which is also well and react instant you also have the option to hydrate you would have to change your app component a bit to hydrate or render the application depending if you are server side or browser dynamic rendering on the other hand is this solution where your server looks at the user agents and if they look like a crawler then you would pass it to a rendering service which will would like to know, become a customer I guess or use your own instance of Tron or use as a puppeteer to build your own thing or ghost Jas whatever works for you and you will generate static HTML and send it to crawlers but for your users because you want making sure everything works the way you developed it and is basically untouched for users browsers just giving them normal like normal client side or android we consider it a workaround because it requires a bit of effort and a little maintenance you have to deal with, you have a ton of complications related to caching and whatnot, but it gets you started, it gets you working. ajar with crawlers that Onix run JavaScript and can also help you with the problems you're having with your JavaScript and Googlebot very quickly, but it's a workaround because it doesn't give users any benefit.
Server-side rendering or pre-rendering is a longer-term solution and higher investment. yes but a longer term solution that helps you deliver your content faster to use this makes your users happier and more engaged if you want to learn more about dynamic rendering we write a blog post and the code lab and a documentation page on that so if you want to try that give this link go now all is well but i think it's time we wrap up and enjoy the coffee break or question session And answers. So, in closing, I think you should use tools like the mobile-friendly test or the search console to test how well your pages perform in search.
These are our tools to provide you with the real data. They're not like making stuff up don't worry about it and they're free and they're a fantastic search console they even send you an email if there's a problem so if we find a problem we'll let you know if you're registered if we know it's the owner of this domain we will let you know server side rendering and pre rendering as i said our fantastic long term investment you should definitely consider if you are not using it once again. I recommend Natalia's talk on the next Jas, it's probably a really good resource too if you're using angular you want to look at angular Universal and if you're using View Jas then you might as well check out the following Jas, generally speaking if it helps crawlers Understanding your pages will be fine in most cases, it will only work if you write semantic HTML like proper links. and stuff, you can add structured data to tell us more what something is really about and basically help us with robots.txt and meta tags to figure out what this page is about and then you'll have a lot of fun. it's pretty safe if you want to learn more we wrote a bunch of guides to help you there's also getting started guides on this page for developers it was like a developer guide to search or something that's fantastic my coworker Lizzy wrote most of it. and it's very very good you can also watch videos if you prefer videos javascript seo videos are online on our youtube channel youtube.com slash google webmasters you can also ask us questions every two weeks we have office hours office hours at line so you can join a hangout with us and ask us questions and we'll be happy to answer them those hangouts tend to be pretty generic so it's not just technical SEO it's also normal SEO but you might learn a thing or two , so that's kind of cool and you might find out who's hanging out there is someone who likes has the questions that I have and now I got an answer so maybe they can help us but if you have specific questions JavaScript, we have a mailing list for you. you can join and ask your javascript questions there and that's like just focus on javascript sites you can also stay updated with us on our blog so we have the webmaster blog we keep informed and also post announcements or just follow us on twitter like that that with all said like all friends spasiba for Shia and have a nice day oh oh Seba Martin what I would like to speak for the conversation maybe in Russian oh you don't want to join me for a conversation well it's not like you have a choice you know , this was very exciting, insightful, thanks so much for all the tips and especially, I really didn't know that Googlebot doesn't click and doesn't process data and that's something that's pretty useful to know so I think in However it would be useful to know if each piece of content is equally viable for Google when it indexes it, for example, if there are some things that are generated by a JavaScript and there is something that is already static and is left in HTML .
I think there was an article maybe even in the video series I mentioned once, it might take longer to index the JavaScript generated content, so if you have a breaking news story that you want to show up in search results right away that it's probably better to use server-side rendering, that's true, that's true, so we're working on fixing that quality issue, but it's still something we have to do, like I said in the process, right? We parse the HTML and if we already have content there, we index it so it lands in the index faster. it means we are treating it as less important or something it doesn't say anything about the quality or how we are treating it in the index it just means it takes longer to get into the index how much lag do we have? talking about here like catechins minutes are already minutes they can be seconds it can be ours again theoretically be days but the problem is that some people say that they are weeks and months and the problem is that you don't see where the delay comes from that it can be a crawl delay because as I said we have a crawl budget and we have crawl demands so if it's a page that only gets crawled once a month and it just missed the crawl and then you updated something with work as part of the content that only gets generated with javis commands for this content to schwaben we're like yeah it would have taken a month for the html content to show up because i just missed my window that's interesting also have a couple of questions here like one of them which has been quite popular you can call you can name a few things that really have a dramatic influence on search engines um search ranking like security HT TP yes Foreman probably the things that are really very important are sorry content your content should be good that's the first thing it has to be good.
I know that's not something that I know. If you observe the technical signs. If your site was hacked. removed also if you do some things like you have a virus and stock or there is a bitcoin miner on your page we are not going to show that embed so you can't do that anymore no one can do that sorry sorry can't use our infrastructure to mine bitcoin anymore but who knows but basically social security issues our big problem HTTP is more of a tie breaker so if we have two pages and one is HTTP the other isn't we could switch them . but it's not HTTP, it's important to your users and there's a trust token, but it's not one of the most important ranking factors, mobile friendliness is also very important because most people are coming from mobile now, but yes.
Web performance is important because in the end you want your users to engage and have the content fast and I definitely know we can't directly influence as developers but if you see stupid content like hot cakes x10 then talk to your SEO and talk to your marketing departments because sometimes SEOs have the same problem that we as developers have so they say we need to change this content and arrows like no I don't think so so I think this is ok but if developer is going too and it comes like what a suggestion what is this so you know there are more people pushing to fix the content and the important thing is okay we also have a question from Dennis and Demetri.
I look inside shadow root when the page. What about the index? What about web components? So with the new Evergreen Googlebot we have shadow dom support, negative shadow dom support and I think if I remember correctly that's ok as shadow dom content will be indexed by Googlebot but remember there are crawlers that don't run JavaScript. and you might not see the content of your Shadow Dom and also for composability it's a good idea to put critical content in the Light Dom so you can override it and not modify it by wrapping it in more components enough so I'd say it would.
I'm still standing by my earlier statement from a couple of months ago that you should put it in the lightweight DOM and use the shadow dom to encapsulate the implementation details instead of the content mm-hmm It's also interesting to see a lot of things like you know that the cities are generators that become a real thing that you'll pre-render and just commission as much as you can to have a nice skeleton, yeah it's interesting that it's exactly what I wanted to type. of mention feels like we are moving full circle at this point and existence of dust let's say the cd ends if you put the content on the cd answers it also helps its just helps because things are faster usually ok if they're closer to the user which is what cd endpoints are mostly about and that's a fantastic way to make it faster than chrome 41 and what was the reason we stuck with it is like the technique was there because it didn't support the grid layout yeah it didn't support a lot of features yeah so the reason for that was maybe you should also explain like this d or write we started good so the situation before i/o was we were running chrome 41 rendering service so we have updated it so in chrome 74 dont worry but you will hear seo s or people sometimes even developers often go like what it is now today i hear web developers say oh what i just found out chrome runs google is running chrome 41 for rendering and i say yes but it hasn't changed since i oh god i work so you'll hear that a few times like oh but it's using chrome 41 and you can say not really there's a blog post from google that says that's not true anymore and the reason for that was we had chrome 41 in the past and it didn't have any api two- footed instrumentation happens so we couldn't use it so we had to write a lot of custom code to get data from the render we did then the team said ok we can update it, so let's say like chrome 50 something but then we run into the exact sameproblem because it takes us like half a year or a year I don't know how long it takes code from one chrome that comes back to the next and then like chrome keeps running ahead of us so we need to figure something out and then they decided to work together with another team and that's the team that brought us puppeteer and the dev tools api basically, so the effluence integration is something that our rendering team helped with and that was the strategy that was to take that on the road to be able to use it instead of custom code. so once it landed in chrome and i think it was like a year or so ago that the dev tools api landed in chrome, that was the point where they were able to start building or rebuilding the code that they used to use these API to extract data and so they still have a special API on top of it but most of it is now like in the public source code so it's easier for us to update and that only took a couple of time ok and just came up one more question.
To lex, so when it comes to single page apps, react, view, etc, what are the common things we need to look out for, like common mistakes people make all the time, common mistakes because they still i need to talk to the framework teams at the duck about the documentation the documentation neglects the meta description and the title tags it's like you have this html and now we forgot about it and now we do all this cool stuff here and no one talks about the fact that now all your pages have the same title and meta description which isn't great so it's like a piece of fruit in your hand that you want to fix first ok and then it's like performance optimization and making sure that your rendering actually works properly so you want to test this and then you see where the problems are it depends a lot ok ok quite a bit of time has been spent on search engine optimization in these days, all the resources, tools and techniques, and in each one, it was not a compliment. it wasn't it wasn't far I'm just now I mean we're trying to get as much documentation and developer hands as possible yeah that's great actually I think it is I mean I don't know maybe I'm wrong but it seems that over the last year or two there's been a lot of push to evangelize and explain the purpose and how it works and everything, so I'm still doing that, yeah thank you I'll do that.
Thanks Martin, can you be with me? us today

If you have any copyright issue, please Contact