Improving SEO: images, links, titles and alts
If your site is anything like most webcomic sites, it’s very “graphic” heavy. There’s your title image, your navigation menu composed of images instead of text, your comic itself, and your comic navigation arrows. If your site is also anything like mine, you’ve named these images something unoriginal like “09_title.jpg.”
What’s the problem with this, you ask? Well, no one is going to see these images in any kind of search engine. If you go plug in “title” in a google image search, you’ll get so many results that there is no hope of anyone coming to your site by searching for an image from your site. Why is it important to get more search referrals to your site? Because outside of webcomicdom, that is where sites get most of their visitors. Here, it’s the opposite. Most people visit our sites from direct links on OTHER sites. It means we get a small, in-bred audience, with few opportunities to catch a truly new reader. This is why it’s critical to improve your site’s SEO.
So here are a few tricks:
Always add titles and alts to your images. A “title” is the text you get when you hover over an image. An “alt” is alternate text, while the image is loading, or if the image does not load at all. These features are added by the following code:
<img title=”The War of Winds, an epic fantasy webcomic by KEZ” src="/img/spacer.gif">
And in action:
You can do the same thing for links. If you hover over the rollover buttons on my main page, you will get the alternate, descriptive text. The code is a little different for adding this feature to links because one displays in IE and one displays in FF (so you want to have both!):
<a title=”epic fantasy webcomic” alt=”epic fantasy webcomic” class=”warofwinds.com”>The War of Winds</a>
And in action (hover to see):
The War of Winds
Simple, but worth it! The next step is add more descriptive text into these titles and alts. You can even insert keywords only, though be aware that dropping non-relevant keywords gets you DROPPED from searches. Which brings me back to the purpose of adding titles and alts–> they are searchable even if the images and links themselves are not!
18 Responses to “Improving SEO: images, links, titles and alts”
-
Bengo
November 14th, 2008 - 4:20 pmAny guidance on where to insert those tags? In a caption location, or…? I’ll ask here in case others have the question.
This is a valuable article.
-
KEZ
November 14th, 2008 - 6:06 pmInsert on all images, as much as you can. The code to do so is shown above in green. :)
-
Bengo
November 14th, 2008 - 9:44 pmI see — bracketed within the image tag. So simple and obvious, I was overwhelmed.
-
JGray
November 15th, 2008 - 4:51 amInteresting. It was suggested to me that Google frowns on “hidden text” beneath an image and it ends up screwing up the search engine…
-
KEZ
November 15th, 2008 - 8:53 am@JGray: this isn’t classified as invisible text. Invisible text is what you put inside of divs or spans, and then in your css tell it to be invisible. You wouldn’t be able to see that text even if you scrolled or hovered over it. They frown on this, because you could insert any keyword or description you wanted, whether it was relevant to the site or not, to try to increase fill rates. They don’t want to advertise to content that no one can see, because they may or may not be advertising to the correct audience. For example, you could insert, “politics obama mccain palin biden” into an invisible div, but your site’s content might be about gardens…which has a low fill rate ;) So you are served ads that have nothing to do with gardens.
In contrast, alts and titles are good to have, and encouraged! People want to know information about a page they are going to before they click. This is where titles come in handy (and are visible). Alts are visible too, for when an image loads incorrectly.
As always, the rule is to NOT go overboard. Don’t insert text that has nothing to do with your site, that is just “keyword dropping” or is garbled.
-
JGray
November 15th, 2008 - 11:47 amThank you! That helps clear things up for me. I’ll keep this in mind when I do my next site revamp (which should be soon).
-
Bengo
November 15th, 2008 - 5:22 pmMay I add, invisible text is also words written in the same color as the background, so they appear invisible?
Another is using zero point fonts.
See www.google.com/support/webmasters/bin/answer.py?answer=66353
-
Winged Wolf Studio − Webcomic Website Must-Have’s: Archive Page
November 17th, 2008 - 12:04 pm[...] How could I improve my archive? I could add page titles as link titles and alts, as discussed in a previous article of mine. [...]
-
Strip News | ArtPatient.com
November 21st, 2008 - 6:05 am[...] Once you get the images all set to post, you’ll want to follow the advice in this one on image SEO. Now that you have your comic online and printed, imagine that you are going to a con and want some [...]
-
Mike
November 21st, 2008 - 9:51 amGood tips!
Just a few things: anchor tags don’t have an alt attribute. I’d also recommend trying to not use embedded images for things like a site title, as this can easily be done with CSS.
To (roughly) expand on your second example, you can wrap the text inside the tag with a , set it to “display:none”, and then turn the tag into a block with “display:block”, give it a height, and apply your image to the background.
-
Mike
November 21st, 2008 - 9:52 amOops, sorry about accidentally linking half my comment. XD
-
KEZ
November 21st, 2008 - 10:39 amVery good tips, Mike! Thanks!
-
Winged Wolf Studio − Tips and Tricks: Link Anchors and Titles
November 21st, 2008 - 6:35 pm[...] second trick is link titles. Last time I went over link titles it was on the subject of SEO. Now it’s about putting more information in a page without actually PUTTING it in there. [...]
-
Winged Wolf Studio − Does Webcomic SEO work?
November 23rd, 2008 - 11:52 pm[...] Over the past couple months, I’ve slowly been optimizing everything I can. I’ve added link titles and alts, image titles and alts, meta descriptions (even though these are now ignored by search engines, grr!), more text with [...]
-
Winged Wolf Studio − Webcomic Networking, and Should-Have Pages
November 25th, 2008 - 1:12 am[...] The last reason for a links page involves pure curiosity. If your audience likes your own comic, they might come to wonder what else you read, and having a links page satisfies that curiosity. Many people discover new comics through other comics’ links pages, and indeed, direct referrals from webcomic to webcomic is the main way for webcomics to get more readers (as opposed to search referrals, if you remember) [...]
-
Winged Wolf Studio − Displaying the Webcomic OFF the Home Page…CORRECTLY.
January 28th, 2009 - 1:51 am[...] feature of mine, increasing the SEO of my site. The home page has a lot of images, but each has alts and titles. My navigation menu includes (in order of importance) links to the first comic, the archive, the [...]
-
oghme
May 11th, 2009 - 3:14 amInteresting !
I was wondering about the utility of including the oh-no-robot transcripts back in a web-comic page. Hidden spans seem useless. Maybe in the ALT text ?
I’m not sure, though, if having some “wooow ! hey ! what ? gggg…” text in your HTML code helps at all. Choosen keywords for each image/strip seem a better way to go.
Did somebody try this ?
-
fluffy
November 17th, 2009 - 2:01 amI just noticed this entry while searching on something related. I did a little writeup about how to embed Oh No Robot transcripts, although it’s not for the weak of heart. Even though the div is hidden via CSS, Google still happily indexes it and uses it for search results and ad placements.