一个简单的Ajax + SEO解决方案?

时间:2009-12-21 15:22:11

标签: ajax seo

在我的网站上我在谷歌的中心有一个搜索框,当你搜索它显示符合搜索条件的所有线程时。

所以这些线程都是ajaxad in,但当你点击一个线程时,它会转到线程内容,并使用通常的href链接,页面将刷新。

现在我必须让谷歌找到这些以通常的方式链接到每个线程的线程链接,所以如果我在右上角的第一页中显示“显示所有线程”链接,显示我网站中的每个线程,它解决了SEO部分吗?

google能够将它们全部编入索引,但用户只会使用ajax搜索框吗?

我已经读过“只要谷歌可以从第一页(index.php)找到你所有的内容就可以了”。那么这将是一个很好的解决方案吗?

4 个答案:

答案 0 :(得分:3)

AJAX的一个缺点是它破坏了网络的一个基本方面:访问给定URL的任何人都将获得相同的页面视图。这意味着书签对您来说无法正常工作(或根本没有用),并且链接共享无法正常工作。这也意味着机器人(甚至是非常聪明的机器人)可能会错过您网站的整个部分。

解决此问题的一种方法是确保通过非AJAX方式可以访问所有内容。 优雅降级是一个重要的设计概念,但事后很难实现。我的规则是让网站在没有任何JS魔法的情况下正常工作,然后如果启用JS则使其更加流畅。从可访问性的角度来看,这也很好,因为许多有障碍的人无法从AJAX和其他JS魔法中受益(或者实际上进一步处于不利地位)。

答案 1 :(得分:1)

这可以解决问题 - 你最好把链接放在另一个页面上。您可以相信,您的用户将采用阻力最小的路径。如果您的搜索效果比您的商家信息更好,那么您就可以了。

关于Google,您所描述的内容听起来很像站点地图。这样可以正常工作,但如果超过150个链接(大约是搜索机构放弃的时间),请考虑将其分解为多个页面。该页面也应该是index.php之外的其他内容,然后在主页上提供指向它的链接。很多新闻网站按天或按周分类,但您也可以使用字母或其他。使用适合您网站的最佳系统。

答案 2 :(得分:1)

关闭您网站上的JavaScript。你能以某种方式导航到线程吗?如果是这样,你可以假设谷歌也可以。

我必须假设您的网站不仅仅依赖于搜索来查找线程。应该有某种传统的基于类别的方式进入论坛。如果是这样,那应该是Google的全部需求。

更糟糕的情况?是的,所有帖子的某种索引的单一链接也应该有效。

答案 3 :(得分:-2)

