Technical SEO tips for Vue.js by Martin Splitt

I like to talk about something that you might not know or might know I would love to hear feedback if this all is old news for you or if this is something that you actually haven't heard before um based on my work I basically see these problems or the things that I talk about I see them done wrong all the time so I'd rather talk about them when I say I see that at work what work is that so I'm a developer advocate here in Zurich at Google so I work in the office not far from here and I work in the web content ecosystem team so what does that mean basically I am here to help you be successful in search and make good websites that people can use and are happy to use and fight and a question I often get from developers specifically and I asked myself that before I started working was why should I care about search I kind of knew the answer but I think it's worth reiterating because if we are building websites I mean we're doing this for users right so if I build this fantastic website about cats and holy that's like cool cats this has a fantastic 90s our background and this has a hat and cool sunglasses so if I thought this website I don't do that I mean this website probably I do it for the fun of it but realistically if I do it professionally I want people to find my website and use my website I need users on my website so the question then becomes how do I get users because if I don't do anything just put my website online somewhere and this is easier than ever you can use now our site or search or give up pages or I don't know what else is there so many things you can literally just start on a short column or something like that you might see this you might see no one coming to your website that's not what we are making websites for it if this is a business then you will be very very sad and probably looking for a new job I mean leave is hiring so that's probably good very soon so the question then becomes how people find new websites if I make a product and it's the best product on the earth then how do I make sure that people are finding it well how do you find new websites you're probably not googling for the website specifically but you're googling for whatever the website offers right I mean the website was cool cats on either website with cute dogs I need a website that teaches me how scope slots work something like that so you are searching for something and then you're probably clicking on the search results and probably not on the last search result on the last page but probably in one of the first couple of search results so that brings me to the question how does Google actually index well how do we put your website or your web app into our search engine I think this is useful to understand what's happening in search and also to debunk some things that some people SEO oh did that come from sometimes tell you because there's a lot of misinformation out there so the regular flow is like this we have a queue with a bunch of URLs where we found them as a different topic this could be someone is linking to a URL then it goes in and we are crawling that other URL that it's linking to you we're putting this into the croc you or it's coming from a website that we happen to know and we know a lot of web sites already they CPU start with the seed of websites that we tend to know and then you can either submit websites as well or we find them and the first thing we do is we take one of these URLs from the big stash and the crawler goes and visits your website have you ever used like curl or W get or something that's what the crawler does it goes through your website and basically just downloads the HTML now with modern websites that's the only good strategy to just use that because your website's probably gonna look like HTML script tag slash HTML so we wouldn't see your content here so instead what we're doing is we are passing the raw as HTML on to the next stage in our pipeline this is the processing stage the processing stage does take a first look at the HTML because in this HTML if it's a classical website or if you're doing server side rendering we might already find other URLs because we are looking at links so basically we're looking at the link tags then we've got in and if we find any URLs from that at the same time we do two things one thing is we're putting the URL that we just found in the links or the multiple URLs that we found from the links into the croc hue for later crawling and at the same time we are putting the website into so the HTML that we've got into what we call the render queue eventually as we have resources available and this is going to be rendered so the render is basically it had this Chrome so we run a headless chromium instance it's not just a head as chromium and since it's a specific version of we call this the web rendering service it's a very specific version of chromium 41 so it's three years old so if it would be a child it could walk and talk now and probably gets to the Kinski soon um yes it's very very specific custom code in that one it doesn't support everything it's gone only one you can imagine es6 doesn't go so well right now but basically we can't render everything at one go because the web is pretty large in 2007 16 I think the numbers from 2016 we saw a hundred sixty trillion websites or web pages so we can't render everything in one go so we put this queue in between so that basically there's something that you might figure out at this point this is a queue and this is a queue queues mean waiting so that means just because we just saw someone linking to your website doesn't mean that we immediately starting this process right you might still have to wait a little bit of this cube we can't you everything crawl everything in the same goes here we once we have crowded we can't just start doing something like rendering we have to wait until we have the resources available so once we have rendered it the rendered HTML goes back to the processing stage and this is interesting because at this point the JavaScript has executed and we know what your website is about even if it's a JavaScript web app and that's great because we can then put this into the index so basically at this point we know that okay this has a bunch of images cats that's great it has some text as well describing word probably the best cat picture website ever and basically we now know that we have a website about cat images that we can put into the index and last but not least once someone types in cool cat pictures online or kitten corner or something like that fantastic cool cat with a hat and sunglasses and the last stage kicks in which is we are starting to rank it so we're looking at everything we've got in the index that might contain cool cat images or cats with hats and sunglasses and try to figure out which is the best one the last bit this ranking bit is a very very different process from the entire rest of it so don't worry too much about the ranking process it is very very specific there's over 200 ranking factors I can't name them but let's put it that way speed is one of them so how fast it your website respond and the rendering and crawling stage how how well does it speak to the index great so basically not every website even it can be the best website ever if it doesn't speak to the query so if my queries very specific hats with cats and sunglasses a cat picture website with fantastic cat pictures might not rank well for that query because it doesn't contain anything that says cat with hats and sunglasses doesn't mean that that other website is not good it's just not as good for this particular query so the ranking bid is like you least concerned the rest this entire process is a tricky one because things can go wrong cool so how do people get to my website because if I search for cool cat pictures I probably get like a zillion zillion trillion website search results so how can I make sure that my website gets picked now if I search for cute dog O's I might see something like this as a user user i1q dog or smite one as many as possible and I want the cutest dog URLs so I start looking at the search results and as a user I do something that Google wants to do as well and that's the ranking bits and pieces and also this will drive dependence so like let's say these all rank pretty well for this query because they are showing up in the three of search results but what do I do as a user so I probably say like okay I want the cutest and fluffiest and comedies dogs and poppers and looking at the information architecture here I probably started reading just these three lines these headings the links that will take me to something and I see like 40 of the cutest raffia sand companies poppers and dolls yes this is good news I like that it's 40 and it's the cutest and fluffiest and cumbias okay cool cutest argos on twitter that might just be a misleading name right this might be about anything I don't know if this is actually cute dog pictures or something and I don't know it's it's Twitter user family so I don't know then we have 21 enjoy those photos of dago's to put a smile on your face okay it's only 21 but maybe if they are better I'd be compelled so I want to make the decision between these two of them and maybe understand what this specifically is so I look at this meta description so this is the description snippet it doesn't have a length restriction but that doesn't mean that we're displaying everything that you are giving us doing you can specify this bit but if you try to us we're gonna happily throw it away and pick what we think is relevant from your website and also depending on the screen size and the user and the bandwidth and everything else we might show a little more or a little mess of it so give us something reasonable that make it as short as possible but don't worry too much about size restrictions take 300 characters 500 characters or hundred characters we will try to pick the most relevant bits from it using language processing so here's like it says 40 of the cutest dogs alive even the nice that means I could go there and hug them probably so that's fantastic and this is just like the loud nails tweets so I don't know if this is good or not now here we have like we recently asked subscribes to the buzz feed animals newsletter to submit pictures of their super cute pets but that might be something else for the photographer so I think this search result is probably the best searches are also if you have a date somewhere that tells us how fresh this result is this might be useful especially if you are like blogging or writing or something documentation might out date so that having a date somewhere in your content is definitely helpful now what does that mean for our UJS application and I don't comprehend why people are not doing some of these things but I'll mention them you probably want to use view mirror oh here's using it today see that's not all I pasted hands going up so who here does not like to raise their hand good so basically what you do is once you have human on your project for the components of views that you care about you can specify the midnight info method and give it the title that can come from some reactive data like props of data or computed or whatever and you can give us a description these two things are important the reason why I'm saying that is because they show up in search results if you don't give us something we might make it up and especially with the title that can sometimes go pretty wrong because we just have to make something up and you should control this information if you have a marketing department or a sales department and they do some SEO they might come around every other and ask you to like change these or even just set them so unfortunately then you have to install an external component but that's the situation that you are in another thing is make sure to use the history mode rather do not use hash or hashbang urls the reason for that is that like the fragment identifier hash the hash bang whatever you want to call it in your else is basically we use to abuse it because we didn't have any better ways of making single page applications but it's theoretically violating the standard the hash in a URL usually means that you jump to a specific piece of the content that is already on the page so if you are changing the hash and the content on the page changes that is against its standard and that was the only way to build single page applications like three years ago but I say three years ago we now have better ways and for one of them is the history API it does require to make sure that your server configuration is correctly set up but I think that's worth it if you are professionally doing this you're a professional developer so you know how to configure yourselves probably if you're not then talk to your ops department because they should know that so make sure that you're using proper your else is in history mode and it's okay to use that we have come to the point where even if an expert 11 does support it yes Internet Explorer 10 users might have like a page refresh but honestly if you are in Internet Explorer 10 or 8 or 6 Asia a lot of people are still on Internet Explorer 6 I believe or at least have been last year they get a page refresh but if you're using such an old browser then you're pretty happy to get a page refresh I guess same goes for reformed Opera Mini and these are people on resource constrained devices or resource constrained networks so they'd rather not run some JavaScript I'd rather have the page refresh of the battery so now let's say you have a website already because you're probably not starting from scratch how do i bug it how do i Deepak search for it because maybe someone from the marketing department comes and passes you the three it questions and says we can't use you reviewed as we can't use this we can use that because of search then you can tell them to bugger off if that's not true because you can debug things one of the easiest ways to like quickly do like your smoke test and see how you're doing is the mobile-friendly test you just plug in a URL and you get a result now the obvious thing that it does is it tells you if the page is mobile-friendly Dodd's in the name and but that's not the only thing that it does more interestingly it also shows you how Google is seeing the page there's still a bug and I still talk to the guy basically every week I write an email to a certain team within Google to fix that you can't scroll on that screenshot sorry that doesn't mean that your content isn't there this just shows you like okay yes my content does show up it's not a blank page it can happen especially if you ship either six untrusting transpires to the browsers that search this shows you a blank page that if you want to make doubly sure that your content is showing up you can also use the rendered HTML view that is literally what we get back from the renderer so this is what we are using for indexing this is not an approximation or some magic this is literally the HTML that we have seen in search and you can search through it you can say like okay so for instance my Meta Description is here that's good news my my title is here that is good news as well and then I could scroll and see like if my links look good and stuff like that so basically I can check if my content shows up and search that's pretty good if it shows up here you are pretty much safe right pretty much safe if you want to debug issues that say you see a blank page you can actually see all the JavaScript errors including stack traces so we give you that as well so you get that right there in the test it's no longer search console had a feature called fetch and render that gave you the screenshot the full page of screenshots so you quit squirrel yay but unfortunately it didn't give you any arrows so if you see a blank page you see a blank image and the other like and now what this this has JavaScript console log pretty much everything that you have in the regular browser console shows up in here that's pretty good another great tool that you can use is search console now search console shows a bunch of interesting data about your website but you don't necessarily want that public probably don't want to tell everyone how often your website shows up for a certain query so you have to verify your the way if you're using Google Analytics that it's very easy because you have already proved domain ownership to Google here's a bunch of other ways you can use a meta tag I think that HTTP header certain email features work as well and some other things so like you can basically verify for your domain and then you get an overview of how many pages of your website we have in the index how many pages we excluded from the index that can have many different reasons and how many errors happened and you also see some other data here interesting is also you have this URL inspection tool that was basically fetch and render it's not going to come back in the new search console this is going to be integrated into this you inspection tool it shows you if the URL that you're entering from your website is on Google so if we can be found if we index it when it has last been indexed when it has last been crawled and if it's not on the index wise it's not in the index what happened what went wrong there you see things like mobile usability issues here we probably also soon will show you the JavaScript errors here as well so basically this is your one-stop shop for debugging something that exists and you want to get some more deep insights you can see what we have in the index and for the test life URL there so basically if your URL is really fresh let's say you have your a blog post that just came out today and you want to see if it could be indexed it isn't indexed yet because it's in the queue probably but you want to check if it could be indexed you could use the test life URL that will show you if it can be indexed potentially once it is through the queue you also get analytics and that's maybe not that interesting unless it's like your private website or your really like the startup or someone in marketing because you can see what queries and we're used to make your website show up in search results how often where they clear how often were they where they're shown and on which average position where they've shown and then you can see patterns so here we see like this is probably weekly pattern on the weekends their traffic during the week there's less traffic that's often the case for blogs but if this would like go Duke at some point when it shouldn't and you know that something goes wrong has gone wrong you can probably deal with it it also sends you messages so this is really nice if we have seen like anomalies like let's say like 100 pages from your website disappear from the index you get an email like hey there's a significant drop in index coverage from your website is that something that you wanted because he just like removed a bunch of stuff that you no longer have on the website or was that an error so this is really really helpful because it proactively informs you you also get things like the links report and some other interesting things like mobile a few reports so you get like a bunch of data from this one another thing that is particularly important to me as being on that team is we are here to help my job is literally to make you more successful research and to help you build websites or web apps that can be found in search so we have a bunch of documentation there's more to come if you think that we are missing important documentation or you feel like there's like a huge misunderstanding somewhere let us know we are happy to to fix that but basically we have this documentation website out there and I think it's underrated we are having a bunch of information on videos on YouTube already we are making more videos to come especially there's an entire video series coming out hopefully this quarter on JavaScript SEO for all the major frameworks and in general so that's that's pretty interesting as well we have a forum if you have any questions or see any issues there's a bunch of people who are really really smart and have seen it all probably and we are also looking into this one so is the webmaster forum is your best bet to get some more insights into a specific problem case or way see like something make doesn't make sense and wanna hear what people think if people think that's problem or how to fix that the forum is their best bet and we do these offers are sometimes you do them in person so you can visit the office and talk to us in person face to face and if not then we make them happen via the internet you can dial in using hangouts YouTube then you can ask this questions there as well so to quickly recap please use view mirror to set title and meta descriptions properly because they are really important to make users understand that your website is the thing that they are looking for make sure to use the history route when you are using fuel powder because fragment URLs or hashbang urls are well supported in search engines in general use the mobile-friendly test for a quick check of your stuff and do have a look at search console because it does proactively inform you about things going wrong and if you have any questions don't read me a direct message saying like hey can you check my website because the answer is no I can't I can't check your website well I can do is I can have people in public so if you have a webmasters forum thread that's great for me because I a there's a lot of experts that will help you out of the box already and they are probably faster and smarter than I am and if not then I will probably look into them at some point because you guess what I have other things to do as well but basically webmaster forum is the best place to ask any questions or have insights for your website specifically mississippiana

Channel: Aleksej Dix

Views: 1,371

Keywords:

Id: m24Vc6NW8DA

Length: 22min 13sec (1333 seconds)

Published: Sat Jan 12 2019