What You Should Know About Image Maps

Lately, I've seen a lot of image map tutorials circulating on Pinterest. And, as an unfortunate side-effect, I've also seen a lot of poorly-implemented image maps on blogs.

Image maps are often called an "easy" alternative to HTML & CSS, but a lot of that ease comes from cutting corners. Some tutorials leave out the steps you need to take to make image maps accessible and search engine friendly. Those cut corners can negatively impact your readers' experience.

This isn't a tutorial on how to make an image map. Instead, this is a primer on image map best practices. Use this along with your favorite image map tutorial to ensure that your maps lead all of your readers in the right direction!

Every Image Map Maker Should...

Provide Alt Text for the Map

Alt text (alternative text) is a required attribute for image elements, but many image map makers leave it out. When you create an image map, enter alt text for the base image and for each of the linked sections of the image. This helps people with visual impairments use your image map, and helps clarify the content of the image map for search engines.

Make Large Clickable Areas

Don't make it a challenge for your readers to click on the right part of your image map! Expand the clickable area so that it's large enough to cover the entire shape you're linking. It's ok to make the clickable area slightly larger than the shape itself to ensure that the entire shape is clickable. If you do go oversized, just give your clickable areas a bit of extra space around the edges so your readers don't accidentally click on the wrong area.

Order the Links Properly

Many people with disabilities use keyboard navigation to move through a blog. When you're setting up your image map, order the links as they appear from left to right in the image. This way if someone is using the "Tab" key of their keyboard to move through your links, they'll get to each link in a predictable pattern.

When you get your HTML output from your image map generator, check that all of your links are in order before putting the map up on your blog. If they're not, move them to the correct place or use the tabindex attribute^[1] to put them in order.

Watch the File Size

Blog images tend to have a large filesize to begin with, and adding the coordinate data for the image map to the mix can increase the overall "weight" of your page. Big image maps will slow your page load time, especially on mobile devices. One small image map on an image with a small file size is generally not a problem, but if you're using large (or lots of) image maps, you should test your page out with Google's page speed tool. If your image maps are bulky, the tool will provide suggestions for minimizing your images' filesizes to improve load times.

If You're Using an Image Map for Navigation...

First, Reconsider

Image maps are not recommended for navigation for three main reasons:

1. They are difficult for people with disabilities to use. For example, some screen readers only read the alt text of the base image to people with visual impairments, and only make the first link clickable ^[2].
2. Readers who use translation services to read your blog won't be able to translate the text in your image map.
3. Search engines don't give links in an image map as much attention or "weight" as they'd give to regular HTML links^[3].

After you've considered all that, if you still really, really want to use an image map for your navigation, make sure to:

Provide A Set of Text Links, Too

To assist your visitors with disabilities, international readers, and the search engines, add a set of text links as a navigation alternative below your navigation image map — the closer the better!

Avoid "Mysterious" Navigation

If you're building a navigational image map, don't do this:

And not just because that's ugly — I'm a developer, not a graphic designer, cut me some slack ;)

If that's your header navigation, your visitors may not realize that those images are clickable links. They may assume they're your logo or just decorative. Be sure to label the clickable areas with visible information about where the links will take your readers (in addition to the alt text, not instead). Here's an more user-friendly (but still super-ugly) version of the image menu above:

In this version, each of the image areas are labeled so that readers will have an easier time understanding that the images are links.

Phew! That's a lot to absorb, I know. Image maps aren't quite as easy as they might seem at first glance, but now you know how to make them as user-friendly and search-engine friendly as possible.

Alternatives to Image Maps

If you're having second thoughts about using an image map, here are some resources for building social media buttons and navigation menus with HTML & CSS.

• How I Set Up My Social Media Buttons - my tutorial on how I made my social media buttons with HTML and one little line of CSS.
• Turning a List into a Navigation Bar - from 456 Berea Street. An oldie but goodie, this comprehensive & well-written tutorial shows you how to make a basic navigation menu out of an HTML list.
• HTML and CSS - Lists & Navigation - from Coding for Good. Part of an HTML/CSS tutorial series, with excellent instruction and resources on creating your own navigation menu.

Footnotes:

1. University of Arizona Web Developers Group on tab order and the tabindex attribute.
2. OSU Web Accessibility Center on image map accessibility.
3. Columbia University Information Technology on the basics of SEO.

