Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

My website has many images which aren't good since we have a lot of content inside of them which Google won't know about. So by using CSS or JS isn't there a solution with which we can convert these into a better understandable format for Google?

share|improve this question
add comment

3 Answers

All you really have to do is to make sure that all of the images that contain text that you want to be indexed have proper alt attribute with that text. This is important not only for Google but also for people with screen readers and text-mode browsers.

The best way to test your website is to see how it looks like in a text-mode browser like Lynx, Links or w3m. You can also try the Online Lynx Viewer and the Fetch as Google tool.

See also:

share|improve this answer
1  
Greetings, alt tags are there. but when we talk about ranking signals. alt tags hardly contribute 1% while content can be a very major part in this. –  Hardik Chauhan Oct 28 '12 at 16:11
add comment

Instead of using images, try using text and CSS. You can do something like the following.

HTML:

<a href="example.com" class="call-button">Call us now to order!</a>

CSS:

a.call-button {
  display: block;
  width: 100px;
  height: 100px;
  background-image:url('imageofphone.png');
}

So basically you create an image without any text of what you need. Then create an anchor the same size as the image and place it as a background within the element.

To Google, the link is just a clean text link as you can see from the HTML above, but to visitors they will see all the fancy images.

The only downside is that the text may look a little boring unless you use CSS on them.

share|improve this answer
add comment

If you are talking about complex images that contain lots of text/data (like scans of paper documents, pie charts, infographics etc.), one possible way would be to use the object element.

Example use for a scan of a written letter:

<object data="scan.png" type="image/png">
  <p>Hello John!</p>
  <p>I'm sorry for not writing to you earlier, but I …</p>
  <p>You can find the video at <a href="http://example.com/video">http://example.com/video</a>, I hope you enjoy it.</p>
  <p>…</p>
  <p>Yours sincerely …</p>
</object>

If the users client can/shall display images, scan.png should be shown. If the client is not capable of displaying images (text browsers), or the user has disabled images (low bandwidth, screen reader), or images can't be parsed (search engines), or the image resource doesn't exist (404, server down), then the fallback content should be displayed/used, which is the content of the object element.

For the fallback content, you can use HTML elements in the Flow content (including simply text) and Interactive content categories.

Note that browser support wasn't the best in the past, but I guess today most browsers should have no problems with object (probably see this question), especially not if used for images. Regarding SEO: I don't know which/whether search engines handle object fallback content correctly; can't find documentation or tests. In this question it says that the "Fetch as Google" tool didn't display the object element resp. the fallback content at all (don't know if it is or was true, though). Honestly, I can't imagine that Google would ignore the fallback of object elements, as this element is specified more than 14 years ago in HTML 4. Search engines that don't know/understand object would treat the fallback content as "real" content, because it is not "hidden" in an attributes value (like alt); for them, the fallback content is just normal HTML enclosed in an „unknown“ element.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.