Improve search engine ranking based on AJAX skills

The navigation elements embedded in your web page can drop your search engine rating rankings and reduce the response performance of your website. The authors of this article want to discuss with you how to apply AJAX skills to solve these two titles. Many well-designed websites

The navigation elements embedded in your web page can drop your search engine rating rankings and reduce the response performance of your website. The authors of this article want to discuss with you how to apply AJAX skills to solve these two titles.

Many well-designed web sites contain a large number of navigation information that is in contact with the actual content. The HTML tags used for navigation can affect your search engine evaluation and improve the page download experience of visitors. In this article, you will see how to use AJAX to create more concentrated and faster web pages.

1. navigation and content

Let's use an example as the beginning. Consider the article you are browsing. it has the following content:

· A header with some predefined links to each part of Informit.

· There is a row under the header. put this article in The Informit directory structure (in fact, this is the only Directory-related navigation element ).

· A sidebar on the right, with links to popular articles and recommended content.

· A footer with links that will never change.

The above "hybrid" may affect how search engines index your data:

· Because search engines cannot distinguish content from navigation text, they will Index everything they find on your page. Since the key words in the directory are mixed with irrelevant key words that can be navigated, the association between contents is greatly reduced. Some search engines claim that they can invent duplicate text and delete them in the searched pages (such as fixed headers and footers. However, do not attach this possibility; even if they implement this technique, it is likely not always reliable.

· Page evaluation of the influence of outgoing links on your content on web pages. Although this may increase the ranking of popular articles (because many pages are linked to them), all pages are linked to the content (for example, privacy policy) usually get the highest page rating-this may not be the title you are always concerned about. In one of my websites, the highest rating page is a form used to send messages to web administrators-not the content you want users to find on Google first.

Be careful

Even if you do not apply a site map, you can use the Google site map user interface to understand the page ranking of your page.

Navigation elements added to a web page may also affect low-speed Internet access users. This is especially true if the web page does not apply the DIV element (Informit application) and the application table. In this case, all tables must be loaded into some web browsers before they are displayed to users.

Traditionally, web designers generally use a framework set or build a complete navigation architecture (JavaScript code is widely used) to separate navigation and content. These two paths all have their faults. Therefore, it is not surprising that many large websites avoid using a framework set.

With the help of the techniques used in the AJAX framework, you can think that this title provides a plan:

· Each web page contains only navigable elements and placeholders of actual content.

· After loading a web page through an embedded framework (IFRAME) or an XmlHttpRequest object, load these navigable elements.

· Then, the content of the navigation element is merged into the content of the web page to generate a clean page that is not embedded in any frame.

Before applying this method to redesign your web page, consider the following title:

· The search engine only displays the initial web page. You must make sure that the page contains links to a related page or a website map. The navigation line at the top of the article header on the Informit website and the link in the article information section on the page can achieve this goal well.

· Visitors who prohibit JavaScript calls in their browsers will have the same page view as the search engine. You must ensure that their restricted views do not significantly affect the effectiveness of your website.

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

When you decide which part of your navigation structure should be attached to the page and which part should be left with it, you can start the next step.

2. design your Web page

The first step to implement separate content and navigation is to create a placeholder that will be inserted into the navigation element on the web page. For each continuous area of a navigable element, you should create an independent DIV element with a unique id. in this way, you can identify it in your JavaScript code later. To prevent excessive shaking, the size of the DIV element on the top or right of the directory should be adjusted to a very close size to the actual size of your navigable element during the creation of the page; in this way, when you use the expected HTML code to replace them, the content will not move. To this end, the most amazing way is to insert an empty DIV element of an appropriate size into the placeholder.

For Informit websites, the page structure has been well designed, and the DIV element has been very good.

You only need to delete the content from the navigation DIV element and insert it into an empty box. the header will be displayed here (for the sake of simplicity, we will neglect to embed company logo and copyright information into every page for discussion ). The following code is used:

Reference content is as follows:
<Div id = "header">
<Div style = "height: 100 px; width: 100%"> </div>
</Div>
<Div id = "contentArticle">
<Div id = "firstCol">
... Article content ....
</Div>
<Div id = "secondCol"> </div>
</Div>
<Div id = "footer"> </div>

Be careful

If your web page applies a table to achieve the expected page layout, do not reuse the table cells as placeholders. it is better to place the DIV elements in the table cells.

Navigation elements that have been deleted from web pages must be recreated as independent pages. You should apply static HTML files to express static content (this will promise to buffer content, no matter what web server you apply) and create a server script that displays dynamic elements on the web page that loads them. For Informit, each web page has a unique article identifier (the "p =" parameter in the URL). therefore, you need to create a server script that can receive the article identifier and create the column on the right. In most cases, you can reuse the server-side code that creates embedded navigation elements.

After re-designing these web pages, you can implement the AJAX section in this plan. As in general, you can apply an Embedded Framework (IFRAME element), or select an XmlHttpRequest object.

III. Embedded Framework

If you are concerned about browser compatibility, you should apply an embedded framework. Some old browsers support IFRAME elements, but do not support XmlHttpRequest objects. Of course, there are some reasons for applying this method:

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

· Page buffering always works when the application loads content into an IFRAME. Some versions of Opera cannot better use the XmlHttpRequest object to process buffered responses.

Therefore, we can insert an empty IFRAME into each DIV container and add a short JavaScript statement after each IFRAME, as shown below:

Reference content is as follows:
<Div id = "header">
<Div style = "height: 100 px; width: 100%"> </div>
<Iframe id = "header_iframe" style = "height: 0px;"> </iframe>
<Script> loadIframe ("header", "/navigation/header.html") </script>
</Div>

The IFRAME id should be the placeholder id with _ iframe as the suffix. The loadIframe function applies two parameters: the placeholder id and the URL to be loaded.

Tips

If you want to make the IFRAME content visible during the download process, you should apply an appropriate IFRAME element to swap the empty DIV box in the placeholder. However, if you want to make IFRAME invisible, you should apply the style attribute to set its height to 0 to overcome some browser errors.