How do I replace images with any other technique for better SEO?

Question

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?

Answer 1

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:

• Search Engine Optimization Starter Guide by Google (download the PDF on that page)
• Webmaster Guidelines: Best practices to help Google find, crawl, and index your site

Answer 2

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.

Answer 3

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 bandwith, 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.