Permalink
Browse files

added readme and a few other fies

  • Loading branch information...
1 parent 62f218f commit a0bbc1b9c2094e37421d9372e481b5b415d270c3 @thomasdavis thomasdavis committed Oct 3, 2012
Showing with 63 additions and 9 deletions.
  1. +46 −0 README
  2. +6 −0 css/theme.css
  3. +1 −1 js/main.js
  4. +1 −1 templates/examples/json.html
  5. +7 −5 templates/home/page.html
  6. +2 −2 templates/menu.html
View
46 README
@@ -0,0 +1,46 @@
+ <h3>Welcome!</h3>
+ <p>Seo Server is a command line tool that runs a server that allows GoogleBot(and any other crawlers) to crawl your heavily Javascript built websites. The tool works with very little changes to your server or client side code.</p>
+ <p><i>This entire site is driven by Javascript(view the source or see the <a href="https://github.com/apiengine/seoserver-site">code</a>). Click the `What does Google see?` button at the bottom of each page to see Seo Server in action.</i></p>
+
+ <h3>How it works</h3>
+ <img src="http://yuml.me/5b1b60bb" /><br /><br />
+ <p>Seo Server runs <a href="http://phantomjs.org/">PhantomJs</a>(headless webkit browser) which renders the page fully and returns the fully executed code to GoogleBot.</p>
+
+ <h3>Getting started</h3>
+ <p>1) you must install PhantomJs(<a href="http://phantomjs.org/">http://phantomjs.org/</a>) and link into your bin so that Seo Server can call it.</p>
+ <p>2) Seo Server is an NPM module so install via</p>
+ <code>sudo npm install -g seoserver</code>
+ <p>3) Now we have access to the Seo Server command line tool</p>
+ <code>seoserver start</code>
+ <p>Which starts an Express server on port 3000 or</p>
+ <code> seoserver -p 4000 start</code>
+ <p>Start it as a background process and log the output</p>
+ <code> seoserver -p 4000 start > seoserver.log &</code>
+
+ <h3>Telling GoogleBot to fetch from Seo Server</h3>
+ <p>To tell GoogleBot that we are using ajaxed content we simply add to our sites index.html file the Google specific <a href="https://developers.google.com/webmasters/ajax-crawling/docs/specification">meta tag</a>. If you view the source of this page you can see we have included the tag below. </p>
+ <code>&lt;meta name="fragment" content="!"&gt;</code>
+ <p>Now whenever GoogleBot visits any of our pages it will try to load <code>?_escaped_fragment_=pathname</code></p>
+ <p>So if we were using Apache with mod rewrite and mod proxy, we can include in our .htaccess</p>
+ <code>
+ RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$<br />
+ RewriteRule (.*) http://address-of-seoserver:3000/%1? [P]
+ </code>
+ <p>Now all request from GoogleBot will be returned fully rendered. How GoogleBot sees the page can be tested with Google <a href="http://www.google.com/webmasters/">WebMasters</a>(they allow you to simulate Google crawls and see the result instantly).</p>
+
+ <h3>For other crawlers</h3>
+ <p>
+ Using mod rewrite, we can send other crawlers to Seo Server also
+ </p>
+ <code>
+ RewriteCond %{HTTP_USER_AGENT} ^DuckDuckBot/1.0;<br />
+ RewriteRule (.*) http://address-of-seoserver:3000/%1? [P]
+
+ </code>
+ <h3>FAQ</h3>
+ <p>Nothing here yet, but check out the examples on the left to see different types of ajaxed content. Also ask questions and give feedback on GitHub <a href="https://github.com/apiengine/seoserver/issues">issues</a>.
+ <hr />
+<button class="btn btn-info showseo">What does Google see?</button>
+ <hr />
+<textarea class="showseo-output" disabled="disabled"></textarea>
+
View
6 css/theme.css
@@ -3,6 +3,7 @@
width: 157px;
height: 34px;
background: url('../img/api-engine-logo_official.png');
+ display: inline-block;
}
.showseo-output {
@@ -17,4 +18,9 @@ code {
body {
overflow-y: scroll;
+}
+
+h1 {
+ margin-left: 17px;
+margin-bottom: 16px;
}
View
2 js/main.js
@@ -27,7 +27,7 @@ require([
'clicky'
], function(AppView, Vm, Router, norefclicky){
// Some hackery to include clicky in our app
- try{ clicky.init(203165); }catch(e){}
+ try{ clicky.init(100532051); }catch(e){}
var appView = Vm.create({}, 'AppView', AppView);
Router.initialize({appView: appView});
appView.render(); // render() calls Backbone.history when its ready to start
View
2 templates/examples/json.html
@@ -1,6 +1,6 @@
<div class="well">
<h3>JSON data with Javascript template</h3>
-<p>Pulling in data from stats.cdnjs.com (a CORS enabled API)</p>
+<p>Pulling in data from stats.cdnjs.com (a CORS enabled API) from <a href="http://cdnjs.com">cdnjs.com</a></p>
<table class="table">
<thead><tr><th>Library</th><th>Wednesday's hits</th></tr></thead>
<tbody>
View
12 templates/home/page.html
@@ -1,20 +1,22 @@
<div class="well">
<h3>Welcome!</h3>
- <p>Seo Server is a command line tool that runs a server that allows GoogleBot(any any other crawlers) to crawl your heavily Javascript built websites. The tool works with very little changes to your server or client side code.</p>
- <p><i>This entire site is driven by Javascript(view the source). Click the `What does Google see?` button at the bottom of each page to see Seo Server in action.</i></p>
+ <p>Seo Server is a command line tool that runs a server that allows GoogleBot(and any other crawlers) to crawl your heavily Javascript built websites. The tool works with very little changes to your server or client side code.</p>
+ <p><i>This entire site is driven by Javascript(view the source or see the <a href="https://github.com/apiengine/seoserver-site">code</a>). Click the `What does Google see?` button at the bottom of each page to see Seo Server in action.</i></p>
<h3>How it works</h3>
<img src="http://yuml.me/5b1b60bb" /><br /><br />
<p>Seo Server runs <a href="http://phantomjs.org/">PhantomJs</a>(headless webkit browser) which renders the page fully and returns the fully executed code to GoogleBot.</p>
<h3>Getting started</h3>
- <p><strong>First</strong> you must install PhantomJs(<a href="http://phantomjs.org/">http://phantomjs.org/</a>) and link into your bin so that Seo Server can call it.</p>
- <p>Seo Server is an NPM module so install via</p>
+ <p>1) you must install PhantomJs(<a href="http://phantomjs.org/">http://phantomjs.org/</a>) and link into your bin so that Seo Server can call it.</p>
+ <p>2) Seo Server is an NPM module so install via</p>
<code>sudo npm install -g seoserver</code>
- <p>Now we have access to the Seo Server command line tool</p>
+ <p>3) Now we have access to the Seo Server command line tool</p>
<code>seoserver start</code>
<p>Which starts an Express server on port 3000 or</p>
<code> seoserver -p 4000 start</code>
+ <p>Start it as a background process and log the output</p>
+ <code> seoserver -p 4000 start > seoserver.log &</code>
<h3>Telling GoogleBot to fetch from Seo Server</h3>
<p>To tell GoogleBot that we are using ajaxed content we simply add to our sites index.html file the Google specific <a href="https://developers.google.com/webmasters/ajax-crawling/docs/specification">meta tag</a>. If you view the source of this page you can see we have included the tag below. </p>
View
4 templates/menu.html
@@ -8,6 +8,6 @@
</ul>
</div>
<div class="well sidebar-nav">
- <p>Bought to you by</p>
- <div class="logo"></div>
+ <p>Brought to you by</p>
+ <a class="logo" href="http://apiengine.io"></a>
</div>

0 comments on commit a0bbc1b

Please sign in to comment.