Using AJAX technology to improve search engine rankings

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Navigation elements embedded in your Web pages can degrade your search engine rankings and reduce the responsiveness of your site.　　The author of this article would like to explore with you how to use AJAX technology to solve these two problems. Many well-designed Web sites contain a large amount of navigable information associated with the actual content. HTML tags for navigation can affect your search engine evaluation, and can improve the visitor's page download experience. In this article, you'll see how to use Ajax to create a more centralized, faster-loaded Web page.

Separation of navigation and content

Let's start with an example. Please consider the article you are reading, which has the following elements:

· A header that has some predefined links to various parts of the informit.

· There is a line under the header that puts this article in the INFORMIT directory structure (in fact, this is the only navigable element associated with the directory).

· A sidebar in right-hand, with links to popular articles and recommended content.

· A footer and some links that will never change.

The "Mix" above is likely to affect the way the search engine indexes your data:

· Because search engines can't differentiate between content and navigation text, they index everything they find on your page. Since the keywords in the directory are mixed with irrelevant navigable keywords, the association between the contents is greatly reduced. Some search engines claim that they can find duplicate text in the pages they are searching for (for example, fixed headers and footers) and delete them. However, do not rely on this possibility, even if they achieve this technology, it may not always be reliable.

· Outbound links in Web pages affect the page evaluation of your content. Although this may improve the ranking of popular articles (because many pages are linked to them), all the pages that are linked to (for example, privacy policies) usually get the highest page rating-this may not be a concern you have been concerned about. In one of my Web sites, the highest rating page is a form for sending messages to a Web administrator-not what you want users to find on Google first.

Note

Even if you don't use a site map, you can get a look at the page rank of your page through Google's Sitemap user interface.

Navigable elements that are added to a Web page can also affect users who use low speed Internet access, especially if the Web page does not use a DIV element (Informit) to use the table. In this case, the entire table must be loaded into some Web browsers before it is displayed to the user.

Traditionally, web designers typically use a frameset or create a complete set of navigation architectures (widely used JavaScript code) to separate navigation from content. Both of these approaches have their drawbacks, so it is not surprising that many large Web sites avoid using the frameset.

With the technology used in the AJAX framework, you can provide a solution for this problem:

· Each Web page contains only the navigable elements and placeholders for the actual content.

· Loads these navigable elements after the Web page is loaded through an embedded frame (IFRAME) or with a XMLHttpRequest object.

· The contents of the navigable elements are then merged into the Web page content to produce a clean page that does not embed any frames.

Before you redesign your Web page in this way, you need to consider the following questions:

· The search engine will only see the initial Web page. You must make sure that the page contains links to related pages or to a site map. The navigation line at the top of the article header in the Informit Web site and the links in the article Information section of the page are just a good way to achieve this.

· Visitors who prohibit invoking JavaScript in their browsers will have the same page view as the search engine. You have to make sure that their restricted view does not make a big impact on your site's functionality.

· You may want to keep some static content on your page. For example, the informit identification and copyright information must always be displayed to all visitors.

You can start the next step when you are sure that you want to attach your navigation structure to the page and which parts should be separated from it.

Second, design your Web page

The first step towards separating content and navigation is to create placeholders that will insert navigable elements on a Web page. For each contiguous area of navigable elements, you should create a separate div element with a unique ID, so that you can identify it in your JavaScript code later. To prevent excessive shaking, the size of the DIV elements above or to the right of the TOC should be resized to be very close to the actual size of your navigable elements during the authoring page, so that the content does not move when you use the desired HTML code instead. One of the most ingenious ways to do this is to insert an empty, appropriately sized div element into that placeholder.

For informit sites, the page structure is already well designed, and DIV elements are already in place, as shown in Figure 1.

Figure 11 Page structure of Informit article

You just need to remove the content from the navigable div element and insert an empty box, and the header will appear here (for brevity, we will ignore the discussion of embedding company logos and copyright information in each page). The following code is appropriate:

<div id= "header" >


