#232 AVO Directory. SEO basics. Friendly ID, Meta Tags.

So now our director looks not bad here. I'm just looking at all the listings and, uh, just from having a URL, nothing else, we take screenshots of the landing pages of these websites. We extract the logos, the titles, the descriptions, let's, uh, make the app more usable. And, uh, first of all, we can start with the search. So at the moment, we can search only by the, uh, URL, so I can type HTTP, whatever. I can type RB ui, UCI find this website. And we can search by internet except the URL. We would like to also search by the title or description. So, uh, screen costs, you see, nothing is found. Now. Uh, the title and the description, they're both stored inside the payload. Uh, Jason o attribute of the listing model. And, uh, the easiest way to make it, uh, searchable would be create a ran here in the listing model. Raneer payload, uh, do or scale payload. And, uh, now I need to say that the payload is also going to be, uh, searchable here. Now, going to our listing resource in avo. Here we have search by your L Contains, and we'll also have, uh, search by, uh, payload contains. So payload contains. Let's move this al in your line. Okay. Uh, let's see if, uh, it works. So I'm going to refresh, I will search. And, uh, you see it found these two results because both of them have, uh, the word screen, uh, either in the title or the description. So now we search not only by the URL, but also the title or description looks good. Let's actually save the change, uh, search by JSO payload. Okay, this is not bad, but, uh, you see, currently we display this H-G-T-P-S, uh, uh, everywhere. And it looks, uh, it looks very not, uh, beautiful. So let's, uh, make it better. And here you see, we also have the whole HGPS, whatever we want, just the, uh, the domain name. Nothing else, don't want, uh, all the rubbish around. So at the moment in the resource, the title is the URL. We could make it the ID if make the title to be ID here. So you have the ID of the record here, have the ID of the record. And, uh, in the search, we just search, uh, the results as ideas. So instead, they're going to have a computed field Here. Let's, uh, make it, uh, a clean URL. Let's define clean URL in our model. And, uh, it is going to be the URL without, uh, HTPS. So URL Gs sub, uh, remove HTPS remove, uh, ww if there is some. Uh, let's see if, uh, it makes it look better. So, um, here you see it looks, uh, better. Let's now, uh, maybe remove the, uh, trailing, uh, slash um, how can GitHub co pallet help us, um, remove, uh, trailing at the and Okay. Dot. Okay. Looks, uh, much better. So now the titles are styled in a much better way. Let's also save this, uh, change. So, uh, resource title, computed resource title, not just attribute value. Okay, looks, uh, good. Now going further, you see this is going to be, uh, user facing application. And if you don't want, uh, everybody to know the ideas of all the records in our application, we want to have, uh, friendly ideas. Like, for example, if you go to Super ails website, you visit any record here, you see, you don't see the ID of the record, you see the, uh, friendly id. So, uh, a readable ID that explains what this record is about. Uh, they're going to use the gem friendly id. And actually AVO already has, uh, an integration with the, uh, friend id. I think. Let's see. Uh, yes, brand gem. Yeah. So, uh, there is an example of how we can, uh, make these, uh, URLs look nice using the friendly ID gem. So first of all, let's install the GEM friendly ID bundle at brandley id. Let's look at the docs of the gem. Okay? Uh, yeah, the run bundle, uh, error load. And Ruby, Ruby Jams. Interesting. Let's, uh, try doing it manually. Let's run bundle. Okay, uh, then we are going to add slug to, uh, our listings. Add slug to listings, slug, uh, unique. And we can, uh, also do it for our categories. Let's see our migrations. Okay, adding slug to listings, adding slug to categories, rails, db, migrate. Uh, next, uh, rails generate friendly id. Um, let's see what it gives us. So it gives us the friendly id, slacks migration. Okay, now let's run Rails to be migrate. Uh, adding friendly ID to our records. Let's see how it is, uh, explained in avo. So in the user model, we extend front ID and use, uh, slog. Let's go to our listing model. And here I will, uh, extend front id, friendly id, uh, URL, it is the like, main, uh, attribute on the listing. Use slog. And, uh, we're going to do something similar on our category. So friendly id, but category has the main attribute as a name use slog. Okay, going further in the friendly documentation, if we can just, uh, add the slugs to all our listings. So let's try open one listing rails Console listing. First you see slug as nil. Uh, now I will, uh, run, find each and save on all the listings. And, uh, it should update the slugs. So listing first, you see it has, uh, uh, slug looks, uh, better. Let's, uh, run the same on all the categories. So category, find each and save. Okay, let's, uh, now see our app. Uh, I'm going to try to refresh. You see, it has initialized listing friendly id, I think I need to restore the server. Okay, so, uh, I will open one listing. Uh, and you see, uh, the URL is set, uh, according to the front id. But, uh, we have this confined listing with this, uh, id. So we need to go again to, uh, the example in, uh, where was it? Yeah, here it is. And, uh, we need to satisfy record method. So, um, I think somewhere here on top of the lister source, We will say, uh, find drug method, find by slug, or find by, uh, id. Let's, uh, refresh. And wonderful, we found this listing. Let's go to all the listings. Open another listing. Okay, so it works. Now we have a friendly ID installed, and, uh, the users cannot also simply enumerate through the IDs. Let's just hide the IDs from our, uh, view. So here we have the ID field. We can just hide it completely from. Now on the listing on the category, actually for the category, we also want to add the, the same friend lady lines. And, uh, for category, we can also say that the title will be the name, title will be name. Okay, so here we have a category open. You see we have it in the UL. Looks good. Okay. So this is the basics of adding the gem friendly id. Let's, uh, save our changes. Okay, now, next step. Again, this is a internet facing website. And, uh, it doesn't require login. And uh, we want to make it searchable. We want it to all these links to be, uh, also shareable. Uh, so we need to update the metadata on, uh, our webpage. So you see in the head, we don't really have any meta keys except the title that isn't really a meta keys, the title of the tab. So we don't have any meta keys set, uh, on this page. And for example, if I go to super rails and open a video here, I have, uh, a lot of meta keys set to make, uh, it, uh, more searchable on the net. So like, uh, I have a open graph, uh, description, title, uh, images, Twitter cards, and so on. So let's add meta keys to our VO page. Now, how can we add the me keys to an other page? So, uh, the gem, uh, uh, vo uses, uh, meta tag gem. So it already is included together with ava. And if you have, have an example of, uh, extending, uh, actions inside an AVA controller. And, uh, we can actually use the same approach for, uh, certain meta tags inside the, our AWA views. So we have the gex that is already installed with VO and uh, actually found a specific, uh, pull request in 2021, where Adrian, uh, introduced, uh, Meditech into vo. And he have, uh, I think some controller actions. Let's see, a controller. Yeah, so he have controller actions where he's setting some meta text, and I think he defines, uh, default meta text somewhere. So yes, here in the layout file he says that default meta text. And, uh, here are some examples of using meta text in the controller as page title description keywords. And we can use the set meta tag. So, uh, you see, if we go to our controllers, whenever you generate, uh, a resource, you also generate, uh, inside the controllers other folder and empty controller for this, uh, resource. And, uh, let's try having deaf show in this controller. So, uh, I'm going to a listing. I will refresh the page and you see, uh, it doesn't work 'cause I'm overriding the other default to show. But if I type super, this is going to input everything from vo. So the page works. And, uh, now I can try to define some meta tag. So I can say, set meta tags, uh, description. Hello. Now let's refresh the page. Okay, so, uh, do we have the meta description? Yes, we have. Hello Seth. And I think we should have, uh, access to the record or to the resource description. There'll be, uh, record dot, uh, id, id, let's see if it works. Yeah, we got an arrow I think we need to make to stream. Okay, let's open the description. So we have the ID of this, uh, listing. Okay. Now we can, uh, set the description as the same, uh, description as it is on the official website. So we can do it, uh, record, uh, payload, dig, meta description. Uh, we can set the open graph image, uh, yeah, title image. Okay, let's, uh, see if it works. So, um, inspect element head, uh, og title og. Do we have image? Um, no. So we don't have the OG image. Maybe we need to get it from the listing. RB discover image for display. Let's save it folks. Yeah, we got an error. 'cause it has to be a URL. Oh yeah, maybe record at track. Let's save it folks. Now. Okay, so we have, uh, an attachment. Uh, it is not a URL. Uh, let's try making a URL. Uh, let's open the list in model. And, uh, instead of just having cover image, we'll want to have that, uh, URL for this cover image. Yeah, so we'll have just cover image URL. Let's save it folks. I refresh. And, uh, OG image. Yes, we have the URL. Let's try opening the URL. It does display the image. Okay, so that's, uh, basically it. We set the meta tags for our show action of, uh, uh, listing. Now it's going to be most searchable and more shareable around the web. So, uh, let's say, uh, set meta tags for listings. Okay?