In case you haven’t notice, Icons are all the rage these days. All the cool kids are using them, so it only makes sense that you should use them too. And what better place to use one than in your breadcrumbs.

Not every theme uses breadcrumbs, so we’ll give a quick explanation of them. Breadcrumbs are a link “trail” to give a visual representation of the path used to arrive at this page.

Besides giving an easy way for visitors to go back to the previous, parent page or home page, they’re good for SEO (Search Engine Optimization).

As with most things Genesis, there is a filter that allows you to easily modify the breadcrumb display, including the “Home” text:

add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {
    $args['home'] = 'Home';
    return $args;
}

“Home” is the Genesis default text for the home breadcrumb link. Changing “Home” in the function above will change the Home text that appears in your breadcrumbs.

This works great if you’re only changing the text, but this function encodes html using esc_html(), so if you change it to add an icon or inline image, the code will display instead of the image.

Replace The Home Text With A Font Awesome Home Icon Using A Genesis Filter

Of course, this can be done using css but there’s another way using a different breadcrumb filter. This filter allows you to replace the “Home” text with your html code to display icons or images. The filter name is “genesis_home_crumb”, which does just as it says and filters only the Home portion of the breadcrumb.

Before we can use this filter we have to access the Font Awesome library. On the Font Awesome getting started page, they provide several methods. The first method shows you how you can use the Font Awesome CSS file that’s hosted on the Bootstrap CDN so you don’t have to worry about uploading the files to your own server (if you prefer to host your own, there’s an example for that also.

The proper way to include this file is by using WordPress’ built in wp_enqueue_style function:

add_action( 'wp_enqueue_scripts', 'youruniqueprefix_load_scripts' );
function youruniqueprefix_load_scripts() {
    wp_enqueue_style( 'youruniqueprefix-fontawesome' , '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' ); // font awesome css from cdn
}

Now that we have Font Awesome set up, visit their website to find the icon you want to use. In our case, we’ll use the fa-home icon. If you visit the fa-home icon link, you’ll see the code to add to include the font on your website: <i class=”fa fa-home”></i>

If we replaced “Home” with this code in the genesis_breadcrumb_args filter above, it would show the html and not the icon. So how can we replace the “Home” text with the icon? Using the “genesis_home_crumb” filter, we can rebuild the “Home” part of the breadcrumbs with our html.

Add the function below to your theme’s functions.php file, and your “Home” text will now be replaced with the Font Awesome “fa-home” house icon. Of course, you can use any html you want, so if you are using a different icon set, or want to use an inline image, simply replace the code with your own html and you’ll see the results.

// Replace breadcrumbs "Home" with Home Icon
add_filter ( 'genesis_home_crumb', 'youruniqueprefix_breadcrumb_home_link' ); // Genesis >= 1.5
function youruniqueprefix_breadcrumb_home_link( $crumb ) {
    $crumb = '<a href="' . home_url() . '" title="' . get_bloginfo('name') . '"><i class="fa fa-home"></i></a>';
    return $crumb;
}

One of the easiest ways to optimize the content of a page is to focus on the images. Most pages contain images, whether they be photographs, illustrations or icons. With a few simple tweaks they can help your ranking and get you some extra visitors.

Optimizing Images? But Why?

The big problem here is that search engines can’t see images. Wait, let me rephrase that; they can see that there’s an image, they can even recognize images in terms of their pixels, but they can’t assess the content based on the image alone.

Google do their best to leverage images found on the web, but they need your help..
Let’s say Google comes across the following image (I’m a bit of a petrolhead, so I used this image of a Ford GT40 from Sumlin as an example):


Search engines know that there’s an image because we used the HTML <img> tag, but the only information they have about it is the URL. Humans can easily see that it’s an image of a car, but search engines don’t have this understanding. However, we can help search engines better understand images via the alt-attribute and a good file name.

Alt-attribute

The alt-attribute specifies an alternate text if the image can’t be displayed (perhaps because of an error, slow connection, screen reader etc.)

This attribute is not only useful for visitors, but also for search engines. It gives them a clue as to what the image is about. That’s why it’s a good idea to use important keywords in the alt-description (once again; don’t go for keyword stuffing).

If you inspect the code of our previous image, you’ll that it already has an alt-description:

<img src="ford-gt40.jpg" alt="Ford GT40 in Gulf colors" />

Via this alt-attribute we've provided search engines with two important pieces of information:

• It's a photo of a Ford GT40.
• It's in Gulf colors.

Now, if someone uses ‘GT40 Gulf Colors’ or a similar query in Google Images Search, the chances are that our image will pop up.

As you can see; adding an alt-description is very simple, you just need access to the HTML markup of the image.

The media manager in WordPress
Some content management systems such as WordPress allow you to specify an alt-description when you upload an image.

File Name

If you want to optimize your images even further, you could change the file name. By using a descriptive file name we can help search engines.

A typical photo from a digital camera will be named something like ‘DSC0123.jpg’. If we upload this photo and use it on our page, it says very little to search engines because the filename isn’t very informative. Sure, we could use the alt-attribute, but we can do even more by changing the file name.

So instead of calling our photo ‘DSC0123.jpg’ we could call it ‘basket-of-red-apples.jpg’ for example. If you’ve read our article on how to create an SEO-friendly URL structure you already know that it’s best to use hyphens to split words. Using other separators such as underscores (_) plus-signs (+) or no separators at all, should be avoided. By using hyphens search engines are able to recognize the composite parts as individual words.

Don't Forget the File Size!

As you might have heard already; Google have incorporated site speed in search rankings. This means that page loading time is one of the ranking factors; the rise of smartphones and mobile internet playing a big role in this. Unsurprisingly to, because a slow site is not very user friendly.

Image file size is one of the elements that dictates the time it takes to load a given page. Optimizing your images can therefore improve performance. This might not be noticeable on a page with one or two images, but if you have to load dozens of images it can make a huge difference.

File size largely depends on the resolution of the image. Higher resolution files are usually larger, meaning that we have to balance quality and file size.

In order to make an informed decision, we need to consider the several image file types and their advantages.

The three most commonly used file types on the web are JPG, PNG and GIF:

• JPG is an image file type with an adjustable degree of compression. By compressing an image it discards certain pieces of information that the eye is least likely to notice. Because of this, JPG images are frequently used on websites.
• PNG are often used because they support transparency (unlike JPG files). PNG is a lossless alternative for the GIF format.
• GIF images are lossless for images with 256 colors or less. This format also supports animations, which is why it’s still used on certain websites.

It’s impossible to tell which image file type is best. JPG, PNG and GIF files are all useful in specific situations. If you want to optimize your images, I suggest you pick a file type with an acceptable quality and the lowest file size. In case of doubt, simply try various types and compare them.

One thing that you should keep in mind is that it’s best not to use HTML to resize images. Uploading a large image (e.g. 800 x 600 px) and displaying it in a smaller resolution (e.g. 400 x 300 px) via HTML width and height attributes will waste bandwidth. With the rise of Responsive Web Design, images are often loaded into a web page, then displayed depending on the size of their containing element, but that's a whole other ball game and image optimization under these circumstances is still in its infancy.

If you want to analyze the performance of your images you can use YSlow or Google Page Speed Insights. The following optimization techniques might also come in handy:

• Clever PNG Optimization Techniques
• JPEG Optimization
• Optimizing GIF Images

Closing Remarks

One of the benefits of optimizing your images for SEO is that they can appear in Google Image Search, potentially pulling in some extra visitors.

Image Search doesn’t help every business, but in some occasions it can get you some highly relevant traffic. Especially for recipes, products and digital goods (icons, stock photography...) this can be very useful. Either way: it doesn’t hurt to optimize!

If you’re done optimizing your images, don’t forget to submit an Image Sitemap. This will help search engines find and index your images.

Conclusion

Optimizing images for SEO comes down to three factors: file name, file size and most importantly the alt-attribute. The file name should not be a random string of letters and numbers but descriptive keyword(s). The file size should be kept as low as possible to improve your site speed (one of Google’s ranking factors). And last but not least: don’t forget to add an alt-description to your images. It’s one of the easiest ways to optimize your images for SEO.

Macaw offers some great tools for designing and maintaining collections of components. In this quick tip tutorial we're going to use Macaw’s Components Panel, along with its Global Styles features to build ourselves a versatile button library.

Prototyping With Macaw

Interested in taking your skills further? My new course, Rapid Prototyping With Macaw has just been published on Tuts+. Throughout 17 lessons I’ll show you how to use Macaw effectively in a modern web design workflow. Go and take a look!

Let’s Build a Button Library

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.