In this episode, Cory Miller and Corey Maass discuss the importance of OG (Open Graph) images for social media sharing and branding in WordPress. They highlight the benefits of using OG image templates to create visually appealing and professional content. They also emphasize the need for WordPress professionals to offer variety and customization options to cater to different client needs. Cory and Corey suggest considering pricing models and beta-testing strategies to determine market value and gather feedback. This episode provides valuable insights for WordPress professionals seeking to enhance their services and deliver impactful OG image solutions.
Top Takeaways:
- Explore OG image templates: OG (Open Graph) images are essential for social media sharing and branding. WordPress professionals should consider incorporating OG image templates into their projects to enhance their content’s visual appeal and professionalism. This could involve adding a logo, screenshots, or other relevant images within browser frames or mobile device mockups. Professionals can easily create engaging OG images that align with their clients’ branding and marketing strategies by utilizing templates.
- Embrace variety and customization: With the availability of different OG image templates and design options, WordPress professionals should strive to offer their clients a diverse range of choices. By understanding common patterns and elements used in OG images, professionals can create customized templates that cater to various needs, such as showcasing logos, headlines, taglines, or even incorporating screenshots of website pages. The ability to provide personalized options and adapt to different social media platforms will greatly enhance the value of their services.
- Consider pricing and beta testing: As WordPress professionals develop their OG image solutions, it’s crucial to think about pricing models and beta testing strategies. Offering a base product with well-defined features and functionality can serve as an entry point for clients. Professionals should assess the market value and determine appropriate pricing that reflects the benefits and customization options provided. Beta testing can be a valuable step to gather feedback, refine the product, and generate initial user testimonials or case studies. These efforts contribute to building credibility and attracting future customers.
Mentioned in the show:
You can follow Post Status and our guests on Twitter:
- Corey Maass
- Cory Miller (CEO, Post Status)
- Olivia Bisset (Intern, Post Status)
The Post Status Draft podcast is geared toward WordPress professionals, with interviews, news, and deep analysis.
Browse our archives, and don’t forget to subscribe via iTunes, Google Podcasts, YouTube, Stitcher, Simplecast, or RSS.
Transcript
Session 13 Corey & Cory Launch a WordPress Product Live
[00:00:00] Corey Maass: It’s just so much work. I was like, it doesn’t have to be
[00:00:06] Cory Miller: initial stuff. I’ve been doing this so long, to fine tune some stuff, get your workflow,
[00:00:11] Corey Maass: but it’s just so much work. I was like, it doesn’t have, but now I’m like, I prefer this. Yeah. Yeah. There’s stuff that I want to be very polished and professional, but then there’s also turn it on and go.
We’re turning on and go. We’re on now. Like specifically. I gotta turn my lights on. I just realized
[00:00:34] Cory Miller: Corey’s doing that. Hey everybody, welcome back. This is session 13, I think. Corey and Corey launched the WordPress product live. We’ve got some cool updates. We’ve been working on some stuff and when I say working on some stuff, Corey, you’ve been like on this huge manic state of getting stuff done and yep,
[00:00:53] Corey Maass: I’m pumped about it.
I I built a hundred feet of fencing. Yeah I, last [00:01:00] week my client, main clients were outta town for a week, so I was like, all right, I’m gonna take a couple of days off and. Take advantage of the weather, finally getting nice and so built big, beautiful fences which has prompted the promise of an O M G I M G hackathon where Corey is gonna fly me out to his house and I’m gonna help him build a fence.
But it also meant that I was. Hacking at our plug-in new product for a couple of hours every morning and every night. And over the weekend. So yeah, the, I just this morning zipped up. I have a little script that I used to zip all my plug-ins for distribution and uploaded it to a testing website and it broke.
But then a couple minutes later it worked. So pretty amazing. Yeah, we’ve now got a plugin that installs. It’s[00:02:00] tied into e d D. Oh, good idea. Thank you. Yes. We should stand for this proud moment. But yeah I got as far as incorporating the licensing with e D D. So that’s now tied into the OMG img.co website.
That has a, just a placeholder logo on it. We need to put the signup form coming soon on that website. I keep forgetting. But it’s got the basics. The plugin itself has the basics of, so you can install it, it takes you to a welcome screen. You add a logo and it creates your first image, which is the logo on the left and the title of the site on the right.
Like we talked about, in, in a few clicks and in a few seconds you’ve got at least the most basic OG image and I found what I needed to. If you don’t have Yost or something else [00:03:00] Installed. Then this will show as the OG image. We need to test that a bit more, but is working on my WordPress installs.
And then I also found the hook for Yost. So if Yost is installed regardless of the OG image you have, Plugged into Yost hours will show if you’ve selected one. And then, and so that’s Sitewide. And then we have most of the functionality for host specific images as well. And so right now you.
Associated with a post, you can create images and you can set those as a featured image, and that works. What I haven’t finished yet is setting an individual OG image per post. So if you share your homepage, it’ll show the sitewide [00:04:00] OG image, but if you share a specific post, it should show the OG image for that post.
And if there isn’t one specified then should show the sitewide one. So we need to test that, but all the functionality is there. And then the only other, I mean there’s, there’s a few little bugs and things here and there and we need to do a lot of testing on different browsers and stuff like that.
But the, so the OG image per post is the one big thing missing. And. Yeah. And then I think we’re, we’re pretty close. We need better templates, which you’ve been working on. And yeah, again there’s, I’m to the point where the, the framework works. We need to pick a couple of templates and just start messing around with them.
And so it’s the like as we’re going, oh, we really need this over here. And I’ll go, oh, it doesn’t support that yet. Let me quick go at it. We’ll get into that development loop. But that’s where we’re at. We’re pretty far along.
[00:04:59] Cory Miller: That’s [00:05:00] awesome to hear. Awesome news. Oh, keep building fences cause.
Focus two, you got your physical outlet and then you got your mental digital outlet. That’s all great news. I think my biggest question is when do you think by end of day our part like beta client site is post has by end of day our, we should be switched over to our new hosting environment.
And things should be a lot better for the website that have been lingering.
[00:05:34] Corey Maass: Congrats
[00:05:37] Cory Miller: by tomorrow. It should be ready to available, I should say to install the plugin if you wanted to. Great. Okay, that’s all good news. And on that note for, to recap for others that haven’t seen previous episodes, where we’re at now is.
You just heard Corey’s product update, great progress on what we had talked about [00:06:00] the past couple of weeks, about an easy way to show your website professionally on the web through open graph. So posts being our kind of default list lists. Not just iron out the dev kinks, but also how we want that to look cuz that’s very important.
Both of us have interest in design. So on that note, using that post as the test, I started working in Canva. I also, my update to you would be also, as I mentioned in Slack I submitted the design request for the templates posts to start to flush out how we want this to look. I do know we do have the nuts and bolts of what we need for just templates.
So I still need to do more of that work. But I wanted to show you this. Along that kind of research and work from my side, I found this og [00:07:00] image gallery, og image com. Oh, nice. Yep. Wow. This is what I needed. Yeah. I love some of these things. So I took, and I’m not a professional designer, I’m just a hobby designer.
Yeah. But I was like, this is really inspiring for the general. Default website, business card. So just looking through here there’s just such good stuff. So I was like riffed on something like this with that, and I’ll have to get this to our designer. But all of that, just thinking about how to offer a really good template option and what is in there.
So I was like, okay. I got the dimensions like we had talked about and just started like going, okay, what were the business cards? Funny going in Chem Camba. When I put in the ratio, I pulled up a business card template. I was like, that was cool to see some of those. And I just started like riffing something that I could at least.
Flesh out my thoughts a little bit to get [00:08:00] back to the designer based on some of these other gallery options. So that’s what I was working on when I didn’t realize you were here and I was still working. But just for the general website, the thoughts we had were logo, some treatment.
What I liked about these images over here is like you have a big title. Yep. A small logo. I like how Mix Panel threw in some kind of graphic that linked what Mix panel. Mix panel is.
[00:08:31] Corey Maass: So the technology we’re using is still technically a screenshot. And so seeing this version one, 1.1 or whatever so in my mind, the first.
OG image template that we want is logo on the left, title on the right, dead simple, a background, color, whatever. But there’s [00:09:00] no reason. And, and as the rabbit hole you started going down on our last call that I poked fun at you for was that you kept moving the logo from the left to the center, left, to the right, to the center.
And it’s we don’t, the beauty of this is we don’t have to choose. We can if it, we can, there are two things we can do. One is. I can offer an option that says, do you want the logo on the left or center? The other thing is we can have multi, almost infinite templates.
And I don’t think we want to have too many. Templates that are too similar, but, looking at that, that gallery you were just looking at, like a lot of these have, you look at the patterns, right? So you’ve got a logo top left for a lot of them, or you’ve, and an image on the right.
Or you’ve got a logo top and then a text underneath or the one you were just showing me, which is what made me start, made me interrupt you. The mix panel, right? Is. Again, version [00:10:00] 1.1. I wonder that our best template isn’t actually going to be we can we could actually take a screenshot of their homepage and then automatically suck it in to a template.
And with one click, like we would go take, essentially take a picture of the homepage and then put it in a template. They’ve uploaded a logo, we have the title, and we’ve essentially recreated that mix panel template in one go. I hadn’t thought of that cuz we’re talk, it’s the what’s the movie Inception we’ve got.
Screenshots of screenshots, but but we can certainly do that. We can say, I hadn’t thought of this before, like talking about creating a template for each blog post, pulling in the title, pulling in the featured image. We could actually take a screenshot of the blog post and then inject it at, in lieu of a [00:11:00] featured image into.
An OG image, so you’ve got an actual picture of the website in that, that mix panel style. That’s really cool. I hadn’t thought of that. That’s
[00:11:13] Cory Miller: so good. I’m trying to record some of these as we see ’em. Yeah. So I can direct them. But I know what you’re doing with them too is you see this and go, okay, that means centered left.
This one is in the middle. There’s another le you’re right, top left. Seems like I love that idea though of the screenshot cuz like I was having a hard time with the post status one. Just showing my workflow. I was like, okay, trying to create this, what would I want? And I like the examples where they have some image something there and I was like, oh man, here it, so I found a camera like this little browser
[00:11:53] Corey Maass: frame.
Yep. That’s what I was the, it tickled my brain when you showed me this. I’m like, go take [00:12:00] a screenshot of the post status homepage at, at these proportions and then drag that in here. And that’s, in l in lieu of that, fake browser, a placeholder. You could actually have a picture of the website cuz that’s it, that kind of.
True. And with a drop shadow. And so it’s like all of these things we can do, but it’s also, it’s that kind of thing that adds a little more legitimacy. It’s the, just as you brought up, I think last time, the, those generators of, books, book cover, so it or fake software, so it looks like.
It’s like when people were writing eBooks or, have downloadable software. There were these templates you’d upload the cover and it would spit out an image, a 3D generated image that looked like the box that you’d see on the shelf at Staples. That’s what we were talking about a couple of weeks ago.
Doing similar here, where it’s okay, either upload a screenshot or we can take a screenshot of the actual blog post. So [00:13:00] you’re, you’ve got a picture of the website, it’s gonna lend this sense of legitimacy even more than, a stylized title or whatever. That’s really slick. But
In the, I’m not hearing you. Something happened to your audio. Oh, that screenshot.
[00:13:18] Cory Miller: Oh, there we go. Okay. That screenshot thing, I was just trying to make sure I got it down. Yep. Just trying to make sure I had that
[00:13:26] Corey Maass: vision of what we’re talking about, but I wonder that we don’t, either. We basically, we need to start a Pinterest board of all of the great ones we find you’ve got, you’ve found this gallery that gives us a head start and I feel like we, at some point, you or we should spend 10 minutes just going through a bunch of them recog, noticing some of these patterns okay.
20% of them have a little logo in a screenshot. 20% of [00:14:00] them are, 50 50, 20% of them are logo top title bottom and just call those our first three templates or something like that. Incorporating, like you said, with post status being our testing, ground first, testing ground When the designer comes back with your new template, let’s make sure that’s accounted for.
And then those are like the first four that we go live with. Because that’ll, again if we’ve, if we identify these sort of, not 80 20, but 20, 20 20, 20 20, people are gonna wanna do wild, crazy things. And like I said I’ve built the plugin in a way that people can pretty easily create their own.
They’re gonna need to be developers, but, Can still, add their own treatments and stuff like that. But if we’ve covered most of the bases, at least for OG images, then, when we publish, cuz again, EDDs all set up, I’ve added Stripe and all that kind of stuff. Like, all we’ve gotta do is [00:15:00] Go live, essentially.
But, and obviously we want to do that with actual templates that work and after some testing. But, we’re pretty close. We just need to offer the, a actual, it’s like we’ve worked out the engine, we’ve worked out the wheels. We just now need the what is it, the. The Civic, the Acura, the, s u v and the truck or whatever, but the underlying stuff is all is, has all worked out.
[00:15:27] Cory Miller: Love it. Just trying to get, capture this for, got it.
Yeah, because like up here we talked about doing some of these things, but like pulling in a little screenshot, I think that’d be really awesome. Okay, so here’s my big question. I’m scared to ask. Can this be a fr framed in like a browser button? That browser thing, Nick? Oh, for sure. Wherever it was.
[00:15:56] Corey Maass: Okay. Yeah. Like things we need to work, all stuff [00:16:00] to work out. But absolutely the easy one is, yep. The easy one is just adding a drop shadow. The one that we just need to find essentially the right yeah, the right size, basically either P and g or there are. Browsers or mobile phones, all done in css, which means they will, stretch, right?
So we could actually take screenshots. There’s one on your screen. Bottom right? Like that phone yeah, the, on the right. Yep. That one. We could essentially recreate that. Go take a screenshot of your homepage, stick it in a phone. And then take a picture of the og, put, create an OG image out of that.
So it’s if you are a mobile app or something, like we could do that kind of thing. And then we this totally might be a pipe dream, but we can start looking into actually like. Doing skewing type of stuff, meaning we can like some of those OG [00:17:00] images to make it more dynamic.
They’ve, instead of just a flat screenshot, they’ve tilted it on its side. We can start looking into that kind of stuff too. I’m not, I don’t know yet if we can do it or not, but it’s not, it’s certainly not hard to test it. Let’s see.
[00:17:16] Cory Miller: Just thinking about frames for it like that I think is really cool.
I’d want that on Post stuff. Yep. But just a way to frame it in any way. Yeah. The image that you’re doing I think is interesting. Okay. So I’m looking at these templates, like that’s gonna give me another thought for the post status one. Seeing what they come back. I bet you’ll get something by tomorrow on that.
Great.
Get that in here.
Product. Yep.
Magazine would be in there. Magazine. Oh
[00:17:49] Corey Maass: yeah. That’s one of your clients? Yeah. Yeah, exactly. Okay. [00:18:00]
[00:18:01] Cory Miller: Yeah. I really like that because for the screenshot for the post it just shows like this is the blog post and there’s some rendering of it that goes, when I click through, this is what I’m gonna get and expect to get.
Yeah.
[00:18:15] Corey Maass: Yeah, that’s, yeah, I think that’s, that takes it to a, to another level, like not there. And it’s there’s different times and places too. It’s some, if you share on Facebook, you get, you get the full image like this, right? But if you share on Twitter, it’s like this.
Or if you share in Slack, it’s like this. And so there’s time we can’t. I don’t think we can control which version gets delivered where, but depending on your preferred, if you’re mostly promoting to Facebook, then having an image that has a lot of detail, meaning a screenshot, totally works.
Whereas if you are sharing look, in the you that [00:19:00] wise one, if you scroll down if you’re sharing somewhere that it always shows up small, you’re like all we want is the name of our website as big as possible Then, and so essentially we’re giving you lots of options.
The one just kitty Corner down memory. That one? Yeah, there’s your screenshot right there. So it’s, a fake browser frame around a screenshot of something. And again at an angle, I know we can do rotate. I’ve already done rotate him in one of my test templates. So that’s the, that’s something we could emulate pretty readily.
But this is the
trap, the loop that I’m stuck in right, is I’m. I ha I have a tool and I don’t, I have a solution, but I don’t have the problem yet. And so I’ve just been testing like crazy, all the different neat things we can do. But I haven’t actually sat down and said, okay, let me try to recreate one of these OG [00:20:00] images with our new system, or let me call this template number one.
And here’s the elements that it needs. So this is great. I think, like you said if you get back the new ones for post status in the next couple of days and we pick a couple of these based on the list you just created, then you know, we’re good to go.
Okay. Yeah. There’s
[00:20:24] Cory Miller: a lot of, yeah. Logo, left image, which is what we got here. Logo, top head logo, smaller headline here.
Same.
[00:20:38] Corey Maass: Okay.
Yeah, I’m seeing a lot of patterns and so again, I think we just pick a few.
And of course you have our entire marketing strategy done already, right? Yeah. Me and my
[00:20:50] Cory Miller: buddy Chap, G P t.
Plus he’s at while I have ’em. So when I ask the designer to work on some of those, cuz I’d probably take a lot of these. And say [00:21:00] do this for post status is our test case. Yep. The podcast is gonna be a little tricky I think.
Cuz you want to host probably, but what if you have two hosts? Yep. What if, and you always have a guest I always have a guest. But we’ll cross that bridge later on. Okay. Logo only. I like that. Logo is screenshot of homepage. See logo and tagline only.
[00:21:30] Corey Maass: So I, I think you should using that og, that image gallery, like for each of these go take, go find one that’s close to what you want and just like you did a minute ago. Yeah. Like that slide number five, capture one of each. So that it’s okay, this is, just one big logo that’s wise, logo and tagline.
That’s, one of those other ones. And it’s if we have all of those [00:22:00] captured here forever then that’s what we start with. And we, and we have a designer actually figure out the proportions, make it look proper. But then we’ve, we’re. Like you said we’re covering the bases.
Okay.
Can do.
Yeah. We’re close. I’m excited. And I’ve set up, like I said, I’ve set up most of the basics we need just to get it out the door. At some point we need to have a conversation about pricing. And a logo, but I’m very, I’m excited that we are very close to having something that we can, you can be using on post status.
I can ha put on my client websites. And essentially we’re, we might even maybe in post status Slack let’s see if we can put together a beta. Beta list, beta testers, 10, 50, a hundred, and roll it out to some people, because with e d.[00:23:00] So for anybody who’s not familiar, that’s the shopping cart checkout mechanism that has, that’s really specifically good for selling software licenses.
And so we can essentially give a, give away a free version of the plugin. And it doesn’t and anybody we give it to won’t, can’t update. As we release updates unless they buy or unless we give them a copy. Cuz in WordPress that’s really what you’re selling is access to the next version. Cuz everything is open sourced.
But so we, I, it makes it very easy to distribute something like this. Like I have no problem giving away the first version to, generally you, trusted colleagues kind of thing. But if it gets leaked, I don’t care because, we’re gonna be cranking out new versions, daily, weekly early on as new features and bugs and stuff like that get un get added, fixed.
[00:24:00] And it’s, people will have an early beta, but will want to buy in order to get those updates. Okay. I think in,
[00:24:09] Cory Miller: so I’ve got pricing logo templates, pricing logo,
[00:24:14] Corey Maass: beta testers. Yeah, that seems like we’re. We’re ready for all that.
Okay.
[00:24:22] Cory Miller: I wanted going with templates so we could have something to like really inform what we’re doing. Yep. But after we get the first round, I’ll submit another request for the logo. Yep. And then pricing. I think we’ll get a I’ll for our part, get a better view of it when we get it in action.
Show it going. And then, but I think some of the rough pricing talks we had were right on par. Get something, a base product that does something well.
[00:24:51] Corey Maass: Yeah. That helps people look better.
[00:24:53] Cory Miller: And then yeah, when we’re ready for
[00:24:55] Corey Maass: beta test, which we’ll just ask you had a hard stop at [00:25:00] the top of the hour.
So let’s wrap up today. Sorry about being late. No worries. And yeah, we’ll reconvene soon. I feel like things are starting to speed up. This is great.
[00:25:10] Cory Miller: That’s awesome. Yeah,
[00:25:12] Corey Maass: I’ll
[00:25:12] Cory Miller: try to keep up with you.