<div style= "height:100px; width:100% "> </div>


</div>


<div id= "contentarticle" >


<div id= "Firstcol" >


... aspires content ...


</div>


<div id= "Secondcol" > </div>


</div>


<div id= "Footer" > </div>


Pay attention to


If your Web page uses tables to achieve the desired page layout, do not reuse table cells as placeholders, and it is better to put DIV elements in table cells.


elements that have been removed from the Web page must be recreated as separate pages. You should use static HTML files to express static content (this will allow buffered content, no matter what Web server you use) and create a server-side script that displays dynamic elements on the Web page that loads them. For Informit, each Web page has a unique article identifier (the "p=" argument in the URL); Therefore, you need to create a server-side script that accepts the article identifier and creates a column to the right. In most cases, you can reuse the server-side code that creates the embedded navigable elements.


after redesigning these web pages, you can then implement the Ajax section of this scenario. As usual, you can work with an inline frame (an IFRAME element), or you can choose a XMLHttpRequest object.


three, embedded frame


If you care about browser compatibility, you should use an embedded framework. Some older browsers support IFRAME elements, but XMLHttpRequest objects are not supported. Of course, there are some reasons to use this approach:


　　· Content loaded into an IFRAME is displayed in the browser during loading, which displays a visual process to the end user.


　　· Page buffering always works with content loaded into an IFRAME. Some versions of opera are not good at using XMLHttpRequest objects to handle buffered responses.


To do this, we can insert an empty iframe into each div container and add a short JavaScript statement after each IFRAME, as follows:


<div id= "header" >


<div style= "height:100px; width:100% "> </div>


<iframe id= "Header_iframe" style= "height:0px" > </iframe>


<script> loadiframe ("header", "/navigation/header.html") </script>


</div>

The ID of the
iframe should equal the ID of the placeholder with _iframe as the suffix. The Loadiframe function uses two parameters: the ID of the placeholder and the URL to load into.


Skills


if you want to make the iframe content visible during the download process, you should use an IFRAME element of the appropriate size to replace the empty div box in the placeholder. However, if you want to keep the IFRAME invisible, you should use the Style property to set its height to 0 to overcome errors in some browsers.


the Loadiframe function to start the load process is simple:


function Loadiframe (id,url) {


try {


var iframeobj = document.getElementById (id+ "_iframe");


iframeobj.src = URL;


} catch (err) {


alert ("Cant load" +url+ "into" +id);


　}


}


Pay attention to


all sample code in this article assumes that the browser-compatible document Object Model (DOM).


However, there is no mechanism to inform the requested page that the desired content has been loaded into the placeholder iframe. Therefore, the loaded content must be notified to the parent page (via a JavaScript call) to use the content. The best time to do this is after the page is loaded. Therefore, the body flag in the IFRAME content should contain an onload event:


<body style= "margin:0px 0px;


padding:0px 0px ">


Skills

The body portion of the content that
loads into an IFRAME should always have 0 margins and padding, otherwise it will migrate slightly when integrated into the parent page.

The contentloaded function that
executes in the context of the IFRAME extracts the corresponding HTML content in the body part and passes it to a function that executes in the context of the parent page, which is used to populate the appropriate placeholder:


contentloaded is executed in the context of the IFRAME:


function contentloaded (parentID) {


var mycontent = Document.body.innerHTML;


parent.copycontent (parentid,mycontent);


}


Copycontent is executed in the context of the parent Web page:


function Copycontent (id,content) {


try {


var placeholder = document.getElementById (ID);


placeholder.innerhtml = content;


} catch (err) {


alert ("Cant copy HTML content into" +id);


　}


}


now, attentive readers should be puzzled, why so complicated? Isn't it easier to load navigation elements in an IFRAME element? It turns out that it's better to add some kind of prevention of misunderstanding to this approach:


　　· The IFRAME has a fixed height and width. If the content is out of each other, the content will be clipped or the IFRAME will be added with scroll bars. However, HTML tags that are copied to a DIV element in a parent page always keep their size automatically resized.


