开发者

XHTML and Search Engine Optimization

I am new to the world of coding as well as XHTML. I am in the process of putting a sample page together however having read a number of conflicting articles, it has been suggested that the navigation div block appear above the content div block or vice versa or does it not matter at all? Below is my base code as an example.

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />

    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Sample page</title>

    <link rel="stylsheet" type="text/css" href="web.css" media="all" />

    <style type="text/css" media="all">

    body {

        margin: 0;
        padding: 0;
        font-family: arial, verdana, sans-serif;
        font-size: medium;
        font-weight: normal;
        font-style: none;
        text-decoration: none;

    }

    #wrapper {

        border: 1px solid #eeeeee;
        width: 960px;
        margin: 0px auto;

    }

    #header {

        background-color: orange;

    }

    #leftnav {

        background-color: yellow;
        float: left;

    }

    #rightnav {

        background-color: blue;
        float: right;

    }


    #content {

        background-color: gray;

    }


    #footer {
        clear: both;
        background-color: green;

    }

    </style>

</head>

<开发者_JAVA技巧;body>

    <div id="wrapper">
        <div id="header">
            header
        </div>

        <div id="leftnav">
            leftnav
        </div>

        <div id="rightnav">
            rightnav
        </div>

        <div id="content">
            content
        </div>

        <div id="footer">
            footer
        </div>
    </div>

</body>
</html>


I think you need to elaborate your question. I am unable to figure it out that whether you are concern with SEO or HTML code. Declaring dive any where is not an SEO issue. But for better readability it would be better to make your web page in order.

Like Header at the top. Content in center and footer at the bottom. Left or right navigation menus can be mention before or after content but i suggest that first you should make left nav, then content and then right....


Ideally from an SEO perspective you would want the most important code to appear highest in the HTML source. This is one of the many factors that potentially contribute to how important certain content within a page is perceived to be to search engines.

If it were me I would make the following adjustments to the base template provided

  • Move the content div above the navigational elements within the source code.
  • Move the inline CSS code to an external CSS file to help reduce page load times and allow the most important content to move even higher in the source code.


The advice to put the navigation block before the content block is not SEO related, but usability related, in particular for those with screen readers.

The idea is to put a first (invisible to graphical browsers) link to the content of the page so navigation can be bypassed.


Your code is wrong, but here's how you can fix it: You are using XHTML so you must include XML language information, also you should just include your general language info in your HTML declaration like this:

Microsft's Bing would flag this as an error and inform you to change it appropriately.

Don't use margins, or floats! This is like saying, ok, please move this element a little towards the left and kind of towards the right. Makes no sense! Use absolute positioning and percentages to place elements in your webpages CSS. There are too many different size screens and too many resolutions today. Float and margin are 1995, and I have no idea why people are still using these methods. We also have a society that is now driven by mobile. Keep in mind, one pixel on device will be larger or smaller than one pixel on another device. You can have 5 laptops that are all 17 inches and all have completely different resolutions! Its ok to specify a fixed pixel width and height for images and elements, but you must use percentages when placing those elements otherwise they won't appear in the right position on alternate devices and LCD screens.

If you position an element using absolute positioning with a percentage value such as:

"position: absolute; left: 30%; top: 5%;", then that particular element will be displayed on the screen at 30% from the left, and 5% from the top of the screen regardless of the device rendering it! However, if you position an element with a fixed pixel value say:

"position: absolute; left: 160px; top: 45px;" this will not render correctly on any screen other than the one you are viewing it on. Don't do this! Think about it? You have 2 separate resolutions, one is 1024x768, and the other is, 1366x768, obviously using fixed values will cause serious problems. A percentage is a percentage of the screens or browsers resolution, while a pixel value is a fixed value that hardly changes.

As for your question, you can include your navigation or any other content any way you wish, just be sure to use CSS ID's and corresponding DIV tags that map back to them. Doesn't matter where or when you specify them in your CSS at all. Its entirely up to you. Just stay away from all that "padding" and "margin" stuff, its pointless. With absolute positioning you don't have to float anything, cause everything goes exactly where you want it too from either the top-left, or bottom-right of the screen.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