对搜索引擎友好的 Ajax

• 下载源代码 - 28.83 KB

引言

本文档展示了如何开发一个针对搜索引擎爬取进行优化的简单网站。它解决了某些搜索引擎对 JavaScript 的问题。

示例

• Ajax 网页设计 - 搜索引擎优化

搜索引擎优化

以下是一些获得更好搜索引擎结果的技巧。

将 JavaScript 移出 HTML

搜索引擎会忽略网站中的 JavaScript。大多数 Ajax 站点使用在超链接中调用的函数。例如

<a href="#" onclick="window.open('help.html'); return false;">Test</a>		

搜索引擎会在你的页面中搜索链接，以便进一步爬取你的网站。在上面的例子中，href 显示 #。搜索引擎将仅限于访问你网站的下一页。在下一个例子中提供了一个解决方案

<a href="Pagina.html" title="Search engine optimization" class="MenuItem">Page1</a>

if(document.getElementsByTagName)
{
        //Get all elements with tag <a>
        var links = document.getElementsByTagName('a');
        var menuUrl = "#";
        
        //Browse arraylist Links
        for(var i = 0; i < links.length ; i++)
        {
            //If element is a menuitem
            if(links[i].className.match('MenuItem'))
            {
                  //Add function to onclick
                  links[i].onclick = function(){
                  //or other function like my website to get XMLrequest
                  var url = this.href;
                  window.open(url);
                  return false;
                  };
            }
        }
}

上面的例子展示了如何在超链接中使用函数，而无需在超链接中使用内联 JavaScript。

使用锚标签用于书签目的

Ajax 网站会破坏浏览器中的后退按钮。当你浏览 Ajax 网站并点击后退时，你将返回很久以前访问的第一个页面。此外，如果你想为页面添加书签，它将为首次访问的网站页面添加书签。以下是一个如何修复此问题的示例

if(document.getElementsByTagName)
{
        //Get all elements with tag <a>
        var links = document.getElementsByTagName('a');
        var menuUrl = "#";
        
        //Browse arraylist Links
        for(var i = 0; i < links.length ; i++)
        {
            //If element is a menuitem
            if(links[i].className.match('MenuItem'))
            {
                  //Add function to onclick
                  links[i].onclick = function(){
                  
                  //get attribute list
                  var att = this.attributes;
                  //works only in Firefox
                  this.history = location.href;
                  
                  //set a parameter behind the URL example : #page
                  location.hash = att.getNamedItem("href").value;
                  window.status = att.getNamedItem("title").value;
                  document.title = att.getNamedItem("title").value;

                  //function

                  return false;
                  };
            }
        }
} 

永久链接

如果你去看看我的网站 这里，你将会看到每个页面都有一个永久链接。我通过解析每个页面中的一个 div 来实现，以便在有人点击链接时在内容 div 中显示。我的 JavaScript 的完整代码是

var loader = false; // false if no Loader

var http = false;
window.onload = Init;

if(navigator.appName == "Microsoft Internet Explorer") 
{
  try 
    { 
        http = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch (e) 
    { 
       try 
       { 
          http = new ActiveXObject("Msxml2.XMLHTTP"); 
       }
       catch (e) 
       {} 
    } 
} 
else 
{
     http = new XMLHttpRequest(); 
     if (http.overrideMimeType) 
     { 
         http.overrideMimeType('text/html'); 
     } 
}

    var parts = window.location.href.split("#");
    if(parts.length > 1)
    {
    location.href=parts[1];
    }
//Load function to add onclick function to menuitems
function Init(){

    if(document.getElementsByTagName)
    {

        //Get all element with tag <a>
        var links = document.getElementsByTagName('a');
        var menuUrl = "#";
        
        //Browse arraylist Links
        for(var i = 0; i < links.length ; i++)
        {
            //If element is a menuitem
            if(links[i].className.match('MenuItem'))
            {
                  //Add function to onclick
                  links[i].onclick = function(){
                  menuUrl = this.href;
                  var att = this.attributes;
                  
                      this.history = location.href;
                      location.hash = att.getNamedItem("href").value;
                      window.status = att.getNamedItem("title").value;
                      document.title = att.getNamedItem("title").value;

                  
                  //Open URL given by href attribute
                  http.open("GET",menuUrl, true);
                  //If page is loaded
                  
                  http.onreadystatechange=function() {
                    if(http.readyState == 3)
                    {
                        if(loader)
                        {
                        document.getElementById('Content').innerHTML = 
			"<br/><br/><center><img src=\"img/ajax-loader.gif\" 
			title=\"Loading...\" /></center>";
                        }
                    }
                    if(http.readyState == 4) {
                        if(http.status == 200)
                        {
                         div=document.createElement('div');  
                         div.innerHTML = http.responseText;
                         document.getElementById('Content').innerHTML = gethtmlDiv(div);
                         }
                         else
                         {
                         document.getElementById('Content').innerHTML = 
			"<center>... Could not open page ...</center>";
                         }
                    }
                  }
                  http.setRequestHeader("Content-Type", "text/html");
                  http.send(null);
                  return false;
                };
            }
        }
    }
}

function gethtmlDiv(dv)
{
    var html;
    var boolfound = false;
    
    for(var j=0,d;d=dv.childNodes[j];j++)
    {

         if(d.nodeName == 'DIV')
         {
           if(d.id)
           {
               if(d.id.match('Content'))
               {
                     html = d.innerHTML;
                     boolfound = true;
               }
               else
               {
                    html = gethtmlDiv(d);
               }
            }
            else
            {
                    html = gethtmlDiv(f);
            }
        }
        else
        {
                html = gethtmlDiv(d);
        }
        
        if(html)
        {
            break;
        }
        if(boolfound)
        {
            break;
        }
    }
    return html;
}

历史

• 2009 年 3 月 16 日：初始发布