为什么其他站点/服务看不到我的哈希URL？

Question

My site has all dynamically loaded content.

I have written a few JS functions that change the content based on the URL received. If someone goes to www.mysite.com/#1056, the content for that will be loaded.

function getLocationHash() {
    //check if there is a location hash in the address bar, get that URL
    if (window.location.hash != '') {
        processURL()
    }
}

Then it calls the processURL function

function processURL() {
    if (window.location.hash != '') {
        urlHash = window.location.hash;

        //if it's a catalog item, it has a number above #1000
        if (urlHash > 10000) {
            getDetail(urlHash);
        }

This works fine for history or jumping right to a URL on the site - however, other sites cannot follow this. For instance, if I enter www.mysite.com/#1056 into Facebook status, FB scrapes only www.mysite.com index page. It does not follow through to the end of the JS. Is this because the JS is looking for the 'window' property?

Same thing with Google crawling. I set up a sitemap with all of the hashed URLs but Google only crawls the index page.

So the question is: How do I take what I have here and properly format a URL that other services like Facebook and Google can "see"?

Any tips would be much appreciated.

Answer 1

The # indicates the start of the fragment identifier. It is how you link to part of a page.

It is frequently abused to be read by JavaScript to load different content via Ajax, but that only works if the client runs the JS.

The scrapers used by Google and Facebook don't run JS.

1. Stop using fragment identifiers to load content
2. Use real URLs instead
3. Have the server deliver complete pages for those URLs
4. Apply your Ajax changes using the history API to update the URI to match the one that would load the page you are creating with JS directly

Answer 2

These are the solutions i discovered when i researched this.

For crawling there is the 'hashbang' , as described in the google pages. https://developers.google.com/webmasters/ajax-crawling/docs/learn-more?hl=nl

And for the linking on facebook you can for example use html5 pushstate. http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate