So, for example, what I have is a summary card. That'll give you this. And all you have to do is add a handful of metatags. Looks kind of weird there. But to give you an example, I've set up a little demo series page like Blade Component Examples. And if we go to our main layout file, yeah, I could paste it here. Now, the Twitter card, this specifies what kind of card you want. So you have a summary card, a summary with a large image, a player card. There's a few. The site would be the site tweeting it.

There's a few. The site would be the site tweeting it. So it would be Laracasts. This might be Blade Component Examples. Yeah, so what you're seeing here is we're adding specific series information to a layout file, which doesn't really make sense. Learn about all sorts of Blade Component tips and tricks. So we will move this to the view in just a minute. But I want to show you. Okay, so if we wanted to try this out, of course, we can't use the validator for a local site.

But I want to show you. Okay, so if we wanted to try this out, of course, we can't use the validator for a local site. But I am using Laravel Valet. So a little tip, we can do valet share to test it out real quick. Let's come back. I'll paste it in. And it's actually /series. So if we preview it, there you go. So it ends up being pretty darn simple. But yeah, I don't want to hard code this in the layout file.

So it ends up being pretty darn simple. But yeah, I don't want to hard code this in the layout file. Instead, we'll just spit out a head section here or nothing if you don't specify it. All right, let's go back to our series page. We now have a new slot for the head section. And I'll paste that in. Okay, so that'll work. And of course, in real life, this would be a view where maybe you have a Series object where you would grab the title and the description and the image. A quick tip for the image, make sure it's an absolute URL.

where you would grab the title and the description and the image. A quick tip for the image, make sure it's an absolute URL. You don't want any kind of local URL. So you're probably going to do something like that. Or maybe you have a series image path or something like that. Just make sure it's absolute. Anyway, so I'm going to stick with the hard-coded examples. But it's actually a little bit more complicated because if you want to support the OpenGraph format, they have their own meta tags.

Maybe something like social media meta tags. And now here, yeah, you could specify your title. So I would again hard code it. But if you want to bind it, you could do something like this. And now this will be evaluated rather than treated as a string. Next, our description. Let's go ahead and grab that. What about the cardType? We will have a default there, but let's override it in this case to summary.

We will have a default there, but let's override it in this case to summary. Next, the site will probably always be your site, so I don't need to make that configurable. So I have this done, this one done, title and description, the image. You know, sometimes you're not going to have an image. So in those cases, the card will be exclusively the title and the description. But if you do want to provide an image,

or in some cases, I don't have any image at all. Well, if we try to run it now, it's going to blow up, because it does expect an image. Alright, let's come on back. We'll declare our props. What do we have here? Card, title, description, and image. Is that all of them?

Card, title, description, and image. Is that all of them? Okay, so now, image could be false by default. And we could say, well, if we have an image, only in that case should we load this meta tag. Next, for the card itself, again, I could do things like this, or

Now, I will warn you, though, another approach, maybe you don't want to be responsible for this. You want it to happen automatically based on data you set in a controller or a database. Some people will take that approach as well. So, for example, I have all these dummy routes. But, yeah, maybe you could set up, like, a Meta class where you could set the title, set the

where you could set the title, set the description. You get the basic idea. So, here, you would set your values and then, in your layout file, you would simply fetch them. So, that would be an option as well. It just depends on how you want to pass that data to these meta tags.