Title Attribute for Post Thumbnail

two men shake hands - bronze statues in Calagary/BCThe ‘featured image’ in WordPress automatically outputs the image alt attribute, but no title attribute.

Those two attributes are used for different reasons:
– the alt attribute is used to output alternative information if the image is inaccessible, for instance if the user has opted not to show images in the site, or for screen readers for accessibility reasons;
– the title attribute would present additional information about the image, and is shown by some browsers when you hover over the image.

For a WordPress ‘featured image’, the code below is taking the image title as you see it in the media library,  to be used as the title attribute.

The influence on search engine optimisation is not clear – it seems that the alt attribute is given more importance than the title attribute.

Back to the coding – To add the image title of the featured image as the title attribute to the img tag, a little filter function is needed, added  to the  ‘post_thumbnail_html’ filter.

Instead of just adding the code to functions.php of your theme, where it would get lost when you switch themes, it is more universal to create a basic plugin:

<?php
/*
Plugin Name: Featured Image Title Attribute Output
Plugin URI: n/a
Description: adds the image title as the title attribute to the 'featured image' output.
Version: 1.0
Author: alchymyth
Author URI: http://www.transformationpowertools.com/wordpress
License: GPL2
*/

add_filter('post_thumbnail_html','add_post_thumbnail_title_attribute',10,3);

function add_post_thumbnail_title_attribute($html, $post_id, $post_thumbnail_id) {

if( $html == '' ) {
return $html;
} else {
$out = $html;
$thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));

if ($thumbnail_image && isset($thumbnail_image[0])) {

$title = $thumbnail_image[0]->post_title;
if($title) {
$output = ' title="' . esc_attr($title) . '" ';
$out = str_replace( 'class=', $output . 'class=', $html );
}
}
}
return $out;
}
?>

Upload this as a appropriately named file into the plugins folder of your WordPress installation, and activate it like any other plugin from dashboard – plugins.

Mini SEO – a Meta Description Field for Posts and Pages

Modern search engines do not rely on meta descriptions and meta keywords anymore for your ranking.

However, they do preferably show a proper added meta description instead of the first few words of the post or page.

If you can enter this meta description into your WordPress blog or CMS, specifically for each post and static page, you can fine tune what you would like your customers to see with the search results.

Most users would download and install one of the many SEO plugins, which often come with a lot of unwanted features.

With a bit of programming, you can add your own ‘Meta Description Field’ below the post/page editor.

The first part of the code needs to be added into functions.php of your theme:

// 'Custom Meta Description' field below post/page editor
add_action('admin_menu', 'custom_meta_desc');
add_action('save_post', 'save_custom_meta_desc');
function custom_meta_desc() {
add_meta_box('custom_meta_desc', 'Add meta description <small>(if left empty, the first 200 characters of the excerpt will be used)</small>', 'custom_meta_desc_input_function', 'post', 'normal', 'high');
add_meta_box('custom_meta_desc', 'Add meta description <small>(if left empty, the first 200 characters of the excerpt will be used)</small>', 'custom_meta_desc_input_function', 'page', 'normal', 'high');
}
function custom_meta_desc_input_function() {
global $post;
echo '<input type="hidden" name="custom_meta_desc_input_hidden" id="custom_meta_desc_input_hidden" value="'.wp_create_nonce('custom-meta-desc-nonce').'" />';
echo '<input type="text" name="custom_meta_desc_input" id="custom_meta_desc_input" style="width:100%;" value="'.get_post_meta($post->ID,'_custom_meta_desc',true).'" />';
}
function save_custom_meta_desc($post_id) {
if (!wp_verify_nonce($_POST['custom_meta_desc_input_hidden'], 'custom-meta-desc-nonce')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$customMetaDesc = $_POST['custom_meta_desc_input'];
update_post_meta($post_id, '_custom_meta_desc', $customMetaDesc);
}

The second part will be added into header.php, below the <title> tag:

<meta name="description" content="<?php
if( is_single() || is_page() ) :
$text = get_post_meta($post->ID,'_custom_meta_desc',true);
if(!$text) $text = ($post->post_excerpt) ? $post->post_excerpt : substr($post->post_content, 0, 200).'...';
echo esc_attr(strip_tags(apply_filters('get_the_excerpt',$text)));
else :
/* optional area to program meta descriptions for index and archive pages, etc */
endif; ?>" />

meat description input field
'Meta Description Input' for posts and pages

The new input field will show directly below the post or page editor window.

Simply add your meta description text into the field, and press the usual ‘update’ button;
if left empty, the meta description will show the first 200 characters of the post or page.