以下是包含Php,Apache,Ajax,history.js(支持书签和后退)的完整Web示例,以及没有哈希(#)或查询(?)的SEO支持:http://solusiprogram.com/ajax-seo-with-back-forward-support/

现场演示是网站本身。只需尝试打开或关闭javascript(以符合SEO)。

以下是该链接的内容:

  • 替换所有" yourdomain.com"下面提到你的
  • 将下面提到的所有文件放到Apache Document Root
  • 下载jquery-1.11.1.min.js
  • 下载browserstate-history.js-1.8-20-gd213d8c.tar.gz然后放入 这些3个文件到你的文档根目录:

    • 脚本/压缩/ history.js
    • 脚本/压缩/ history.adapter.jquery.js
    • 脚本/捆绑/ HTML4 + HTML5 / jquery.history.js
  • 创建.htaccess

    #if server returns error, remove this line as your hosting server already handles it
    Options +SymLinksIfOwnerMatch
    RewriteEngine On
    RewriteBase /
    
     #these 3 parts below avoiding duplicate contents that SEO doesn't like
    
     #enforce non-www-uri (you can modify it if you want www-uri instead)
    RewriteCond %{HTTP_HOST} ^www.yourdomain\.com$ [NC]
    RewriteRule ^(.*)$ http://yourdomain.com/$1 [L,R=301]
     #remove trailing index.html or index.php
    RewriteCond %{THE_REQUEST} /index\.(html|php)\ HTTP/
    RewriteRule ^(.*)index\.(html|php)$ http://%{HTTP_HOST}/$1 [L,R=301]       
     #enforce a trailing-slash
    RewriteRule ^([^.]*[^/])$ http://%{HTTP_HOST}/$1/ [L,R=301]       
    
     #set your home page as the default page
    Rewriterule ^$ http://%{HTTP_HOST}/home/ [L,R=301]       
     #to achieves SEO friendly without querystring uri
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    Rewriterule ^([^?]*)/?$ /index.php?page=$1 [NC,L,QSA]
  • 创建index.php

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <?php
    $base_uri = "http://yourdomain.com/";
    $menus[] = array( 'href'=>'home' , 'title'=>'Home Page' , 'display_text'=>'Home' );
    $menus[] = array( 'href'=>'page1', 'title'=>'Page 1'    , 'display_text'=>'Page 1' );
    $menus[] = array( 'href'=>'page2', 'title'=>'Page 2'    , 'display_text'=>'Page 2' );
    $page_query = trim( $_GET['page'], '/' );
    $page  = 'home';    $title = 'Home Page';    //the default page to display
    $menu_display = '';
    foreach( $menus as $menu ) {
        $menu_display .= '<li><a href="' .$base_uri.$menu['href']. '/" title="' .$menu['title']. '">' .$menu['display_text']. '</a></li>';
        if( $menu['href'] == $page_query ) {    //set page to display based on url query
            $page  = $page_query;
            $title = $menu['title'];
        }
    }
    echo '<title>' .$title. '</title>';    //php set page title for the first load of this index.php then History will replace it when user clicks a menu or back/forward browser button
    ?>
    <script src="http://yourdomain.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="http://yourdomain.com/jquery.history.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function () {
            if( document.location.protocol === 'file:' )  alert( 'The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.' );
            var last_url = "";
            var History = window.History;
            //intercept the menu click event
            $('li>a').click(function () {
                $(this).onclick = undefined;    //to prevent default anchor event >> thanks to http://stackoverflow.com/users/690854/thecodeparadox
                var data = {};   data.putYour = "data here if you need to";
                //push the data, url & title to History and then History.Adapter will load the url
                History.pushState( data, $(this).attr('title'), $(this).attr('href') );
                return false;
            });
            //History.adapter triggered by pushState() above or by back/forward browser button
            History.Adapter.bind( window,'statechange',function() {
                var State = History.getState();
                var data = State.data;    //all the data you passed on pushState() above is accessable here now, then you can do whatever you need
                var url = State.url;
                url = url.replace( /\/$/,'' );    //remove trailing slash
                if( url==last_url ) return;    //prevent ajax from loading the same last_url
                last_url = url;
                if( !( /.html$/i.test(url) ) ) url=url+'.html';    //make sure it ends with '.html'
                //alert( "ajax will load page: '" + url + "'");
                $("#ajax_target").load(url);
            });
        });
    //]]>
    </script>
    <style type="text/css">
        body { margin:2em; }
        #menu { border: 3px solid #DDD; }
        ul {
            margin:1em;
            background:#DDD;
        }
        li {
            list-style-type: none;
            background:white;
            padding:5px 13px;
        }
        #ajax_target {
            text-align: center;
            vertical-align: middle;
            padding:3em;
            border: 3px solid #DDD;
        }
    </style>
    </head>
    <body>
    <h1>AJAX SEO by solusiprogram.com</h1>
    <h3>- support SEO uri without hash (#) or query (?)</h3>
    <h3>- can run normally without javascript to comply SEO</h3>
    <h3>- support Browser History Feature (Back/Forward Buttons)</h3>
    <h3>- the uri and Page's Title changed as content changed</h3>
    <h3>- support Html4 and Html5 Browser</h3>
    <div id="menu">
        <ul>
            <?php echo $menu_display; ?>
        </ul>
    </div>
    <div id="ajax_target">
        <?php require( $page . '.html' ); ?> <!-- php fill ajax_target for the first load of this index.php then History.Adapter will replace it when user clicks a menu or back/forward browser button -->
    </div>
    </body>
    </html>
                          
  • 创建home.html

    This is Home Page
  • 创建page1.html

    This is Page 1
  • 创建page2.html

    This is Page 2
  • 创建sitemap.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    
    <url>
      <loc>http://yourdomain.com/home/</loc>
      <changefreq>daily</changefreq>
    </url>
    <url>
      <loc>http://yourdomain.com/page1/</loc>
      <changefreq>daily</changefreq>
    </url>
    <url>
      <loc>http://yourdomain.com/page2/</loc>
      <changefreq>daily</changefreq>
    </url>
    </urlset>
  • 创建robots.txt

    User-agent: *  
    Disallow:  
    Sitemap: http://yourdomain.com/sitemap.xml
  • 现在您可以尝试&#34; http [:] // yourdomain.com/"用javascript打开或关闭(遵守SEO)。