Learn to customize your own blog with confidence

Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info

Three Image Mistakes Bloggers Make

3 blog image mistakes

No, this isn't about choosing ugly pictures or failing to credit photo sources! Those are both big mistakes, for sure, but today we're going to talk about some less-obvious errors that can be equally bad for your blog.

1) "Writing" Your Post With Images

Now that Pinterest is the biggest thing since Facebook, bloggers are looking for ways to make their content as Pinnable as possible with eye-catching images. However, in an attempt to go image-heavy, some bloggers are burying important text in images. Here's an example of what I'm talking about (identifying details blurred to protect the well-meaning blogger):

blog post made up entirely of images with no alt text or descriptions

These pictures are the entire post. There is no text in the blog post other than the text in the images. This post is an extreme example — it doesn't even have a written title.

I found this blog through a heavily-repinned photo on Pinterest, so it did meet its presumed goal of being Pinteresting. But, oh boy, is it ever an accessibility and SEO disaster! For a quick glimpse of what's wrong with this picture (literally), let's take a look at the information a visitor with visual impairments would get from this post. Here's a screencap of this post as read by Fangs, a Firefox plugin that emulates a screen reader's output of a website. Again, I've blurred out information that could identify the blog.

screen reader results from an all photo blog post

Notice that Fangs doesn't "see" any of the text in the images. This all-image post would make a screen reader say a series of disjointed keywords to a visitor with visual impairments, and that's all.

That's bad enough, but here's another important consideration: that text isn't available to search engines, either. A search engine crawler would find a random arrangement of keywords in this post, just like the screen reader did. At best, the search engine would consider this "thin content". At worst, it would consider it spam.

There's nothing wrong with an image-heavy approach to blogging if it's done right. Striking images are wonderful, especially for wedding and craft bloggers, whose fans adore photos and arrive though highly visual sources like Pinterest or Stumbleupon. But you've got to remember that your human visitors all have different needs, and NONE of your robotic visitors have eyes.

If you've been hiding text in images, there are two things you can do to fix it. You could write out the text from each image as captions or in paragraphs below the photos, or you could enter the text of each image as alt text.

Not familiar with alt text? Then you might be guilty of image mistake #2.

2) Neglecting Alt Text

Even if you're not "writing" your posts in images, you might be neglecting your images' alt text, and that's a shame! Alt text assists visitors with visual impairments, provides valuable information about your images to search engines, and makes your images findable through visual search engines like Google Image Search and Bing Images. It also helps makes your site more useful to visitors on very slow connections.

Wordpress does a great job of encouraging you to put something in the alt text for your images; when you upload an image through the Wordpress media uploader, you're presented with this screen.

screenshot of the Wordpress media uploader

Whatever you type into the "Alternate Text" field will become the image's alt text. Easy as pie.

If you use Blogger, you'll need to take a little more initiative to provide alt text for your images. After you've uploaded a photo, switch to HTML view by clicking the HTML button above your post field...

Update!

Just a few days after this post originally went up, Google released a whole bunch of new updates to Blogspot, including an easy way to add alt text to images. Full details on Blogger Buzz.

Your images now make more sense to the whole Internet. Hooray!

3) Forgetting About Color Vision Differences

a red heart with black text that reads: not everyone can read this text

Color perception varies from person to person, and some color combinations in particular are hard for many people to see. If you have "normal" color vision, you may not realize that your favorite color combination is hard to read or totally invisible to others. For example, black text on a red background is invisible to some people with red vision deficiency (this is a color combo I see A LOT in graphics on wedding blogs).

There are some great resources online for learning more about color vision differences. Penn State University's AccessAbility site has a helpful rundown of common color combinations that are difficult for color deficient viewers to perceive. You can also use online tools to simulate the different types of color perception to test out color combinations before you run with them on your blog. Check out Color Vision for a cool color palette picker that can help you find color combos that are universally viewer-friendly. You can also view a simulation of how your site looks to people with different types of color vision deficiencies at Colorfilter.

Do you know of any blogging image trends that are really big mistakes? Let me know in the comments!

Selling Ads on Your Blog? You Need to Know Nofollow!

why, when, and how to nofollow links from your blog
Updated in September 2013 with new resources.

Most bloggers know that you have to disclose sponsored posts to your readers, but did you know that you should also let search engines know when links are sponsored by adding the "nofollow" tag to the link?

If you didn't, you're certainly not alone. This little detail is woefully under-explained and often overlooked. But don't worry, I'll get you up to speed today!

"Nofollow"? What's That?

It's a microformat tag added to the end of a link that instructs search engines not to "follow" the link. When a search engine encounters a link with a nofollow tag, it does not count the link toward the search engine rank of the target site.

You "nofollow" a link like so:

