Hi there, I've just made a site for a friend where a lot of the information is only accessed through javascript by clicking (if you want to see it's here: Mabel's Website)

 

I was wondering if this is bad for her SEO, I don't know if Google and others read the text in the script at the top of the page. I don't know if it matters with her site anyway, because there isn't much there by way of copy, but I'd like to know if this is bad practise because it's tempting to use this method on larger sites, and I can see it becoming a problem if all that text is going to be ignored by search engines.

 

Thanks for any advice

A better way would be to have the content in the source code then hide it with javascript onload.

You can then display it onclick as you are doing.

Better for screen readers etc too

Hey, thanks Elanman

 

Do you know where I could get any information on how to do that? I'm a complete newbie to javascript, I'm sure it shows

I'll post an example when I've had a bite to eat

As a crude method add this at the top of your javascript

window.onload = function() {
document.getElementById("d").innerHTML = "";
}

Add the content to the html

<div id="d">
<p>Mabel can provide French lessons for all levels of ability, from beginner to advanced, and in particular can provide help for students and school pupils preparing for exams.</p>
<p>Mabel can also provide lessons in English as a second language, so if you're from outside the UK she can help you boost your confidence as an English speaker and settle more easily in your local area.</p>
<p style='margin: 38px 35px'>Raised in Switzerland, Mabel Ebot moved to the UK two years ago and has lived in Edinburgh for one year. She has spoken French all her life as a first language and learned English as a child, becoming a fluent English speaker by the time she left school.</p>
</div>

If you change the links to "#nogo", it will stop the page jump

<div class="c">
<a href="#nogo" onclick="info('1')" class="french">French Lessons</a>
<a href="#nogo" onclick="info('2')" class="english">English Lessons</a>
<a href="#nogo" onclick="info('3')" class="about">About Mabel</a>
</div>

Bear in mind that if javascript isn't enabled in the browser, all of the content will show. Your layout will need to accommodate this.

That's why javascript should be used to 'enhance' the page only. The page shouldn't rely on it to look ok.

Hope that helps.

There are lots of ways to do this but that way will be easiest for you to do.

One last thing, I'd change this line

<script type="application/ecmascript">

to this

<script type="text/javascript">

Nice for designers.

Hi Elanman, thanks a million

 

I'll give it a try once I get back from taking the kids swimming (bleh)

 

 

One last thing, I'd change this line

<script type="application/ecmascript">

 

The reason I put this in was because I couldn't make it validate otherwise. I don't know if that'll be a problem with your method - it doesn't look like it will be - so maybe there'll be no need to worry about it anyway. Here's hoping

 

Thanks again, you've been a great help