Social preview images. The things that show up below your tweet or post when you share a link (but not a photo or video) on most social sites. Accompanied by a title, description, and URL (usually), these little blocks of content are good to be aware of both how they work and how they’re set up on your site.
Before we jump in, let’s jam on how this looks and works.
Images vs Links
Pop quiz. What is the difference between clicking the image in this tweet:
"@skiwildmtn's new tagline is simple, it’s clever, and it’s the sign of a ski area that is truly (and creatively) embracing who they are instead of constantly trying to be something they’re not." https://t.co/5P8bOWnJYT
— Gregg Blanchard (@slopefillers) August 4, 2022
Versus clicking the image in this tweet:
— Wild Mountain (@skiwildmtn) August 3, 2022
It’s a similar image, but in the first tweet the image is a social preview image which means that if you click the image you’ll go to the URL in the tweet. But if you click the image in the second tweet? You’ll see a larger version of that image.
In other words, if you your goal is people viewing the image? Just sharing an image a great approach.
But if your goal is link clicks? You’ll want to make sure your social preview images are correctly setup.
And because you’re not the only one sharing links to your site, having these setup is a great way to control how these links look when other people share them and have a better chance of a big, glossy image showing up below their post instead of just a plain link.
You can check most of the boxes with open graph tags. These let you specify a number of different bits of info about the page including an image, title, type, and URL.
The other one I typically worry about are Twitter’s card tags.
How do you know what yours look like? Here are a few links to the validators/testing tools each platform provides.
If your preview suck? Well, you’ve got a decision to make. Either pay your agency to buidl this code into the way your pages are built using the stuff in your CMS or just be patient and bring it up the next time you do a redesign.
Either way, you can fix what you aren’t aware of, so hopefully this little overview gives you something to dig into a little this fine Wednesday morning.
Thoughts? Ideas? Feedback? Comments are old-school, click here to grab a slot on Gregg's calendar and let's chat.
New stories, ideas, and jobs delivered to your inbox every Friday morning.