<a href="http://www.example.com/stuff_for_sale.html" rel="nofollow">My Awesome Sponsor</a>

If your link to your sponsor is an image link (for example, in a sidebar ad), your link to your sponsor will be wrapped around an image element. Make sure to put the nofollow tag inside the link element , not the image element. Look for the anchor tags wrapping the link element (<a> and </a>) to help you tell it apart from the image.

What Happens When I Nofollow a Link?

Adding the nofollow tag to a link tells search engines that you added the link to your post because you were paid to, or because you don't want to necessarily endorse the linked site.

A nofollow tag does not change what happens when your readers click a link, and the link will not look different to your readers. Also, nofollowed links are not harmful to the search ranking of linked sites (no matter what some less-than-respectable advertisers may tell you).

Why Do Search Engines Want the Nofollow Tag?

Despite the complexity and sophistication of their algorithms, search engine robots are kind of dumb. Even if you clearly disclaim your sponsored posts and advertisements in a way that your human readers understand, your robot readers won't know that you've disclosed your paid links unless you use the nofollow tag.

Google expects you to either add the rel=nofollow tag to the end of paid links, or redirect the paid links to an intermediate page on your site that's blocked from search engines in your robots.txt file. For more information, see Google's official policy on paid links.

What about Affiliate Links?

Good question. Nofollowing affiliate links was the subject of a lot of debate in the SEO world for quite some time, but in June 2012, Google's Matt Cutts gave this answer about nofollow-ing affiliate links:

In summary: Google can recognize affiliate links from most major services, so nofollow-ing those links is not quite as important. But, it doesn't hurt to nofollow them, either.

Do I Need to Add Nofollow to Adsense or Network Ads?

Adsense ads do not need a Nofollow tag since they redirect through Google Ad Services and/or Doubleclick before going to the advertiser's site.

Many other ad networks work in a similar way — my two favorite indie ad networks, Passionfruit Ads and Adproval, use the nofollow and redirect methods, respectively. If you're running banner ads through a network and are not sure if they're redirecting or nofollowing outbound links, check the ad network's documentation or contact them for more info.

Oh no, I'm already running ads without Nofollow! What do I do?

Well, first, don't freak out, it's fixable! There are a couple of different ways to do your nofollows. The technically simple, but potentially time-consuming way, is to go through your existing ads and sponsored posts to manually add the rel="nofollow" tag to each sponsor's URL.

If you're using a Wordpress plugin to handle your banner ads, that plugin may already take care of your nofollow needs for you. Many advertising plugins either add nofollow to ad URLs automatically or redirect the URLs so you're not directly linking to your advertiser. Check the documentation for your plugin to find out how it handles advertisers' links before you set yourself up for an afternoon of unnecessary work!

Another option for self-hosted Wordpress users is a redirection plugin. Lisa from Elembee has a tutorial on using the Redirection plugin to redirect affiliate links, which you can easily adapt to work for your sponsored post links or links in banner ads.

Further Reading

Hello World!

hello world

Welcome! I'm so glad you could join me.

If you're reading this post on Code it Pretty's inaugural day, you're probably a friend I made through my tumblr blog Favor Craver, and I want to thank you so much for your support and for visiting me here today. I've wanted to write a blog like this for years and your encouragement played a huge part in my decision to finally go for it.

So, what's Code it Pretty all about?

This blog is my love letter to the wedding-y, craft-y, food-y bloggers of the world who already have the basics of blogging down, but want to know more about how their sites work on the inside. I want to take you by the hand for a grand tour of the inner workings of your blog, and help you understand (and maybe fall in love with!) what you find in there.

If you're able to run a blog, you'll be able to use the tutorials here.

The tutorials and tech talk I post here will assume that you don't need another tutorial on how to upload a header image or change background colors. But, I won't assume that you know much more than the basics of HTML — and by basics, I mean that you know HTML is part of how your blog works. All of my tutorials are designed with the eager beginner in mind. And if you get stuck, let me know in the comments, on Twitter, or by email.

Code it Pretty is a friendly place to ask questions.

Cliché, but true: the only stupid question is the one you don't ask. That's doubly true when it comes to web design & development, where questions can have many answers, each of which can often lead to even more questions. If you're curious about digging into the code behind your blog, this is the place to be, and your questions are welcome.

So what's coming up next?

Oooh, you're gonna like this one! Tomorrow morning I'm going to unveil my Pinterest "gadget" for Blogger. You can get a little sneak peek of it in action right now in my left sidebar, but tomorrow I'm going to show you how to put it on your own Blogspot blog. Step-by-step, in full detail.

See you here tomorrow, bright & early! It'll be fun :)


Font in Hello World graphic: Mr. Bedfort by Sudtipos from the Google Web Fonts collection.