Map image in title card CC-BY Norman B. Leventhal Map Center at the Boston Public Library

Readers Ask: How I Set Up My Social Media Buttons

I've had several readers ask how I made my social media buttons line up vertically like they do in the sidebar to the right.

The answer is: HTML & CSS! But, there's a bit more to the answer than just those acronyms, so let me show you how it's done.

What You'll Learn

How to make your social media icons line up vertically in a sidebar. If you'd like to take a sneak peek at the HTML & CSS we're going to use, you can see an interactive demo on Codepen.

What You Need To Use This Tutorial

You need a blog that allows you to add custom HTML widgets/gadgets in the sidebar. Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're all set.

You also need a set of social media icons. The buttons in the screenshot above are from Brandi Girl Blog. My current buttons are from Icomoon. There are also many free and premium options out there. The HTML I'll give in this tutorial is suitable for any icon set.

First, Upload Your Icons

If you use Blogger, you can upload your icons to your Picasa Web Album for your blog. If you're on self-hosted Wordpress, upload your icons to your media library. Typepad users can upload images to the File Manager. No matter what platform you're on, if you prefer to use Photobucket or another image hosting service, you can!

Once you've uploaded your images, you can start putting together the HTML for your buttons.

Next, Write the HTML

You can use my Codepen demo as a template, or you can write out your HTML on your own.

Before you start writing your HTML, make sure you have a suitable text editor — Notepad is built-in on PCs, TextEdit is built-in on Macs. Do not write HTML with word processing software.

For each of your social media buttons, you're going to use the same few lines of HTML. Here's the skeleton of one button's HTML:

<a href="" title=""><img src="" width="" height="" alt=""></a>

If you're familiar with HTML, you'll recognize that as the HTML to create a clickable image. If you're not familiar with HTML, let me break down each part so you know what goes where.

<a href=""

Your social media link goes here. For example, if I'm creating a button for Twitter, I'd fill it in as: <a href="http://www.twitter.com/MMosley".

An email link is slightly different. To link to email, fill it in like this:

<a href="mailto:marie@codeitpretty.com"

title="">

Enter the name of the social media service you're linking to here. To continue the Twitter example, I'd enter it like this: title="Twitter">. The text you enter here will show when your visitors hover over your social media button.

<img src=""

Here you'll enter the direct link to your social media button image. If you uploaded it to your Picasa album, click on the image in your album to reach its full-sized version, and right click on the image to copy its location. If you're on self-hosted Wordpress, you can get the link by clicking "edit" beneath your image in your media library and copying the File URL. Typepad users, you can find the direct URL to each image by right clicking its title your File Manager.

width="" height="" alt=""

Here you'll enter your images' width, height, and alternative text. I'd fill it in like this for my Twitter button: width="52" height="52" alt="Twitter icon".

After everything's filled in, the element closes with a </a> tag.

Putting it All Together

Now that I've broken the HTML down to bits, let's put it back together so you can see what the complete HTML for a social media button looks like:

<a href="http://www.twitter.com/MMosley" title="Twitter">
<img src="http://www.example.com/twitter.png" width="52" height="52" alt="Twitter icon"></a>

Repeat that process for each of your social media buttons until you've marked up each one. Then, paste your HTML into a sidebar widget. On Blogger, use an HTML/JavaScript gadget. On Wordpress, enter it in a text widget. On Typepad, use the "Embed your own HTML" option in your Content menu.

Make the Buttons Vertical

Depending on the size of your buttons and the width of your sidebar, your buttons may already be vertical. In that case, you're done. Congrats & enjoy your buttons!

But, if your buttons are displaying horizontally, you'll need to take another step to get them lined up properly.

Go into your sidebar widget and add this line at the very top of the HTML:

<div class="social-sidebar-buttons">

Then, scroll down to the very bottom of your HTML and add this line:

</div>

You've just wrapped your HTML in a div! A div is like a container for HTML — when you apply CSS to a div, it affects the entire container. We're going to use CSS to line up your buttons vertically.

Adding the CSS

Now that your HTML is all wrapped up, you just need to add a bit of CSS to force your social media buttons into line. If you're on Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

Once you've found the spot for your CSS, enter this into the custom CSS field:

