{"id":15967941,"url":"https://github.com/bobvanluijt/logical-escaped_fragment","last_synced_at":"2025-08-24T14:04:40.509Z","repository":{"id":24252758,"uuid":"27646240","full_name":"bobvanluijt/Logical-escaped_fragment","owner":"bobvanluijt","description":"This code gives helps you to work with SEO (escaped_fragment) and AJAX content.","archived":false,"fork":false,"pushed_at":"2014-12-06T20:56:05.000Z","size":1180,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-20T00:09:01.915Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"zTrix/zio","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bobvanluijt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-06T19:28:28.000Z","updated_at":"2024-01-09T16:58:14.000Z","dependencies_parsed_at":"2022-08-22T14:00:46.876Z","dependency_job_id":null,"html_url":"https://github.com/bobvanluijt/Logical-escaped_fragment","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bobvanluijt/Logical-escaped_fragment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobvanluijt%2FLogical-escaped_fragment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobvanluijt%2FLogical-escaped_fragment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobvanluijt%2FLogical-escaped_fragment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobvanluijt%2FLogical-escaped_fragment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bobvanluijt","download_url":"https://codeload.github.com/bobvanluijt/Logical-escaped_fragment/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobvanluijt%2FLogical-escaped_fragment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271882783,"owners_count":24838183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-07T18:42:27.626Z","updated_at":"2025-08-24T14:04:40.446Z","avatar_url":"https://github.com/bobvanluijt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Logical escaped_fragment for SEO and UX\n========================\n\n\u003ch4\u003eSummary:\u003c/h4\u003e\nThis 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.\u003cbr\u003e\nRead the Explanation details below for more indept information\n\nBased on: https://developers.google.com/webmasters/ajax-crawling/\u003cbr\u003e\nBased on: fact that Google executes `$(document).ready()` or any equivalent DOM ready loader.\u003cbr\u003e\n\u003ci\u003eNote: This solution is 100% JS. It doesn't need a lib like jQuery\u003c/i\u003e\u003cbr\u003e\n\n\u003ch4\u003eExplanation:\u003c/h4\u003e\nEverytime 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.\n\nurl.html#!key=value website: `\u003cdiv class=\"helloWorld\"\u003e\u003c/div\u003e` -\u003e AJAX call -\u003e `\u003cdiv class=\"helloWorld\"\u003eI'm the data that comes from this call\u003c/div\u003e`\nIf Googles crawler would visit this website, it would find `\u003cdiv class=\"helloWorld\"\u003e\u003c/div\u003e` and no content.\n\nTherefor the solution of the escaped_fragment was created, Google would automatically go to:\u003cbr\u003e\nurl.html?_escaped_fragment_=key=value website: `\u003cdiv class=\"helloWorld\"\u003eNow you should have the same content as above, but without the AJAX call\u003c/div\u003e`\n\nThe problem here is that it can get quite complicated to do this on heavy AJAX website.\n\nFor some time know, the Google crawler also executes the: `$(document).ready()`\n\nNow we have enough ingredients to make a AJAX based website that can be crawled.\n\n\u003ch4\u003eHow does it work:\u003c/h4\u003e\nWhen 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 \u003ci\u003eanything\u003c/i\u003e server side. It can be a complete static page.\n\nWhen it's done it looks through your script for a function called ``__init()``.\u003cbr\u003e\u003cb\u003eEverything you do within `__init()` AJAX call, update DIV's etc. Will be indexed by Google.\u003c/b\u003e\n\nWhen you change the escaped hashtag (`#!`) the script calls ``__update()``.\u003cbr\u003e\u003cb\u003eeverything that is done within ``__update()`` will not be indexed by Google.\u003c/b\u003e\u003cbr\u003e\n\u003ci\u003eHowever\u003c/i\u003e 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.\n\n\u003ch4\u003eExamples:\u003c/h4\u003e\nPlease visit: http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=123\u0026value2=456 (or run this page from your own server)\n\nOn this page you can find 2 excisiting (statis) files: url1.html and url2.html. But you can generate 4* pages.\n1) http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=123\u0026value2=456\n2) http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=somethingCompletelyDifferent\n3) http://kubrickolo.gy/SEO-AJAX-example/url2.html#!value1=abc\u0026value2=def\n4) http://kubrickolo.gy/SEO-AJAX-example/url2.html#!value1=somethingCompletelyDifferent\n*) Change the values by adding or removing, changing names etc, for example, try: http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=hello%20world\u0026value2=WhatDoYouThinkOfThis\u0026SomethingDifferent=HiAgain\n\n\u003ch4\u003eUsable function list:\u003c/h4\u003e\n`__req(i)`\u003cbr\u003e\nreq = request, you can request a string with a key and value.\u003cbr\u003e\nexample I: url `#!key=val` and/or `?_escaped_fragment_=key=val` is requested for usage with: `__req('key')`\u003cbr\u003e\nexample II: when you call `__req()` you will get an array with all keys and values.\u003cbr\u003e\nNote: no output will return `false`\n\n\u003ch4\u003eFunction-you-can-use list:\u003c/h4\u003e\n`__init()`\u003cbr\u003e\nThis is your \u003cb\u003ereplacement\u003c/b\u003e for `$(document).ready()` (or any equivalent)\u003cbr\u003e\nExample: http://kubrickolo.gy/SEO-AJAX-example/url1.html#!value1=abc\u0026value2=def\u003cbr\u003e\nNote: Always use this on any page.\n\n`__update()`\u003cbr\u003e\nThis 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.\u003cbr\u003e\nExample: http://kubrickolo.gy/SEO-AJAX-example/url2.html#!value1=abc\u0026value2=def\n\nExample II: scenario how you might use this in an eCommerce solution.\u003cbr\u003e\nYou have two pages: `myurl.com/#!page=product\u0026sku=book` and `myurl.com/#!page=shoppingcart`\u003cbr\u003e\nYour code might look like this:\n```javascript\nfunction __init(){\n\t$.get('/ajax.php?page='+__req('page'), function(data){\n\t\t$('someDIV').html(data);\n\t});\n}\n\nfunction __update(){\n\t//\n\t// I run when the # url is changed\n\t//\n\tdoSomeFancyThingOnThePage('no SEO needed here');\n\t__init();\n}\n```\n\nSo when you are on `myurl.com/#!page=product\u0026sku=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.\u003cbr\u003e\n\nGoogle is now able to index \u003ci\u003eboth\u003c/i\u003e page.\n\n\u003ch4\u003eI only believe it when I see images:\u003c/h4\u003e\n![Before AJAX](https://raw.githubusercontent.com/kubrickology/Logical-escaped_fragment/master/imageExamples/url1.png)\n\u003cb\u003eNo new page is called\u003c/b\u003e\u003cbr\u003e\n![After AJAX](https://raw.githubusercontent.com/kubrickology/Logical-escaped_fragment/master/imageExamples/url1_after_AJAX.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobvanluijt%2Flogical-escaped_fragment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbobvanluijt%2Flogical-escaped_fragment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobvanluijt%2Flogical-escaped_fragment/lists"}