Best techniques to prepare image-based web design for SEO - noscript? [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 9 years ago.

Improve this question

Okay, so I know that this is really frowned upon, and this is something that I don't typically do. In fact, I've never launched a website like this one. But there doesn't seem to be much of an alternative.

I am working with a web design with a client that is essentially just a full-page slider. The original design looks like it could've been ported to Flash. I plan on using jQuery so at least it isn't plugin-dependent, but the content text is intricately designed and incorporated into the slide images.

From what I'm seeing, the only text that I can actually place onto the page without embedding in an image is the navigation and maybe part of the site header.

There is a lot of content in the slide images -- too much for putting in an alt="" attribute on the <img /> tag. I know that the longdesc="" attribute is deprecated from HTML5 and isn't really supported well anyway, so that's out. I thought of duplicating the text from the image and placing it in a hidden <div></div> tag, or in a <noscript></noscript> tag, or offsetting it so it's invisible, and other methods of hiding content for dynamic, JavaScript-based sites. However, I am also aware that search engine developers like Google frown on that sort of thing and it might harm my SEO rankings.

The <noscript></noscript> element would be a good solution, but from my understanding you can only implement it legitimately if the content of the element duplicates content that exists elsewhere in the document and is dynamically controlled. Maybe I misinterpreted that?

Are there any other solutions you can think of?

Answer 1

object element

You could use object instead of img. The content of the object element will be used as fallback (resp. as alternative for screen reader users or search engine bots):

<object data="your-image.png" type="image/png">
  <!-- the alternative/fallback content -->
</object>

longdesc attribute

Or you could use the longdesc attribute for the img element, which is defined in a separate specificiation: http://www.w3.org/TR/html-longdesc/ (Working Draft):

This specification defines a longdesc attribute to link extended descriptions with images in HTML5-based content.

meta-description

In addition you could include the text (or the beginning resp. a summary of it) in the description-meta element:

<meta name="description" content"…">

But this would only work if you have separate URLs for each image (which could be accomplished with the History API)

Answer 2

You should create a place-holder div, that contains the text-based content. Than create a JavaScript function (onload) to replace the innerHTML property of the place-holder with the image!