2

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>
2
  • Googlebot is likely to fetch a page from the URL /about-us from your webserver. Does your site do the "right thing" and serve your single page application with the correct page shown? If so Google will send users to that URL – Stephen Ostermiller Oct 3 '16 at 15:15
  • it would show the page with correct meta data, but it would just show the same html as any other url. It would scroll towards the correct point though, but I'm not sure if google would understand that. – Wouter Rutgers Oct 5 '16 at 8:11
1

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>
1
  • I dislike the idea of using iframes in the website and was hoping on a more modern approach of this problem. Thank you for your input though, I will show this approach to my co-workers when we're discussing this issue again :) – Wouter Rutgers Oct 5 '16 at 8:14
1

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.

2
  • So given this answer, there is no way to have an one page design and have it indexed correctly by Google (or any other search engine)? – Wouter Rutgers Oct 19 '16 at 6:19
  • Yes there is no way. But It is possible that your one page ranked in each title of your segments(in low competitions) in same URL(One page). One page design is not SEO-Friendly. Also Ajax base or Jquery base design is not SEO friendly.Any way design without based on URLs is not SEO friendly.Each URL must provide you a different content and subject(In first request) – Mohsen Tavoosi محسن طاوسی Oct 19 '16 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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