Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bobvanluijt/logical-escaped_fragment
This code gives helps you to work with SEO (escaped_fragment) and AJAX content.
https://github.com/bobvanluijt/logical-escaped_fragment
Last synced: 7 days ago
JSON representation
This code gives helps you to work with SEO (escaped_fragment) and AJAX content.
- Host: GitHub
- URL: https://github.com/bobvanluijt/logical-escaped_fragment
- Owner: bobvanluijt
- Created: 2014-12-06T19:28:28.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2014-12-06T20:56:05.000Z (almost 10 years ago)
- Last Synced: 2024-10-08T18:42:22.913Z (28 days ago)
- Language: JavaScript
- Size: 1.13 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Logical escaped_fragment for SEO and UX
========================
Summary:
This code is created to help you create heavy based AJAX pages, that Google can crawl. Especially on eCommerce websites SEO is one of the most important things. This plugin calls two functions. `__init()` (= replacement for `$(document).ready()`) and `__update()`. By using those two function your website can be completly AJAX, but Google sees what it needs to see to correctly index the page.
Read the Explanation details below for more indept information
Based on: https://developers.google.com/webmasters/ajax-crawling/
Based on: fact that Google executes `$(document).ready()` or any equivalent DOM ready loader.
Note: This solution is 100% JS. It doesn't need a lib like jQuery
Explanation:
Everytime the Google crawler hits your escaped_fragment website. It will translate `url.html#!key=value` into `url.html?_escaped_fragment_=key=value` this is done, so you can execute something to fill data that otherwise would be filled through JS or AJAX.
url.html#!key=value website: `
` -> AJAX call -> `I'm the data that comes from this call`
If Googles crawler would visit this website, it would find `` and no content.
Therefor the solution of the escaped_fragment was created, Google would automatically go to:
url.html?_escaped_fragment_=key=value website: `
Now you should have the same content as above, but without the AJAX call`
The problem here is that it can get quite complicated to do this on heavy AJAX website.
For some time know, the Google crawler also executes the: `$(document).ready()`
Now we have enough ingredients to make a AJAX based website that can be crawled.
How does it work:
When you add the minified script from this repo to your pages. It will look for `#!` or it will look for the `?_escaped_fragment_=`. You don't have to do anything server side. It can be a complete static page.
When it's done it looks through your script for a function called ``__init()``.
Everything you do within `__init()` AJAX call, update DIV's etc. Will be indexed by Google.
When you change the escaped hashtag (`#!`) the script calls ``__update()``.
everything that is done within ``__update()`` will not be indexed by Google.
However you can call ``__init()`` inside ``__update()`` if you do that, you can be 100% sure that your page will be indexed properly when the correct `?_escaped_fragment_=` url is visited by the crawler.
Examples:
Please visit: http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=123&value2=456 (or run this page from your own server)
On this page you can find 2 excisiting (statis) files: url1.html and url2.html. But you can generate 4* pages.
1) http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=123&value2=456
2) http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=somethingCompletelyDifferent
3) http://kubrickolo.gy/SEO-AJAX-example/url2.html#!value1=abc&value2=def
4) http://kubrickolo.gy/SEO-AJAX-example/url2.html#!value1=somethingCompletelyDifferent
*) Change the values by adding or removing, changing names etc, for example, try: http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=hello%20world&value2=WhatDoYouThinkOfThis&SomethingDifferent=HiAgain
Usable function list:
`__req(i)`
req = request, you can request a string with a key and value.
example I: url `#!key=val` and/or `?_escaped_fragment_=key=val` is requested for usage with: `__req('key')`
example II: when you call `__req()` you will get an array with all keys and values.
Note: no output will return `false`
Function-you-can-use list:
`__init()`
This is your replacement for `$(document).ready()` (or any equivalent)
Example: http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=abc&value2=def
Note: Always use this on any page.
`__update()`
This function is called when the hashtag changes. Everything beyond this point will not be indexed by the crawler. However, calling `__init()` within this function assures you of a complete indexable page.
Example: http://kubrickolo.gy/SEO-AJAX-example/url2.html#!value1=abc&value2=def
Example II: scenario how you might use this in an eCommerce solution.
You have two pages: `myurl.com/#!page=product&sku=book` and `myurl.com/#!page=shoppingcart`
Your code might look like this:
```javascript
function __init(){
$.get('/ajax.php?page='+__req('page'), function(data){
$('someDIV').html(data);
});
}
function __update(){
//
// I run when the # url is changed
//
doSomeFancyThingOnThePage('no SEO needed here');
__init();
}
```
So when you are on `myurl.com/#!page=product&sku=book` and you add something to the cart, the url changes to `myurl.com/#!page=shoppingcart`, `__update()` is called, a fancy animation is started, and `__init()` is called again. You are now on the shopping cart page.
Google is now able to index both page.
I only believe it when I see images:
No new page is called
