- I'm working on a static file server (GitHub Pages). No server side tricks allowed (so Google's #! "hash bang" solution is not an option).
- I'm trying to keep my files DRY. I don't want to repeat the common OUTER template in all my files i.e. header, navigation menu, footer, etc They will live in the main
Setup the Hijax
index.htmlpage contains all OUTER html/css/js... the site's template.
<div id="content">which defaults to containing the "homepage" html.
index.htmlhas a navigation menu, with a Hijax link to an "about" page.
/#aboutand jQuery replaces the
<div id="content">innerHTML with
about.html does not contain anything extra to try an cloak content for crawlers.
/about.html as a standalone page with it's own META data... e.g.
about.html has NO OUTER HTML template (i.e. header, navigation menu, footer, etc).
<body> contains a
<div id="inner-container"> which holds the content that is injected into
about.html has a
<noscript> tag as the first child of
index.html page to get the full page layout with menu.
The (Sneaky?) Redirect
Google indexes the
/#about page (deeplinking to the "about" page "state" in
I'm thinking of doing a "redirect on click or after 10 seconds".
The end results is that user ends up on an "enhanced" page back on
index.html with all it's OUTER template - but the core "page" content is practically identical.
Known issue with inbound links e.g. Share / Bookmarking
It seems that if a user shares the URL
/#about on their blog, when allocating inbound links to my site Google ignores everything after the
# ... it allocates value to the
/ page - See: hashbang vs hijax.
I can only try an minimise this issue offering "share" buttons on the page with the appropriate urls i.e.