One thing that people often forget to implement and even to test are social tags. So every website on the internet has some meta tags, and some of them are used for social networks. So if you take a link and copy it to Twitter, to Facebook, or to any other social network, they will take those meta tags, those information from the meta tags, and then display a preview image, preview title, text, and even more. You probably know it. Yeah, I'm sure you know it. But yeah, this is very important because if people are going to share your site, you want to make them see a nice picture and some nice description and title. So in this video, we're going to implement this, and of course, we're also going to test this. I'm here already in my page_home_test.

So in this video, we're going to implement this, and of course, we're also going to test this. I'm here already in my page home test. And yeah, let's think about what we want to have on our home page. So currently here, we don't have much meta tags, and we only have a title with level, which is the default one, so I guess we have to change this. But as always, we want to make sure that we write some tests first. It includes title. So on the home page, we want to make sure that it includes a title. So let's think about what would be the expected title to be. And I want to still use the application name, like level already does.

So let's think about what would be the expected title to be. And I want to still use the application name, like level already does. And then I want to add here a dash and home. And only one space here. Yeah, so the name of application, which should be level, cast, and then dash and home. And then on other pages, we're going to have dash details and so on. All right, let's try to test this. We're going to make a GET request to our home page. We already have learned that we need to check always if everything is okay. And then we want to make sure that we see something, not in the text, now in the HTML.

We already have learned that we need to check always if everything is okay. And then we want to make sure that we see something, not in the text, now in the HTML. And this should be now a title tag with our expected title. Close it. And we need to set false here so that we can test the HTML element as well. All right, let's run this and let's see what we get. So it does not contain this. We see another one here only with level. All right, so we have to fix this first. All right, let's check out our home page.

All right, so we have to fix this first. All right, let's check out our home page. So we are using here a guest layout. So this means the title currently is defined inside our guest layout blade file and somewhere here at the top. Yeah, here we have it. So we need some way to define this title from inside our blade file through this home file. What I want to do is I want to provide here as a parameter. So this means we need to adapt our guest layout file. And here what we're going to do, I'm going to add a constructor here.

So this means we need to adapt our guest layout file. And here what we're going to do, I'm going to add a constructor here because we're going to provide here a parameter. And it should be a public string so that it's available for the Blade component. And we're going to call it pageTitle. And I also want to give it a default one just to make sure level casts like this. So this means then inside here what we need to adapt here. We can now get rid of this here and just use pageTitle like this. And we also have to provide it here. We now have a new pageTitle.

And we also have to provide it here. We now have a new page title. And here we're now going to set it with the config again, app name like this, and we are adding now home here. Okay, let's try it out. So let's test this again. Let's see if this works now. It does. And let's also check this now out in the browser. I'm going to refresh here.

And let's also check this now out in the browser. I'm going to refresh here. And it seems it has not changed here yet. But also because I'm not on the home page. Let's go back to the home page. And here we should see now level-home. And we have it. And level, yeah, we still have to change this inside our .env file. And the app name should be level-casts. Refresh again.

And the app name should be level-casts. Refresh again. Yeah, it looks better now. Okay, so we've made sure we see now a title, which is important. But now we are coming to more specific text. So let's create another test and let's call it itIncludesSocialText because these are not real social text. And this should be now a little bit similar. You don't need to arrange anything. All right, so what do we have here?

You don't need to arrange anything. All right, so what do we have here? We have a description, which is important. We have an OG type, which stands for Open Graph. These are the meta text, the Open Graph meta text, which is a website. We have a URL, which is our current URL, and it's pages.home here. We have an OG title as well. OG description as well. Image is very important. And then for Twitter especially, we can also define the card,

Image is very important. And then for Twitter especially, we can also define the card, which just means that we see a big picture on Twitter itself and not the small one. And this looks already a little bit, yeah, strange to test because we have to write so much code here. We have implement all the HTML text and so on. So this is a little bit messy, but we're going to make this work. And then I'm going to show you a nicer way to do this as well in probably the next video.

And then I'm going to show you a nicer way to do this as well in probably the next video. Okay, of course, when we run this, this will now fail because all of this is not given yet. And we have to think about how do we get it inside our home file, the guest layout file. How are we going to do this? And what I like to do is inside my guest layout, inside the blade file here, I like to create a new stack. And we're going to call this socialMatter like this.

