Why alt text is not the right place to put your pin description
(Note: This post contains affiliate links. This mean means if you make a purchase from my link I may make a small commission at no cost to you. )
If you’ve been religiously using image alt text to add your pin descriptions, read on.
I stumbled upon this by chance as I was adding the pin description to my previous blog post. Most of the advice circling around out there is to use image “alt text” to input your pin descriptions. Something about writing a long pin description to image alt text didn’t feel right, so I googled to find out if image alt text has a character limit (Pinterest descriptions allow up to 500 characters). It turns out, that Google SEO experts don't recommend alt texts more than 125 characters.
So if you’re using image alt text to write 500-character-long pin descriptions, you’re optimizing your image for Pinterest, but not for Google. Bummer isn’t it?
As an online entrepreneur, you wouldn't want to lose out on Google SEO juice.
As I dug further into research, I found the accurate way to embed your pin description into your image while making it Google friendly.
Why you need to add a pre-filled pin description to your blog images
When someone clicks the "Pin it" button on your image, Pinterest automatically populates a pin description. If you didn’t add any description to your image, Pinterest will grab the alt text of the image or the title of the blog post.
The more accurate and keyword-optimized your pin description is, the higher chance of it getting more views on Pinterest. So, as the original content creator, you’d want all pins on your website to contain keyword-rich pin descriptions.
The real purpose of alt text
Alt text simply means "alternative text". It's meant to give a description of an image in case the image is not displayed on the browser due to an error, or if a visually impaired reader uses a screen reader.
So an alt text needs to have a descriptive text of the image so that readers can vividly visualize the image. It is also used for Google SEO purposes (to display the image on Google image search). Another thing to note is that any alt text that's longer than 125 characters will get cut off.
When people look for a "flower pot on the table" picture in Google search, they expect to see images of a flower pot on the table in Google images.
If your alt text is a pin description that talks about productivity for mompreneurs,
your alt text is too long, and
it's not giving the descriptive text that alt text is meant for.
These missteps can hurt your Google ranking.
What to include in your alt text
Think of the keywords you want your image to rank for and the purpose of your image, bearing in mind that the text should be within 125 characters. Any words beyond the 125-character limit will get cut off in Google search.
If it’s a blog post with text occupying most of the image, your alt text can be the title of of your blog post. I don’t think it value adds much to add a description of the picture.
If it includes a clear photo of an image in addition to your text overlay, you can consider adding a descriptive text of the picture.
If it’s an image without any text overlay, try to describe the image as detailed as possible.
See the visual examples below.
And what about the keyword-rich, Pinterest-optimized pin description? Where do we put it?
But first, Pinterest's Logic
According to Pinterest developers' best practices, Pinterest will take the "data-pin-description" attribute by default. If there's no pin description, it will take the alt text as the description.
Pinterest Best Practices:
"Use the data-pin-description attribute to pre-fill your Pin descriptions. Using prefilled descriptions lets users save content from your site faster, and can increase visibility of your Pin on Pinterest because it has an accurate description. If you don’t specify a description, we’ll pull descriptions from your page’s alt or title tags, which may not be accurate for every image on the page."
Pinterest has made it loud and clear that using the "data-pin-description" is the way to go.
How to embed a pin description to your image
Here's how you can add the pin description to make sure that your Pinterest SEO is optimized too.
Add this simple code to your image code.
data-pin-description= ”This is your Pinterest description”
If you're using Wordpress, go to the HTML editor of your post, find the <img> code and add the above code. It will look like this:
<img src="Pin-description-alt-text-tip.jpg" alt="Why alt text is not the right place to put your pin description - paper and blue pencil graphic" data-pin-description="Adding pin descriptions to alt text can actually hurt your Google SEO. Find out why and learn how to correctly add pin descriptions to your website images #seo #pinterestips #pinterestseo #bloggingtips" />
If editing HTML codes is an intimidating affair for you, you can use the Tasty Pins plugin for Wordpress. It gives you a visual editor where you can quickly add your alt text and Pinterest description.
Source: Tasty Pins
If you’re using Squarespace like me, there’re more steps involved unfortunately. But it’s worth putting in those extra steps for more SEO juice. I wish a tool like Tasty Pins was available for Squarespace users too.
In Squarespace, you can’t edit the HTML code of your image if you upload your image using the drag and drop image block. So you’re going to have to upload the image using the “code” block.
First, you need to host your image somewhere within Squarespace. Go to Design > Custom CSS > Manage Custom Files.
Upload your image. Squarespace will generate a url for that file.
Place your cursor in the bottom line of the Custom CSS text box. Click on the uploaded image file to get the URL.
The image URL will appear on the Custom CSS box where you placed the cursor earlier. Cut the URL (ignore the Syntax Error message. It will disappear once you’ve removed it from the box).
Go to your Squarespace site and insert a “code” block. In your code block, insert the image URL that links back to your image.
<img src="Paste the image url here" alt= “Why alt text is not the right place to put your pin description - paper and blue pencil graphic" data-pin-description="Adding pin descriptions to alt text can actually hurt your Google SEO. Here’s why and learn how to correctly add pin descriptions to your website images #seo #pinterestips #pinterestseo #bloggingtips">
The pin image is now added. However, you’ll notice that the Pinterest “Save” button doesn’t appear when you upload your image via HTML code on Squarespace. So you’ll need to add one more code to show the “Save” button to your image. Go to Pinterest Developers’s Widget Builder. Select “Image Hover” from the Button Type options. Copy the following code.
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>
Go back to your blog post in Squarespace. Add another “code block” anywhere within your blog post and insert the above code you copied earlier. Click “Apply”.
You’ll see something like this. You’ll also see the Pinterest “Save” button when you hover over your pin image.
Whew! I know the last bit on Squarespace was a rather technical and long process. You don’t need this process for every image on your website. Just apply it on your key image like your blog post pin image. And it gets easier after you’ve done it for a few images.
So there you have it! I hope this information is useful and has helped to keep your content optimized for both Google and Pinterest!