LAST UPDATED ON
Optimizing your images for seo, social media, and Pinterest is an often-overlooked detail that can make a big difference to make sure your content is discoverable in search. I’m going to walk you through the steps I take to prepare graphics, but first, I want to clarify what I mean by “optimize images for the web“…
There are a few factors that go into creating a great social sharing image:
- Appropriateness for the channel
- Text-based information associated with the image (in the code) that can be “read” by search engines and screen readers
- How easy you make it for people to share to social media and Pinterest
Abit more attention on your images can make a huge impact and here’s why:
Better images improve ‘clickability’
Your social sharing images–when designed well and delivered properly to your social feeds–will make a huge difference in getting people’s attention and getting them to click on your content. People want to know what your content is about and FAST. And it so happens that humans process visuals 60,000 times faster than text.
Your images should give your audience a really good idea of what the post is about (people don’t just click on things if they don’t know exactly what to expect).
Look for images that convey meaning as well as your brand personality
I see a lot of people grabbing generic stock images and calling it good, but those are just going to get lost in the noise out there. Think about finding images that not only convey meaning about your topic, but reflect your brand tone as well.
Unless your brand tone is stiff, robotic and corporate – don’t choose stiff, robotic and corporate stock images. You can still be professional and have a bit of personality.
The reasons why customers will choose you largely depends on how they feel about you–at its core, it’s emotional. How do you want your customers to feel when they think of you? Choose a few adjectives that reflect your brand’s personality and hold them in your mind as you research images.
Experiment with using text on the image
I experiment with all sorts of images–including with and without text. The text overlays definitely seem help with engagement (likes, retweets, comments). Here’s an example of a social share to Twitter: the one on the left without text and the one on the right that includes the title. The one on the right happens to be my best-performing Tweet this month.
A few pro-tips for designing your social sharing images:
1. When using text, make sure it’s readable and there’s plenty of contrast
Two huge mistakes I see people making are not using enough contrast between the text and background image and using fonts that are impossible to read. Just because YOU know what it says, don’t assume everyone else will. When putting text on top of an image, make sure there’s plenty of contrast between the background image and the text itself, and make sure your fonts are clear and readable. If you want to use a super stylized decorative font, don’t set the whole title with it, just use it for an accent. (These types of fonts actually look BETTER when you use them for fewer words.)
2. Try not to use the same stock images everyone else is using
But if you must, try editing the images so they’re unique-to-you. Cropping, scaling and color overlays are all ways you can breathe new life into a stock image. (See above.)
3. Avoid using faces
People want to imagine themselves in your message, not some cheesy stock photo model. There are even studies that have shown that using images of people who are not actually in your company diminishes credibility (we all know those are not your employees and customers).
When using people, either use images where you can’t see the face at all or crop the photo in creative ways so they seem more anonymous. Here’s an example of what I mean by that, this is a Pin of mine that enjoyed quite a lot of engagement. By cropping it, the focus isn’t on his face and it gives a bit of “cheekiness” to the tone of the image (and for me, that’s on-brand).
4. Unless it’s your face
Experiment with putting your own photo in your social sharing graphics. I get tons of engagement on posts where I include a selfie or an image like this…
5. Keep it on brand
When you use the same colors, image styles, and fonts and add your logo to the images–people will begin to recognize your content on social media and that’s what you want. When people tell me, “When I see your images I know it’s from you” I know I’m doing it right–the design is helping me to build awareness and become remembered.
On my Pinterest profile, you’ll see Pins from my brand board (the board where I pin all of my original content). I’m using the same logo placement, colors, fonts, and image styles — usually, playful vector graphics but sometimes photos with a “cheeky” quality (which is aligned with my brand’s personality)–and when you see them all together like this, you can see how purposeful it is. Every social media or Pinterest graphic I share is meant to say, “Hey, it’s me again!”
Make Your Images Appropriate for the Channel
The optimal image dimensions are going to be different depending on where you’re sharing it to and those dimensions can change as the platforms and technologies change.
For now, Pinterest prefers images that are vertical and formatted in a 2:3 aspect ratio. For Facebook, Google+ and LinkedIn, a horizontal orientation (rectangular) format works best–I use 1200px x 628px.
I’ve experimented with square images on Twitter and Facebook but I’ve found that they don’t work as well on mobile–the images get cropped in funny ways. The best thing to do is test them to see how your images look on various devices and then create templates to follow when making your images.
They have optimized templates built in, but I also highly recommend investing in professionally-designed templates if graphic design is not your cup ‘o tea. Creating aesthetically pleasing graphics will give you an edge on social media, but you don’t want to spend all day about it.
For that I really like Conversion Minded’s Biz-in-a-Box Templates for Canva because you get everything you need for social media, Pinterest, and even creating lead magnets for list-building — 420 templates in all. And, you’ll get a crash course in Canva creating designs that convert, too.
Canva is up-to-date on all the image sizes you need which is nice too. Since I create my own in Adobe, I follow the recommendations provided by my social sharing tool, Social Warfare:
Use text descriptions (the right way)
Text descriptions help make your images accessible for people with vision disabilities
The ‘alt attribute’ on your images is alternate text you specify for an image that provides information about the image when a user can’t view it–and there are a number of reasons why that could happen, but we mainly want to provide that for people with visual impairments who depend on this text when using a screen reader. It also has some ranking benefit for Google when you include it.
Text descriptions help you get discovered in search
Pinterest is a traffic powerhouse and most people think of it as a social media channel, but it’s actually a visual search engine. Every image should be optimized with keywords and descriptions in order to be “discoverable.”
You can improve your chances of getting discovered in search–on both Google & Pinterest–by properly optimizing your images. Check out Moz for all the ranking factors, but for our purposes, we’re mostly concerned with:
Image file name
You want to use keywords when naming your file–e.g. “psychology-of-color.jpg” instead of “D3947a1.jpg”
This describes the actual image and WordPress makes it easy to create your alt text when you upload it.
This is a description of what the image is about to give it some context; here you also want to use strategic keywords because the caption is a ranking factor for Google image search
Your Pinterest description should be the most detailed of all your text descriptions–not only describing what the blog post is about but using strategic keywords and hashtags as well. This is how content gets found on Pinterest. You can research keywords by using SEMScoop and Pinterest’s “guided search”… here’s where you’ll find what Pinterest users are searching for so you can include those keyword phrases in your description.
Most people use the ‘Alt Text’ for their Pinterest descriptions but this technically incorrect
I always intuitively knew this, but I’ve been using the alt text to optimize for Pinterest too because I didn’t know how else to do it. What I’ve recently discovered is that Pinterest has its own code that allows you to specify the description: data-pin-description. When data-pin-description is not available, it will use the alt attribute. So what we want to do instead (and I have a bit of work to do optimizing my own images the right way!) is to use that data-pin-description instead of the alt text.
Let’s take a look at the code of a properly formatted image so you can see what I mean:
<img src="red-apple.png" alt="Red Apple" data-pin-description="Apples are a healthy snack idea for busy moms. They're delicious, healthy and convenient. #snackideas #healthysnacks #apple" />
But you’re probably like me and not keen to hardcode all that each and every time you create a Pin. Tasty Pins to the rescue!
How to optimize your Pinterest descriptions using the Tasty Pins plugin
You might have noticed that in my images above, there’s a text field where you can type “Pinterest Text”…That’s because I’m using a plugin called Tasty Pins.
Tasty Pins makes it easy to enter your Pinterest description at the same time you’re adding your alt and caption text as you’re uploading images. With the Pinterest text filled out (note that the alt text is different) — here’s what that image will look like when shared on Pinterest:
This way, the alt text can be used for it’s intended purpose–which is to describe the actual image not the content of the post.
What if you’re already using Social Warfare, do you still need Tasty Pins?
Good question! Social Warfare makes it easy to enter a Pinterest description (as well as custom descriptions for Facebook, LinkedIn, Google+ and Twitter)…
And this works GREAT if people are sharing your Pins by clicking on your Social Warfare buttons. But what happens when they click on an image in your post by using a browser extension — either the Pinterest extension or Tailwind (a pin scheduler very popular with people on the platform).
When relying on the Social Warfare plugin alone, sharing this graphic using browser tools will pull the Alt Text…and that’s not what we want.
Even if you don’t use these browser tools–the people who use Pinterest do use them share your images. So you want to make sure that you’re optimizing for them so when those Pins get shared, they’re shared with your description, keywords and hashtags.
For now, the Social Warfare + TastyPins combo is the best way I’ve found to streamline the process of optimizing images. If you only have the budget for one, go for Social Warfare — you can save a few bucks and hardcode your Pin descriptions, but for me, the time I save is well worth it.
But wait, there’s more! Tasty Pins helps you further optimize for Pinterest
Another thing that happens when people use their browser extensions to pin images is they’re offered a variety of images to choose from to Pin. In the below example, you can see all the images I used in my post but only ONE of them is the Pin I want to be shared.
With Tasty Pins, you can disable images in your post from being shared on Pinterest. The less choice you offer, the better! You want to make sure people are pinning the images you’ve optimized for Pinterest.
Now I’ve updated all of my images for that post and here’s what happens when somebody goes to share the post from their Pinterest browser extension…
Much better! But what’s happening here is that Pinterest is still scraping the entire web page and pulling two images from my sidebar and one from my footer.
Here’s the fix for that, and you only have to do it once because this will be a global change. Where you see funky, unintended images like this in your footer and sidebar widgets, put this snippet of code into your <img> tags:
So it would look something like this:
<img src="taughnee.png" alt="Taughnee" "data-pin-nopin="true" />
Now that I’ve done that, here’s what happens when people Pin my post from their browser extension:
Since there are no other options than the one Pin, the extension goes right to Pinterest without giving the user any options.
What if you have multiple pins?
Tasty Pins has you covered there too, and this is probably the COOLEST feature of this plugin.
It’s good practice to create more than one Pin because some will perform better based on how they’re designed. Graphics, colors, layout… all of these things will factor into how well a Pin performs and drives traffic.
What Pinterest users in-the-know do is insert images into their post and insert “display: none” in the <img> tag so they’re hidden, but still available to share from the browser extension.
But who wants to monkey around with all that?
Tasty Pins allows you to upload hidden Pins right in your WP post entry.
In this post, I’ve created two pins. The green one on the left is visible in the post itself, but the other one is not (I’ve uploaded it with Tasty Pins). Now, when somebody shares from the browser, they’ll have a choice of the first Pin as well as the hidden Pin I uploaded to Tasty Pins.
Is all this extra work really worth the trouble?
I know it’s much easier to grab any old image, upload it, and call it good. But once you get into a routine with all this, it’s really not that much extra work if you’re using Social Warfare + TastyPins –these tools shave a ton of time off my workflow.
And one thing I’ve learned since starting this blog is that the details matter. Writing the actual blog posts is only a fraction of the work that goes into it.
I want my content to be seen, shared, and found–and the way I’ve been able to do that is by taking the time to research keywords, optimize titles, create click-worthy graphics and make it as easy as possible for people to share my content on social media and to discover those images on Google + Pinterest. It’s definitely worth the trouble.
For more tips on creating attention-grabbing graphics for social media, head on over to a guest post I wrote for Conversion Minded: 10 Proven Social Media Design Tips That WIll Skyrocket Your Engagement.
I hope this was helpful, if you have any questions, hit me up in comments below!
Taughnee Stone is an award-winning designer, brand strategist, and location-independent business owner for over 15 years. Originally from Anchorage, Alaska, she now lives in Croatia with her husband, energetic Samoyed, and three bossy cats.