SEO & Open graph settings

Three main pages, technically more because our projects designed automatically created a page for each project and were looking pretty good. In this lesson. We're going to cover our SEO titles and meta descriptions, and we'll cover Open Graph settings. We'll even cover how to dynamically configure titles and descriptions based on our CMS content. We'll do this for each page type, our homepage, our project pages and our contact page.

Let's start with the first page. This is not the right page, let's go back to our homepage. Now it doesn't matter for SEO settings how we do this, it doesn't matter what break point we're on but we're going to switch to the base break point just in case we make any other changes. And from the pages panel at any time we can go and click the cog, edit page settings. Now the page name here, where it says home, this is internal only, this is for us organizing our static and dynamic pages. So let's keep page name home for right now and we'll go right into SEO settings, title tag. Now we can always come back to this later, but for now, let's move on and do the meta description. So this is what shows up usually in the preview underneath the title. Let's paste, what we have on our clipboard of course you can configure this to whatever works best for your portfolio. And we'll do the same for Open Graph.

Now there's a couple of options here. We can check same as SEO tag, it'll just import the information from here and keep that current. So if we make a change here like that, that'll show up in our Open Graph title. Or we can uncheck and do something custom. It could say meet Megan Garcia, UX Designer extraordinaire. We'll pull the same SEO meta description and now we get to add our Open Graph image URL, this is usually what displays if for instance you share something on Twitter. Now later on, we can customize this, there's some guidance here to help configure your image, but let's hit save and actually grab something from our assets panel. For this, let's grab our hero image and we'll just copy that asset to our clipboard. Close out of here, back to our pages panel, back to our cog and let's paste in that URL. So this is our Open Graph preview. Let's save our changes. That's one page down, let's move on to the second page.

Now we can stay on the homepage here, what's over here does not matter when we're editing our SEO settings or are Open Graph settings. Let's edit our page settings for our projects template. Same basic principle here, but now we're able to use dynamic data. Now we can use Megan Garcia, UX Designer, anywhere we want, but if we want before that, we can add a field. So let's add some space here and we'll go to add field. And we can pull in anything from this collection, from our projects template. So maybe the project type, so we have UX design here. In fact, we might want to structure it so it starts with the project title. Let's go in and add a field, let's choose the client name and we'll do UX design Megan Garcia, or we can even do by Megan Garcia. This way, if we flip through here we can just use this to swap through Hillside Calm. Now it says web design by Megan Garcia. So Hillside Calm is pulling from the client name, project type is web design, they all say by Megan Garcia, let's check the third one prototyping by making Garcia. What we're doing is we're dynamically placing together these variables and creating a title that will display on search engines based on that.

Take it even further with our meta description. I had the pleasure of working with, client name on a project type project in project year. Or we can take an entirely different approach. Learn about my work or learn about my project type work, let's do project type work, with, and let's do the client name period. Then we can actually add the full description, we can go to the brief project description. This way in our search result preview we're getting all of that information, it's dynamic, it's pulling in the description in addition to what project type was done for which client. That looks pretty good.

Open Graph settings, same thing here we can add fields or we can just grab, maybe for this we want to grab the same information from our SEO title tag. And maybe for this, we just want the description. Let's go to add field, let's grab the brief project description and maybe add learn more on my online portfolio. And there's one more trick here, we can pull that project image, the main project image in dynamically. So from here let's select project image and just like that it's pulling in, into the Open Graph preview, it's pulling in that image from each project. Dynamically generated SEO settings and Open Graph settings. Let's save our project's template settings and we'll move on to our third page.

This is the contact page and this will be pretty straightforward. Let's go and do edit page settings. Get in touch, Megan Garcia, UX Designer. Meta description, if you're looking for a UX designer to change your life, please reach out. I aim to respond within one business day. And Open Graph we're going to keep the same SEO title tag and the same meta description. For the Open Graph image URL let's grab that same image from our clipboard earlier, we'll paste that into here and we have a get in touch page that'll be shared for Open Graph compatible sites. Let's save.

But those are the basics we covered each page. We added our SEO titles and our meta descriptions to our homepage, we did it dynamically on our project pages and we did it on our contact page. Grímur.

[Grímur] Got a great challenge for today. Share your portfolio, once you fully customized your Open Graph settings and Tritter, for instance, we'll pull your Open Graph stuff right into the treet.

‍