Hi, in this video, I'm just going to show you how to create an open graph-sharing image.

This is the image that is displayed when you share a link to your website on social or an email or in mail or something.

As an example, I'm on this website. When you're logged in, you'll see the toolbar at the top. Let's go to the website dashboard, go down to settings and sharing image.

And then in the sharing image, you can click add new templates and call it sharing image or whatever you want. Then you can choose whether you want a background color. So just click do not use image and then it uses the full colour.

Or you can choose Upload Permanent background image. I'm just going to upload an image from the Media Library. I'm just going to choose, say, this one here, which is quite nice. Then on the Add Layers, I'm going to click Image and I'm going to click Add New and I'm going to click Upload Image and I'm going to upload my logo and I'm going to choose this white version of the logo. I can add it there in the middle.
​
But I want to make it go to the top left. On the X-axis, we're going to make that 40 pixels and the Y-axis, 40 pixels. That will put it in the top left-hand corner. I'm going to make the width, say, 300 pixels.

That makes the logo a little bit bigger. I'm going to add a new layer called text, add new. I'm going to click the dynamic field filled in the post editing screen, and I'm going to call this title, and it's going to take the title from the post title or the job title. I'm going to click More Options, and I'm going to make the text this rubik bold, which is quite nice.

We can upload a custom font as well if you can get the font file. You can change the text colour if you want. The alignment, I'm going to make it centre, centre. The text goes in the centre there.

One thing you'll notice is that because we've got a white logo and white text and the background there, there's not that much contrast between the background and the logo and the text. So it's difficult to see that. So what we're going to do is we're going to add a new layer called Filter, I'm going to click Add New, and then we're going to increase the blackout to say 45.
​
And that makes that darker. But now that filter is over all the elements. So what we need to do is we need to move the text above the filter and move the logo above the filter. So now the filter is the bottom layer, and now that reads a lot better. And you can obviously open up the filter and adjust that accordingly. You could blur the background image maybe if you wanted to, so that might make it stand out a little bit more as well. But I'm not going to do that as I think. There you go.

You could add other text layers as well. You could add another text layer, Add New. It's not going to be dynamic this time. I'm just going to write the content and it could be, let's say, a telephone number. I can putI'm going to put my e-mail. I'm going to make that on the right. I'm going to make that centre, centre, and I'm going to make it a bit smaller, so maybe 26 pixels. But now you can see it's overlapping over the title text. I'm going to make that say, 500. I can make that 500, sorry.
​
I can make the Y 500. That brings it down 500 pixels. It's now towards the bottom of the page. I'm just going to put an E here for email. I'll try to. Then tab out of that. That adds that. That looks quite nice. You could add your web address or anything. You could add other text layers, like a tagline or anything you want, really. But that looks okay. We're going to save changes.

Go to Configuration. I'm going to increase the quality of that to 100. You can make that a PNG or JPEG, but JPEG is fine. It's a bit of a smaller size, which is good. I'm going to choose the sharing image template we just created, and I'm going to click Save Changes. That's going to apply the sharing image template we just made to all the pages and posts. Now if we go to all jobs, and if I edit this job, scroll down, what we can do is we can generate this image by clicking Generate. And it generates that image for this particular job using the title.

Now, when you create a new job that's not already on the system, this will be automatically generated.
​
You don't need to do that. But this is because the job already exists. We have to generate that. Now, let's say, for argument's sake, you've got a lot of jobs, so if you've just added this, you've already got jobs on your website. You don't want to have to go into each job. You don't want to have to go into the back-end developer and civil engineer job and generate that image.

What you can do, you can select all of those jobs, click Edit, Apply, and change the status to Published and then Update. Then what that will do, it will resave all of the jobs.

Then because the jobs have been resaved, it automatically creates that image. Now if we go into the back-end developer, we should see that the image is now automatically generated. Let's load up.

Okay, I can see it's been generated. That's because we resaved the page. And if you add a new job, call it a new job, and then just fill out all the details: job category, job types, location, salary, and so on, and publish that.

You can see it's created that open graph image. It's automatically generated each time you publish a job.
​
What does that look like when you share that job on social? Let's go to jobs and go into, say, this... Let me hide that for a minute. Go into the back-end developer job. If I grab the URL here, I'll go to LinkedIn and I share that link. It will generate that open graph image. There you go. Beautiful.

Then what you could do, you could just remove that because you don't need that anymore. You could say, Hey, check out my latest job. #newjob. And then you could post that. And then when that's posted, when people click on the image anywhere in the image, it will take the person back to the job on the website so they can apply for the job.

That's a pretty cool way of automatically creating a really attractive branded open graph image for your job links or page links.

Okay, thank you. Have a great day.