Using the TITLE and ALT attributes for tags in SEO

Part of optimising your posts and pages for search engines and users, is to ensure you are using simple tips like adding ALT attributes and TITLE attributes to your image tags and links.

I’ve noticed that a lot of themes nowadays are being designed so that you can add your own logo/ header images and change footer copyright text. A missing component from an SEO point of view however, is that there isn’t always an automatic TITLE or ALT attribute on these images and links.

ALT stands for alternative text, so that if someone is using a screen reader or their browser is blocking images, then they see the alternative text. This is also helpful for Google, as it cannot read the image, so it reads the ALT to identify the image content.
Now if you are using that image/logo as a link to a page on your site, then Google uses the ALT attribute as the anchor text – so this is the value for SEO.

The TITLE attribute is for giving information to the user who is viewing the page, by displaying a tool tip as you hover the cursor over the image or the link. It isn’t currently indexed by search engines (though this may have changed), however it is useful for the person to know whether to click on an image or a link. It may also provide some relevancy to search engines in indexing your page, now or in the future.

For SEO, the anchor text and the link itself, are the most important. Anchor text is the text contained between

<a href="yourlink"> THIS IS YOUR ANCHOR TEXT </a>

So to add TITLE and ALT attributes, open up your themes header.php and footer.php files and add this to the footer credit link and the logo header link:

title="<?php echo esc_attr(get_bloginfo('name'));?>"

and add this to your img tag:

alt="<?php echo esc_attr(get_bloginfo('name')); ?>"

so it might look something like this depending on your theme:

<div id="top-area">
     <?php do_action('header-logo'); ?>
	  <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr(get_bloginfo('name'));?>" >
          <?php $logo = (get_option('theme_logo') <> '') ? esc_attr(get_option('theme_logo')) : 
           get_template_directory_uri() . '/images/logo.png'; ?>
	<img src="<?php echo $logo; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" id="logo"/></a>
</div>

and footer credits might look something like this:

<p class="copyright-credits">&copy; 
     <?php echo date('Y'); ?> <a href="<?php echo esc_url(get_option('siteurl')); ?>" title="<?php echo esc_attr(get_bloginfo('name'));?>" ><?php echo esc_attr(get_option('blogname')); ?></a></p>