inside the blade file here, I like to create a new stack. And we're going to call this social matter like this. So this means we now have here a new place where we can push some code through our blade files directly to our layout file. So inside our home.blade.php file, what I can do now is I'd like to do this here at the top. And I have, again, already prepared this because this is quite some text here and I don't want to see you, me writing this. So yeah, here we're pushing to the social matter stack here and we are providing the description.

So yeah, here we're pushing to the social matter stack here and we are providing the description. We are providing some information like the title and description again. We have already a social image inside our images and we're also providing for Twitter here that it should be a large image. And yes, this should be enough. So let's take a look and test this now. And this is not working because I believe here we need an S pages. Let's try this again. And now this is working.

Let's try this again. And now this is working. Okay, perfect. So this means now we have made sure that we have set all the specific meta tags for our homepage. And the second page, which is also very important, is the course details. And we also have a test here, page course details test. Yeah, because the videos page is behind the login. So this is not so important, but this is actually the most important page because this is where we directly have access to a course where we have

So this is not so important, but this is actually the most important page because this is where we directly have access to a course where we have all the information about a course. And if people share this, we want to make sure that they see the correct information. So let's write also another test here. And the first one, again, maybe we can copy this from our HomeTest, page home test, because we also want to make sure that we see a title. So this will be very similar to this one. So we'll write this.

So this will be very similar to this one. So we'll write this. And here we also now make sure that we have a Course. Because if we don't have a Course, we don't have access to a Course details page. CourseFactory, great, just any Course. And then the expected title should be, again, the app name. And then we want to add here the title of the Course. CourseTitle. All right.

Course title. All right. And then we are making a GET request to the course details. And we need to provide the course in order to create the URL. All right, let's run it. It should fail. We get a 404 back. Let me see what we did wrong here. I think the course should be released in order to be accessible. Let's run it again.

I think the course should be released in order to be accessible. Let's run it again. And, yeah, now we only see an issue about the text itself. All right, so let's go now to our course details page here. And here, again, we can now make use of the new page title, which we created. And here, again, we're making use of the config helper. We're interested in the name. And then we're going to add here a dash and then the course title. I think this should work.

And then we're going to add here a dash and then the course title. I think this should work. Let's try it out. And let's see if this now works perfect. So we can move on. The next thing, of course, we also need here the social text next to the title. And I have already prepared this. So this test is very similar to before. And then we make a GET request to make sure everything is okay. And now we want to make sure that we see all those meta tags again,

And then we make a get request to make sure everything is okay. And now we want to make sure that we see all those meta tags again, but now with the course description, with the course title, and also with the image of the course. And, again, for Twitter, we also have set something here. And this will fail now because we haven't set it yet. And I think we also forgot here year for the route. This should be pages. There might be another one. Let's check it out.

There might be another one. Let's check it out. Yeah, here. All right. And I think we also, again, here need to release the course before we can do this. So I haven't prepared it really well, but now it works. Yes. And we see only the issue about that the text is not missing. And now inside our course details here, we're also going to provide the meta tags. And I have also prepared this.

And now inside our course details here, we're also going to provide the meta tags. And I have also prepared this. Again, we have a description. We have type URL, title description. Yeah, this all looks good to me. So we're just making sure that we're setting all those meta tags with the information about our current course here. All right. Back here, this should now pass, and it does, which is perfect. So we have now made sure that, yeah, this is also working.

Back here, this should now pass, and it does, which is perfect. So we have now made sure that, yeah, this is also working. And as I've promised you, I will show you now in the next video where we're going to refactor this a little bit nicer way with a nice package to make testing those meta tags a little bit easier and not that messy. But, yeah, this is working. Just to be sure, let's run our test again. They look good. We now have 80 tests passing, which is great. And I think we also should now see a better test coverage because we have

We now have 80 tests passing, which is great. And I think we also should now see a better test coverage because we have provided some more tests, so we should see a higher percentage. I'm just curious. Do we have one? Yeah. Okay. I think just a little bit maybe. I'm not sure if it was. I think it was 80.1 before.

I'm not sure if it was. I think it was 80.1 before. I'm not really sure, but I believe it's a little bit higher now. Okay, perfect. So in the next video, we're going to refactor this.