Permalink
Browse files

more info

  • Loading branch information...
1 parent b3af17a commit 028c717432ae60c6be450c56d38fd6a40a2ed74d @thomasdavis thomasdavis committed Oct 3, 2012
Showing with 47 additions and 8 deletions.
  1. +5 −0 css/theme.css
  2. +3 −2 index.html
  3. +37 −4 templates/home/page.html
  4. +2 −2 templates/menu.html
View
@@ -8,4 +8,9 @@
.showseo-output {
width: 100%;
height: 300px;
+}
+
+code {
+ margin-bottom: 10px;
+ display: inline-block;
}
View
@@ -2,10 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>Seo Server</title>
+ <title>Seo Server - Enabled SEO for your Javascript applications</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
- <meta name="description" content="">
+ <meta name="description" content="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.">
<meta name="fragment" content="!">
+ <base href="/repos/seoserver-site/" />
<link rel="stylesheet" href="css/styles.css">
<script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script>
</head>
View
@@ -1,8 +1,41 @@
<div class="well">
- Welcome
+ <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>
-<hr />
- <button class="btn btn-info showseo">What does Google see?</button>
+ <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>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>
+ <code>seoserver start</code>
+ <p>Which starts an Express server on port 3000 or</p>
+ <code> seoserver -p 4000 start</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.</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>
+ <hr />
+<button class="btn btn-info showseo">What does Google see?</button>
<hr />
<textarea class="showseo-output" disabled="disabled"></textarea>
-</div>
+</div>
+
View
@@ -1,7 +1,7 @@
<div class="well sidebar-nav">
<ul class="nav nav-list">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Docs</a></li>
+ <li class="active"><a href="">Home</a></li>
+ <li><a href="docs">Docs</a></li>
<li class="nav-header">Examples</li>
<li><a href="#">HTML Templates</a></li>
<li><a href="#">AJAX Data</a></li>

0 comments on commit 028c717

Please sign in to comment.