Eye Candy and Image SEO
Everybody loves images on websites. They’ve been described as “eye candy.”
There’s more to web images than meets the eye – they’re not just eye candy. In web language, each image has metadata (1) associated with it, representing the meaning of the image in words. This serves two main purposes – enable those who might not be able to see the images to hear a description of what’s in the image using screen reader software, and enable search engines to evaluate and index the image as content. The purpose of image metadata is to translate the meaning of the image into words.
Cut to the Procedure (and save a lot of reading)
Metadata Fields
There are four image meta-tags in html: Title, Description, Alternate (“Alt”), and Caption, along with the title and URL of the image, which are as important to search engines as the title of a website or post. Together, image meta is a hierarchical outline of meaning, with detail added by each tag.
URL
An image URL is entered by default in WordPress consisting of the “post ID number” assigned to the image. This can be edited if the image is “attached” to a post.
Image page URLs present both an opportunity and a problem. If you’re a photographer or journalist, you might want to add content to your image pages, and have the image pages indexed for their content. If you’re not in this situation, it might be a good idea to treat your images as subordinate content to your post. Google’s Panda update punishes sites for a high percentage “thin content,” such as a lot of indexed image pages with no text on them. A great way to avoid this problem is using the Yoast SEO plugin, and checking the box on the Permalinks tab: “Redirect attachment URLs to parent post URL.”
If you’re a Photographer or Journalist and intend to develop these pages, leave this unchecked
Image Pages as Posts
An alternative approach, when elevating non-redirected image pages to the status of a WordPress post, would be to take charge of the URL, matching the title with the URL slug. If you’re going to be doing this, there’s a fantastic plugin “Enhanced Media Library” that enables WordPress Category and Tag functionality on Image (media) Pages.
If you’re using these, you’ve got a new level of sorting and organizational control over image display in the Media Library, media taxonomy and archive options, quick sorting for gallery creation, and the ability to push these terms out to social media as hashtags, adding them to search channels and providing supplementary descriptors to your content on sites like Twitter, Google+, Tumblr, Pinterest, and Facebook.
Using the Enhanced Media Library plugin (courtesy of wpmudev.org)
Title
Take control of your image title if you want your image to be found in search for relevant content. Search engines have an “Image Search” option, and in order not to be lost in a sea of default “DSC####.jpg” results (that no one will be searching for anyway!), give your image a meaningful title.
WordPress default – useless title and empty metadata
Description
The Description is read aloud by screen readers, and posted along with the title and image to sites like Pinterest and Facebook, and is embedded in the post or page code when an image is added. It can also show up in a Search Engine Results Page (SERP) snippet underneath the display of the URL.(2)
Alt (Alternative Text) Tags
Alt tags are also read by screen reading software used by sight-disabled persons, and appear in page code, originally intended to deliver a verbal description of the image itself. I’ve seen content from my Alt tags included verbatim in SERP page snippets, even when alternative meta descriptions are present.
Metadata delivers Keywords
Since the widespread abuse of keyword metadata inside website <head> tags, search engines usually disregard them. Google reportedly doesn’t use them at all. But, in their quest to serve users and find indicators of relevance, Google looks at image metadata carefully, as mentioned above. Image metadata are a valuable resource when reinforcing the meaning of your content.
Avoid WordPress Defaults
WordPress creates default titles using item id’s and leaves other meta fields empty. If you don’t rewrite (at least) your image titles, you’re stuck with defaults producing obscure titles and empty metadata. You might have an image (and its page) titled “img_XXX” This is a missed opportunity. It’s the state of the vast majority of media in WordPress site media libraries.
Take Control of your metadata
It’s not only a good idea to control your image metadata in WordPress, it’s a great way to optimize your content for maximum discoverability. This process is also known as “Search Engine Optimization” of images, or “Image SEO.” (3)
The process of taking control requires mindful use of the image metadata fields.
How To Use your Image Metadata Fields in WordPress
Because of the way WordPress handles images and writes metadata to its database, there are several possible places to edit the data. It can be confusing. The confusion is compounded when you understand that an image inserted into a post has three available editors, two of which access the meta data, feeding two sets of data – one associated with the image itself, and the other associated with the instance of the image in a particular post.
WordPress Image Handling is confusing.
The Three Image Editors
1.The Media Library Image Editor
If an image is uploaded directly to the Media Library, it’s not “attached” to a post (yet), and it has its own “page” in WordPress, which can be edited like any other page or post (except for the URL). When the metadata is edited, and then attached to a post, the metadata follows the image into the post. If the title and description of the image are not edited before inserting into a post, those edits have to be done later through the Media Library Image Editor.
If you want to change the title of an image after it’s been imported to a post, you have to delete it from the post, change the title in the image editor, then re-import the image. Changes to the title in the Media Library will not affect the recorded metadata for that same image in a post.
The Media Library Image Editor can be accessed after this point only by mousing over under the image in the Media Library list, in list view only (as opposed to thumbnail view), and clicking “Edit.” Clicking from the post doesn’t get there.
From the Media Library list, it’s possible to attach a previously unattached image to a post (without visibly embedding the image in the post) – which then makes the URL of the image’s own page editable. This is a strange feature of WordPress, that the image URL is only editable when the image is “attached” to a post.
Doing this makes an image uploaded directly to the media library more editable, even though the changes won’t get into the post version of the image.
Acessed only from the Media Library – while in list view!
This might be useful if you plan to develop the image’s own page with more text and content. As mentioned above, a safer choice to avoid having a lot of pages indexed with little content is to use the Yoast SEO plugin to redirect your images to the post or page they’re on.
(Please add any insight you might have about this feature in the post comments!)
2. The Post Media Editor
You see this after clicking “Add media”
While embedding into a post, the Image Library Media Editor appears – only when inserting the image for the first time.
When an image is selected (checked), the metadata editor appears. The title can be changed here, but that change will stay with the image in the Media Library. Same for the Description.
After the image is entered into the post, the Caption and Alt tags for this instance only of the image are editable in the Post Media Editor, and are no longer attached to the metadata first recorded with the image. The url, title and description are beyond reach at this particular stage, and will be the same for another instance of the image in another post. (4)
After bringing an image in, this is the only editor you’ll see associated with the image in the post.
Access to changes of post-related image metadata is through the Post Image Editor, which is accessed by mousing over the image in the post and clicking the pencil icon.
The image’s own page is never accessed by the Post image editor – only from the Media Library Image Editor..
3. The “Edit Image” Button
This button appears in both the Post and Media Library Image Editors.
This editor allows for manipulation of the image, including crop, resize, and rotate. It’s the editor without meta fields.
One way to tell which Editor you’re in – and it goes to another editor!
Here’s How to Add Images
Adding to a Post
- Start writing a post
- Click “Add Media”
- Upload your image
- Click “Edit” when it finishes “crunching”
- Add meaningful metadata
- Select your insertion preferences (alignment and size)
- Insert it into the image
- Changes? Mouse over the Image and click the Pencil icon
- Refine your image display options for size and alignment
- Update your Alt tags to reinforce post keywords
- Give it a caption
- Click done.
To Edit the Image’s Page
Go to the Media Library
Click the list view icon
How to Access the Media Library Image Page Editor
Mouseover near the image and click “Edit.” (You won’t see it until you mouse over it.)
Make your changes on the page, including URL and additional description text if desired.
If you want the page to have stand-alone SEO status, disable the Yoast SEO plugin’s Media URL redirection feature by un-checking the box on the Permalinks tab: “Redirect attachment URLs to parent post URL.”
Each media item will have all the authority of a post. Make sure you edit all of them to avoid Panda penalties!
(1) Not to be confused with embedded image metadata types such as EXIF, containing information such as file size, copyright and exposure information (back)
(2) With WordPress 3.5 and higher, WordPress began stripping title meta from images as the image is inserted into a post. This is harmful to the cause of keyword reinforcement, although it reduces clutter and confusion for those using screen readers. It’s possible to restore this functionality in WordPress by using the terrific lightweight plugin “Restore Image Title.” Images added since WordPress 3.5 will have to be added again to get the image title into the WordPress database and served in the post or page code. (back)
(3) There are many other ways to optimize a site, including page structure and social media outreach.(back)
(4) From the WordPress Codex:
The data entered on the Edit Media page is often used by attachment pages and galleries if the theme or plugin chooses to display it, and the data is also used as the default values at the time an image is inserted into a page. Once the image has been inserted as an individual image, it becomes disconnected from the data in the media library and you can use the Image Details screen to update it on a per-image basis.