All righty, so now we're gonna run our lighthouse audit and learn about meta tags, including those for Facebook and Twitter posts. So you can see we've started out in our developer tools for our previous video. And we're just going to go into our audits tab. So we ran a lighthouse audit at the beginning of the course. And you can see as a reminder, we can target desktop or mobile, and we can also slow down the CPU to simulate a mobile device. In this case, we'll just do desktop and no throttling and we will run it.

Alright, so we can see here that we have some pretty good scores. Our performance is 100 accessibility 96 best practices 93. Let's have a look at that. So this one will actually change when we are hosting it online. Right now we're running it in a local server. When it's actually on the internet, this will resolve itself.

So we can see that SEO is at nine. So we need to probably address this. So we can see here, document does not have a meta description. And if we click this arrow here, it says meta descriptions may be included in search results to concisely summarize page content. So if we want, we can click learn more to see exactly how we should fix this, which is a very handy part of the lighthouse audit. So you can see that we're simply adding a meta element with the name description and the content of whatever the description is into the head of our page.

In this case, we're going to enter it into our index dot HTML head. So we can go ahead and do that now. So you can see we already had this Open, we're going to also kind of reorganize stuff a little bit better. So we'll put the theme color up top here. And we'll change this to match the other one, just in case which was black. And we can move our description to be up here.

And in this case, we're just going to write portfolio. Progressive, whoops progressive web app. Okay, so now that that's complete, we're going to create an image for our Twitter and Facebook posts. So this will be shared as a card with a top image whenever we copy and paste a link in a message or in a post on Facebook, or on Twitter as well. I've read some articles and I already know the right dimensions that we can make one image that is optimal for both. So let's go into photo P and do that now.

So we're gonna close this. And we can clear this for now. And we're going to make a new project. In this case, we want a width of 1200 pixels, and a height of 630 pixels. And again, we'll just change this to 96. And the background can be white.

So for this one, I'm also going to keep this simple as well. And I'm essentially just going to take a screenshot of our video. Alright, so we're going to go back from our icons folder into our assets folder, to our image folder, and we're going to open our main video background with VLC. We're going to make it fullscreen and then we're also going to open our snip and sketch application. We're going to create a new one and then we're going to drag this so We take a good chunk. We don't need all of it because it's going to be wider than it is tall.

And that's good there, I guess. And we're going to save a copy of this. We're going to save this into our main assets folder. And we'll just save it into the main folder here. So we're just going to call this one social media. Okay, and we can close this and this, and we'll go back to photo P, and we're going to go File Open in place.

And same thing we're gonna track down in our assets folder. We have our social media file here. And now we're going to stretch it to fit Make sure to hold down the shift key so that we maintain our proportions and we don't skew our image. Alright, so that should be big enough. We can double click And then just kind of move that into position there. All right, that looks great.

So now we're going to save our PSD again. And this time, we're actually going to export it as a JPEG. Because anytime we have an image that is complex, it will be a smaller file size as a JPEG. The main reason to use PNG is if you need it to be a transparent background. So we're going to up the quality a little bit, let's say at 5%. That's pretty good.

And so we're going to cut both of these things now. And we're going to go back into our assets folder. And we'll paste these and this is our social media and make it lowercase this time. Just to differentiate and our new project this is our social Media. Okay, and now we're going to copy this one into our image folder. So we have our social media file there.

Okay, back to the browser, we're going to figure out the best way to do both of these at the same time. So I have this article that I found on CSS tricks, and I'll post a link as well. If you scroll down a bit, you'll come to reconciling meta tags. So this allows us to just use these meta tags all together and with the same picture and it will work for both. So we're going to copy these meta tags into our index dot HTML. Okay, so we're going to put this stuff back together and we're just going to comment out a quick title here for our social media tags.

And we're going to paste them down here and line these up. So we can change our title and our description already. So I'm just going to call this portfolio project. And I'm just going to copy this description here. This description. At this point, we actually don't have our image yet, we're going to need to wait until we actually can host it online.

The trick that I like to use is I actually host it on my GitHub and then I pointed to that. And you can also change your web project address. But again, if you haven't pushed to Firebase, you don't know what it is yet. So we'll just put this as what my website actually is. All right. Alright.

So last thing is we just need to change our image here. So let's go ahead and we're going to, we're going to go into our Git Bash terminal. And we're going to get add, get commit, and within message, all right, whoops, dash M. And we're going to say, section 13, bracket, social icon. Okay, and then we're going to get push origin master. Okay, and now we're going to go and close that for now. Close that for now.

And we're going to want to go into our GitHub and so into our Angular pw a, into our projects, source assets and image and our social media image. So we can right click on our download, and we can actually go to the content itself. So we're going to copy that. And we're going to go back into our project, minimize this, and we'll copy that into there. All right. So that's pretty much it for our meditech updates.

We're going to be able to test our Facebook and Twitter posts. But we have to wait until we actually host our project on Firebase, which we will do in the next video. All right, I'll see you on that one. Bye for now.