How to Optimize Images, Video, and Other Media in Drupal

Images and video are everywhere on the Web. Flash and other media are not far behind. Great graphics, animations, or videos add a lot of value to an otherwise boring web site. The drawback is that search engine spiders cannot read the content of these files.

Nothing kills your site's searchability faster than embedding all your best keywords into graphic or Flash files. Users see them just fine but search engines see nothing. It is extremely important to communicate as much information as you can to the search engines about each graphic or media piece that you use on your site. Google Image Search uses the file name and the alt tag to determine what the image is all about.

Other services, like YouTube, Vimeo, and video search engines, need help to determine what your video is about so that they can show it to people that are interested in watching your masterpiece. Make sure that you can take advantage of these powerful streams of traffic by adhering to the following guidelines.

File Names

The first and easiest way to identify what the file is about is to use a descriptive file name. A filename like img0004.jpg does nothing for you. However, president-obama-eats-donut.jpg is descriptive, keyword-filled and does wonders for the findability of, say, a presidential pastries web site.

The file extension (.jpg) also tells the search engines a lot about what that file is and how to display it to users. Make sure your videos have video extensions, your flash files have flash extensions, and so on.

Problem: Drupal's image upload feature renames the files into meaningless drivel.

Solution: Download the FileField Paths module from the following link, https://drupal.org/project/filefield_paths. This handy tool lets you use node tokens to rename images on upload. So, for example, you could use the node title as the source of the filename. This isn't perfect for every situation but it's a huge step in the right direction.

The Alt and Title Attributes

The alt attribute specifies alternative text to display if the image, movie, or other media can't be displayed. Suppose someone has images turned off in their browser settings (common on dial-up connections and text-based browsers) or the images get moved. The alt text would be displayed instead.

For search engines, the alt text can be another indicator of what that element of the page is about and thence, what the entire page or site is about. Don't overdo alt and title tags!

Unfortunately, many black-hat SEOs have used alt and title text as a way to stuff keywords into their sites. This was a useful tactic...back in 1995. Just use alt and title tags as you would if you didn't care about SEO. Put keywords in there if it helps your users. Search engines are smart. They'll figure out if you're stuffing your keywords and penalize you in the search results.

Unlike the page title, the title attribute can be used to annotate many different things on a web site. Titles can be used on images, objects, applets, and more. (For more information, visit https://www.w3.org/TR/REC-html40/struct/global. html#title). Browsers display the title text in different ways.

It is what will be displayed when a mouse hovers over that object or what will be read if your visitors are using screen reading software.

Uses of Alt and Title

Many web designers want to use graphics instead of text to represent links or menu options. While this may be helpful to users, text links are better for SEO and are preferred by search engines because they can't read graphics.

If you do decide to use a graphic as a link, be sure to include the title attribute as Google will view the title text for that image a lot like the anchor text of a text link. Make sure the title text for graphical links describe the page where the link it pointed, not the page that it is on.

In addition, use the alt element in the graphic itself to reinforce the meaning to the search engines. For example, your graphical navigation links should look something like this:

<a href = "/training-videos" title = "Training Videos"><img src = "/ files/training-video-thumb.jpg alt = "Training Videos"></a>

In Drupal, to effectively control the alt and title attributes of media files requires the Content Construction Kit, commonly known as CCK. The Content Construction Kit allows you to add custom fields to nodes using a web browser. If you're not using it already you will be soon, as much (but not all) of the functionality of CCK is moving into Drupal 7 core.

Modules You Need

To take full control of the media, including alt and titles, you'll need the following modules:

• CCK: https://www.drupal.org/project/cck
• FileField module: https://drupal.org/project/filefield
• ImageField module: https://drupal.org/project/imagefield
• ImageField tokens: https://drupal.org/project/imagefield_tokens

Text Near the Media File

Another great way to optimize a media file for Google consumption is to make sure that the text nearest to the file is relevant to that file and contains your keywords. It's important to remember that text that looks close to an image on the screen may actually be somewhere else on the site.

If you're concerned, look at the source code of the site to determine if the text is in the right place. Use a good description of what the visitor is seeing and put your best keywords first in that paragraph.

One great way to generate a lot of good text for video files is to create a word-for-word text transcript. Put the transcript on the site right next to the video. Easy.

Thanks For Reading!

Did you find this post entertaining, useful, or interesting? Please repost, retweet, or redistribute to any of the social sites of your choice, and please subscribe to our RSS feed for daily fodder. For every RSS subscription Volacci gets, a kitten earns its whiskers.

You like kittens, don’t you? Do the right thing, then. Subscribe.

We also are very interested in what you have to say in response to this blog post. As always we are very grateful for you, our reader, and greatly value your input. Please start a conversation with a comment below.

‍