SEO friendly Babylon.js website

[ozRocker]

I know this is a new topic which applies to all 3D websites in general.  I've searched the world and beyond (google) and have found nothing on the subject, which is not surprising.

 

Does anyone have any tricks to make a 3D website SEO friendly?  For example, if you have a scene with 4 different rooms, it would be neat if those 4 rooms could be accessed by 4 different URLs.  That means users can bookmark those locations, go Back, refresh and search engines can index them.  This is also useful for stuff like Facebook open graph and standard web analytics frameworks.

 

There are currently no standards for 3D SEO.  I think its about time we come up with some

[ozRocker]

I've come up with a few tips for tracking and SEO.

 

I've created an example here: http://www.babylonjs-playground.com/#GBXF

 

That example does a few things:

• Changes the address in the browser so you can bookmark, refresh and go back to a location.  Helps search engines index different areas.  You'll need to edit .htaccess file with rewrite rules so you can parse those URLs to take you where ever you want in the scene.
• Changes the title of the page for easy bookmarking and search engine indexing.
• Hits an empty file on the server (only required if you want to track via server logs)
• Registers a page hit for Google Analytics (only required if you want to track via Google Analytics)

 

If you spin around you'll notice the URL change.  You can easily add more words to the path for more detail, but this does require adding web server rewrite rules so you can parse them again.  For example: http://www.server.com/<floor>/<room number>

 

I'm a noob with SEO so I hope people add more tips to this.  For starters, there's probably some meta tags that can help with search engine indexing as well, which I haven't touched on.

[iiceman]

Not sure if the google bots check those tags (meta tags and page title and all that) after a javascript is executed. I always assumed they do that only on page load. Of course you could register the different sites with a sitemap and upload that to the webmastertools or something like that. But that might result in duplicate content. I am no SEO expert of any kind, but I think it might not work just yet. Maybe design traditional landing pages and then let the user enter your babylon site when he hits those pages. As I said..no expert, though

[pathogen]

I think it might not work just yet.

This. But! That is why this sort of work is really important... because Google will follow when people work out how to do these things effectively, and I think you have come up with some really good ideas ozRocker!

I had wondered about SEO for javascript apps that go beyond Angular / Ember type single-page-apps, but never implemented anything, so this is definitely a good start that I will be implementing myself. Excellent topic!

[ozRocker]

I'm gonna keep researching to see how far I can take it.  I really want 3D websites to become more commonplace in a commercial environment.  Clients will ask about SEO so eventually we'll need to come up with an answer.  If we know what the limits are then we can look for workarounds to overcome them.  If there's anyone else that has experimented with this for 3D websites, please contribute your findings

[adam]

There is some good info here:

 

https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

[ozRocker]

ok, from that doco above and all the other docos I've been reading, search engines can index dynamic pages with the #! marker.  I prefer to use normal friendly URLs so in the example I created above  I would have a URL like http://www.babylonjs-playground.com/green (instead of http://www.babylonjs-playground.com#!green).  As long as I have <meta name="fragment" content="!"> in my html it should be ok.  The search engine will then convert my URL to http://www.babylonjs-playground.com/green?_escaped_fragment_=  With some tricky redirects I can serve an HTML version of that page when the search engine comes looking for it.  The Babylon.js site I'm working on now is completely static so this should be easy.  I could write those HTML files by hand.  A dynamic site would be a lot trickier.  I'll give it a go anyway to see if this works.  Pls correct me if my logic is flawed.

[ozRocker]

Also I just realised that dynamically injecting FB open graph tags is useless.  But I can easily get the URL parameters then put the FB tags in the HTML during preprocessing (like from a PHP script).

[Paumonsu]

I'm gonna keep researching to see how far I can take it.  I really want 3D websites to become more commonplace in a commercial environment.  Clients will ask about SEO so eventually we'll need to come up with an answer.  If we know what the limits are then we can look for workarounds to overcome them.  If there's anyone else that has experimented with this for 3D websites, please contribute your findings

 

I think the same way ad you do!

[reddozen]

Why not use a get request?

 

www.somesite.com?room=2

 

Could use a dynamic PHP portion on the page to set the starting XYZ locations based on the "room"

 

 

You'll want more security than this, but it's an easy way to accomplish what you want. You could even use URL manipulation techniques to map "?room=2" to look like a directory, or use a new A record like room2.yoursite.com... a lot of ways I could see doing it.

<script>... your babylon 3D stuff ...<?phpswitch (_GET('room')){case 1:echo "camera.position.x=100; camera.position.y=100; camera.position.z=1;";break;case 2:echo "camera.position.x=110; camera.position.y=130; camera.position.z=1;";break;};?>... rest of your babylon stuff ...

[ozRocker]

 

Why not use a get request?

 

www.somesite.com?room=2

 

Yeh, that's what I'm doing, but I'm using friendly URLs then using URL rewrite rules to change them to GET parameters which I parse with PHP.

[dbawel]

As usual, you guys hit a topic that is really useful for my current work.  OZR - thanks for exploring and posting.

 

DB

[ozRocker]

I've got a working solution!  I tested it with the Googlebot crawler and it works.

You'll need a preprocessor such as PHP to test the user-agent to see if its a crawler.  If it is, display some simple web page.  Within this web page display some content.  In my case I have content stored in separate files which get displayed via Javascript within my Babylon.js scene.  I can pull the right file according to the URL and put that into the content.  Also add some links in there so the crawler can crawl those pages as well.  I have a hierarchical system in my Babylon.js scene so the links I display are the ones on the same hierarchical level as the current page.  Basically with PHP I can convert the Babylon.js scene into a non-Javascript HTML game (click links to go different rooms, etc..). 

 

Keep in mind you will need to use the "replaceState" system I used above to make sure your URL changes to reflect certain points within your Babylon.js scene.

 

This is what your index.php file should look like:

<html><head>    //Stuff here</head><body><?phpfunction isCrawler() {    $arrCrawlers = array('google','msnbot','yahoo','lycos','altavista');    $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);    foreach ($arrCrawlers as $crawler) {        if (strstr($userAgent,$crawler)) {            return true;        }    }    return false;}if (isCrawler()) {    $page = $_GET["page"];    //display links here according to $page variable    include 'content/'.$page.'.html';} else {?>    <canvas id="renderCanvas"></canvas><?php } ?></body></html>

[ozRocker]

He's an example of it working with my Babylon.js website.