.social-sidebar-buttons {
width: XXpx;
}

Replace XX with your buttons' width. This makes the div "container" that's holding your buttons contract to the width of your buttons, forcing all of the buttons into a vertical line. Save your CSS to apply it to your blog.

Further Customization

You may need to tweak the left or right margin of your social-sidebar-buttons div to get it into exactly the right spot in your sidebar. You can add a margin to your div's CSS like this:

.social-sidebar-buttons {
width: XXpx;
margin-left: XXpx;
}

If you want a right margin instead, enter margin-right instead of margin-left. Replace XX with the number of pixels you'd like to move your buttons — start small, then increase as needed.

Google Authorship - What It Is and How To Get It

This post is OUTDATED. In August 2014, Google announced that they would no longer show authorship in search results or process author information. More on this change from John Mueller, a Webmaster Trends Analyst at Google, here: https://plus.google.com/+JohnMueller/posts/HZf3KDP1Dm8.

Google Authorship has been around since the summer of 2011, but I've had a recent flurry of questions about it from readers. So, here's a primer on the What, Why, & Hows of Google Authorship.

What is Google Authorship?

Google's Authorship gives web content a human face — literally! Have you noticed the portrait photos next to some Google search results? Here's an example, with my goofy mug:

When you see a photo of a blogger next to their post in search results, it means they've claimed their content through the Google Authorship program.

The Authorship program associates content directly with its author, not just with its domain. This is mutually beneficial for authors and Google — it helps boost author's profiles while it helps Google weed out spam and "thin" content.

Why should I sign up?

The portrait thing is neat and all, but there are other good reasons to sign up.

• Higher click-through rate on "authored" links. Many SEO analysts and bloggers have noticed an increased click-through rate on their links that include their authorship markup (detailed examples here and here).
• Access to Authorship data. When you create an author profile, your Author stats will appear in your Google Webmaster Tools account (right now it's in the "Labs" section). The stats show you how many times your content has been shown to people using Google search, how many clicks those links have received, each link's click-through percentage, and each link's average position in Google search results.
• Authorship is portable. Once you've set up an author profile, you can use authorship markup to link posts from all over the web to your account. This is very useful if you start a new blog or do frequent guest posts — your content will stay connected to you wherever you go! (More details on portability at the end of this post).

There's a little "bonus feature" to authorship, too. If a visitor clicks on your authored link in search results, spends a little while on your blog, then uses their browser's "back" button to return to search results, they'll see a few more links from you. It looks like this:

How to sign up for Google Authorship

1. Get a Google+ Account: If you haven't joined Google+ yet, get to it! And come say hi to me while you're at it :)
2. Upload a headshot profile photo: Your photo should be a real photo of your real face.
3. Link your Google+ profile to your blog: There's three different ways to do it:
   • For Blogger: If you're on Blogger, you can switch your Blogger profile over to a Google+ profile through the Google+ link in the Blogger dashboard. Detailed instructions are in the Blogger documentation.
     Once you've switched over to a Google+ profile, make sure you have the "Posted By" author link turned on for your posts by going to Layout > Blog Posts and checking the "Posted By" option (screenshot here).
   • For other blogging platforms: If you use another blogging platform and you have a custom domain for your blog, you can link your blog to your Google+ profile via email. Instructions for the email method are on the Google Authorship page.
   • Everyone else: If you're not on Blogger and you don't have a custom domain, you can still connect your blog to Google+ by placing a link to your Google+ profile on your blog, then linking back to your blog from your Google+ profile's "Contributor To" section. Complete instructions for this method are under "Option 2" on this page in Google's support documentation.

What Happens Next?

Once you've connected your blog to your Google+ profile, Google will look for your name on your posts, so make sure you've got a "byline" on each post with your name as it appears in your Google+ profile. Usually that's a "posted by" or "written by" link in your post's header or footer area.

Exactly how long it will take for your portrait to show up in search results will vary, and Google doesn't give an estimate of how long it will take. If you're getting anxious, check one of your posts with Google's Rich Snippet testing tool to make sure you have all the right markup. If everything's in place, then it's only a matter of time before you see your smiling face in search results!

Portable Authorship

Earlier I mentioned that you could add Authorship markup to guest posts. Here's how to do it.