　　· When in an IFRAME, the link (an element) in the navigation content will load the new page in the IFRAME unless you add target= "_parent" to each link.


　　· The JavaScript event handler attached to the navigation element will work in the context of the IFRAME (if this context is retained). If you move the navigation content to the main page, the event handler can access the functions and variables defined in the main page.


Four, use XMLHttpRequest


If your users are primarily using newer versions of Internet Explorer or Gecko browsers (Mozilla,firefox,netscape 7), Then you can decide to use the XMLHttpRequest object to download other content to your Web page. The first step is very similar to the way described earlier. For each placeholder, you need a JavaScript function call to start the loading process:


<div id= "header" >


<div style= "height:100px; width:100% "> </div>


<script> loadcontent ("header", "/navigation/header.html") </script>


</div>


However, the loadcontent function is fundamentally different: it creates a new XMLHttpRequest object, assigns an event handler to it, and initiates the load process asynchronously:


function Loadcontent (id,url) {


try {


var rq = new XMLHttpRequest ();


Rq.open ("Get", url, True);


Rq.onreadystatechange = function () {contentloaded (rq,url,id)}


rq.send (NULL);


} catch (err) {


alert ("Cant load" +url+ "into" +id);


　}


}


Pay attention to


each of the main browser families implements the XMLHttpRequest object in a different way. The easiest way to handle this compatibility problem is to use a wrapper library, such as Sarissa. We used this library in the example in this article.

The
callback function contentloaded is responsible for checking whether the XMLHttpRequest object is ready and complete (if the request is completed) and extracting the HTML markup from the response. The easiest way to extract HTML code (unless you use XHTML, in which case you can use the XMLDOM interface) is to use a string handler function to find the text between the <body> and </body> flags:


function contentloaded (rq,url,id) {


try {


if (rq.readystate!= 4) {return;}


if (Rq.status!=) {alert ("Failed to load" +url); Return; }


var txt = rq.responsetext;


//Find the start position of the <body> tag


var startbodytag = txt.indexof ("<body")


//Find the end of the <body> tag, skipping any properties


var endofstarttag = Txt.indexof (">", startbodytag+1)


//Find </body> tag


var endbodytag = txt.indexof ("</body")


if (Endbodytag = = 1) {Endbodytag = txt.length;}


//Extract actual content


var bodycontent = txt.substring (Endofstarttag+1,endbodytag)


if (bodycontent) {


var placeholder = document.getElementById (ID);


placeholder.innerhtml = bodycontent;


　　}


} catch (err) {


alert ("Cant load" +url+ "into" +id);


　}


}


the use of the XMLHttpRequest object has the following benefits compared to the previously described IFrame method:


　　· The code is cleaner and does not depend on the context switch of the page.


　　· The XMLHttpRequest object enables you to detect and handle errors (through its readystate and status attributes). When using an IFRAME to load content, if an error occurs, only very rough error prompts can be displayed, mainly because of the lack of calls to callback functions.


　　· You can implement parallel loading of content elements (as shown in this section) or sequential mount requests to minimize bandwidth utilization.


　


v. Summary


in this article, you learned how to separate your Web page content from the navigable elements that surround the content. Separation results in a more focused description of the page content that search engines are searching for, and also reduces the load time for users to use low speed Internet access (since the actual content is displayed to the user before the navigable elements are downloaded).


when you redesign your Web page to take advantage of this scenario, keep in mind that some basic format navigation must remain on the page to allow search engines and users who decide to disable JavaScript to navigate between the pages of your site.


you can use embedded frames (IFRAME) or use XMLHttpRequest objects implemented in the most modern browsers to implement deferred loading of navigable elements. The IFrame method can be supported by older browsers, so it may be the approach you want to consider if you are very concerned with backward compatibility issues. On the other hand, the use of XMLHttpRequest objects allows you to control the loading process more tightly and to detect and handle download errors.

Webmaster Network News list Www.admin5.com/top