Mobile app version of vmapp.org
Login or Join
Nickens628

: Google bot and navigation on a one page website Given the following code: <section id="about-us"> <div class="Employee"> <h2>Lorem</h2> </div>

@Nickens628

Posted in: #Google #Googlebot #Navigation

Given the following code:

<section id="about-us">
<div class="Employee">
<h2>Lorem</h2>
</div>
<div class="Employee">
<h2>Lorem</h2>
</div>
</section>

<section id="contact">
<form>
<input>
</form>
</section>


With the following navigation

<nav>
<ul>
<li><a href="/about-us">About us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>


If a user would click on a link I would catch that with JavaScript and scroll to the corresponding section, but would Google understand my logic and index the pages /about-us and /contact as two separate pages? Or would I be better off to structure the navigation as:

<nav>
<ul>
<li><a href="#about-us">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

10.02% popularity Vote Up Vote Down

Login to follow query

More posts by @Nickens628

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

 

@XinRu657

The clear answer is No!

Google indexing is based on URLs and example.com/about is equal with example.com/about#anykey

So you must create two separate URLs. One for About Us and one for Contact.
Otherwise google understands that you have both matters(About and Contact) in one URL.

10% popularity Vote Up Vote Down

 

@Jessie594

This is based on my experience and the good results that I got.

I create an HTML version of each "page" and use an iframe, model or js to capture the external page. So even though it is still a one page website in appearance, it is in fact multiple pages allowing you to write more SEO oriented meta info per page.

Something like this.

<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<a href="#" onclick="return show('Contact','Employee');">Contact</a>
<a href="#" onclick="return show('Employee','Contact');">Employee</a>
<div id="employee">
<iframe src="employee.html" border="0"></iframe>
</div>
<div id="contact" style="display:none">
<iframe src="contact.html" border="0"></iframe>
</div>
</body>
</html>


or like this.

<body>
<a name="employee"></a>
<iframe src="employee.html" border="0"></iframe>
<a name="contact"></a>
<iframe src="contact.html" border="0"></iframe>
</body>

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme