Social images and optimizing for search

- [Instructor] So now that I've got my site pretty much complete, it's on a domain, what about search engines and what about social sharing? So there's two things I want to quickly talk about. Now, previously we talked about settings over here. We had our domains in here, we've set them up. But on our project settings, we have some other stuff down here. We have search engine settings, what would be the default search engine title or would be the default search engine description.

So we have to think what people are searching for here. Like, for instance, if I see this site and I'm a random person, what would I be searching for? Well, I might be searching for things like Aria Oslo, basically her name, but i might be searching for things like digital artists in Portland, Oregon, for instance, or even things like abstracts, portraiture, for instance, those kind of things. So I've got to think a little bit about how people are searching for this website.

So for instance, I might wanna have in my default search engine title something like Aria Oslo - digital artist in Portland, Oregon. Something that can make sense like that. Now, if I scroll down the page, I can just save this. There we go, it's saved and this will automatically update and be shareable. Now there is other things that I can actually put in here. So maybe there's a default search engine title, there's a social sharing one, which kind of looks the same.

What would I expect if someone shared this on the site? So maybe it's the same as what we have here. Now there are other things that we can actually include here. So things like default sharing title, your site's Twitter handle, for instance, if you wanna share on Twitter, but also things like your project icon too. So things like the little favicon, which is up here, and also like home screen icon. So we just quickly made two.

I've just quickly made a social card, which looks like this. What people see if they share on Facebook and on Twitter and also a little favicon here. And I've basically saved them out so that up here, I've saved them out as a PNG for this one and a PNG for this one as well. Don't need to do two X, just one X. This one, I've actually left out the export on this so we don't have the white background, it's see-through, and I've just added them to my project. So, let's just check, actually, did I? No, I didn't.

So I'm just gonna drag them into my project. There we go. And what I'm gonna do is use the social card in this way and the favicon to have it up here in the title. And the favicon can take a while to upgrade. I'm just gonna find it in here, favicon. And the social image is the social card. There we go. I'm gonna save. There we go, it's done. Now, I'm gonna quickly just check this, there is a few ways to check this.

Again, I'm gonna publish these changes because it's done. And I'm just also gonna check this out. So, I'm just gonna use this one for now, in case my website hasn't propagated around the world. And I'm gonna use Facebook's Sharing Debugger, it's a pretty good tool. So I'm gonna paste in my URL, aria-oslo.superhi.com. And let's see. So it hasn't been shared on Facebook before, which kinda makes sense. Let's fetch some new info.

And again, it can take a while to actually update. I can actually use scrape again a few times, just to see if it's updated. (computer mouse clicks) And eventually, what we should get is our actual image start to appear. So in here, we can see that things have been pulled through. We've got our Aria Oslo digital artist in Portland. So this is a really good way to kind of just work this out. And you can see here, I've just done a quick refresh, and we have our favicon up here too.

So, there is some settings that we can actually use, we can fill this stuff in. Once we're done, we can publish this stuff and we can add some extra info. It's good for SEO, it's good for search and it's good for socials.