When you submit your guest post, add Google+ to the list of social media links you provide for your bio. Mark up the Google+ link in this format:

<a rel="author" href="https://plus.google.com/your-google+-id-here/">Google+</a>

(Make sure to replace "your-google+-id-here" with your actual Google+ ID number. You get that number by visiting your Google+ profile and copying the URL from your browser's address bar.)

When the post goes live, add the blog to your "Contributor To" profile on Google+, and Google will grab your authorship markup from the post and associate it with your author profile.

You can use this same process to associate your contributions to any website with your profile.

Further Reading

Like all things in the SEO world, Google Authorship is a big topic, and I've only scratched the surface here. Here's some more insight on the authorship program:

• How to Prepare for AuthorRank and Get the Jump on Google from SEOMoz. Somewhat theoretical but interesting read about the possible impact of Authorship on search results.
• Google Authorship: Are You Taking Full Advantage of It? from Search Engine Journal. Deeper detail on why you should set up an author profile.
• 7 Ways to Make Your Google Authorship Picture Unique from Evolve Creative Group. A bit of helpful fun if you can't decide on a profile picture.

Book stack photo CC-BY Horia Varlan

Automatic Post Signatures for Blogger

Do you want to add a signature image to your Blogger posts, but cringe at the idea of going back through your archive to add it to all of your older posts?

You can automatically add a signature image to every one of your blog posts — old and new — with one CSS rule.

Here's why it's so nice to do it the CSS way:

• You only have to do it once. When you add your signature to your blog's CSS, it will automatically appear on every one of your blog posts.
• It's easy to change. If you decide to change your signature image, just change one line of CSS and the signature will update on every single post.
• No borders. When you add your signature image with CSS, it doesn't get the border that Blogger automatically adds to your post images.
• Pinterest-proof. Your readers can't accidentally Pin your signature if you add it with CSS. The Pinmarklet and the official Pin It buttons ignore CSS images.

Ready to give it a shot? All you need to get started is a signature image and your Blogspot blog.

Let's get to it!

Upload Your Signature Image

Upload your signature image to the Picasa Web Album for your blog. After you upload your image, click its thumbnail in your blog's album to open its full-sized version. Then, click the "Link to this photo" link near the bottom of the right column. Set the "Select size" dropdown menu to "Original size" and click the "Image only (no link)" option below the size menu.

Once you've made those two selections, open a new browser tab or window to go to Blogger for the next step. Leave the Picasa page open, you'll need it again soon.

If you don't see the "link to this photo" option, or if the options don't match what you see here, you can get your image's URL by right clicking it and selecting "copy image location" or "copy image URL" from the menu.

Add The CSS

To add CSS to your blog, go to Template > Customize > Advanced > Add CSS in Blogger.

Paste the CSS below into the "Add custom CSS" box:

.entry-content:after {
content: url(YOUR-IMAGE-URL-HERE);
margin-left: 250px;
}

Now, replace YOUR-IMAGE-URL-HERE with your embed image URL from the Picasa album. Make sure to copy & paste the complete URL from the "embed image" box — it will be long!

Here's a filled-in example:

.entry-content:after {
content: url(http://lh6.googleusercontent.com/12345ABC/image.png);
margin-left: 250px;
}

The margin-left of 250px is a starting point; increase or decrease that number until your signature is positioned where you'd like it to be. If you'd like the image to appear at the left edge of your posts, you can remove the margin-left declaration entirely.

Once you've got the signature aligned the way you like it, press the "Apply to Blog" button. Now go check out your posts. You should see a signature image at the end of every post. Nice work!

Additional Placement Options

Signatures on Post Pages Only If you've come this far, you'll see a signature at the bottom of all of your posts, both on your home page and on individual post pages. If you use "read more" breaks, or you just don't want to show signatures on the home page, you can use Blogger's conditional tags to restrict the signature image to post pages only. Detailed instructions for this are in the Appendix.

Signatures for Group Blogs If you have more than one author, you can give each author their own signature with this variation in the Appendix.

Signatures with LinkWithin or nRelate If you use LinkWithin or nRelate, your signature may appear below your related posts thumbnails (this doesn't always happen). Instructions for moving your signature above related posts thumbnails can be found in the Appendix.