XHTML 和搜索引擎优化答案

【问题标题】：XHTML and Search Engine OptimizationXHTML 和搜索引擎优化
【发布时间】：2011-08-28 09:24:43
【问题描述】：

我是编码和 XHTML 领域的新手。我正在将示例页面放在一起，但是在阅读了许多相互冲突的文章后，有人建议导航 div 块出现在内容 div 块上方，反之亦然，或者根本不重要？下面以我的基本代码为例。

<!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>

<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>

【问题讨论】：

标签： xhtml seo

【解决方案1】：

将导航块放在内容块之前的建议与 SEO 无关，而是与可用性有关，尤其是对于那些有屏幕阅读器的人。

这个想法是为页面内容放置第一个（图形浏览器不可见的）链接，以便可以绕过导航。

【讨论】：

The idea is to put a first (invisible to graphical browsers) link to the content of the page so navigation can be bypassed. 是什么意思？
@PeanutsMonkey - 类似<a href="#content">Content</a> 的东西并设置样式使其不可见（css 将其隐藏）。
你的意思是，如果我的页面顶部在正文下方的所有其他 div 标签之前有一个链接，该链接将立即将用户带到内容？
我不相信在图形浏览器中隐藏链接的想法。 “跳转到内容”链接不仅适用于屏幕阅读器用户，也适用于输入设备使用受限的用户。想想sip-and-puff设备。对于这些用户来说，跳过大块链接的能力非常有用，但他们仍在使用图形浏览器并希望能够看到焦点在哪里。
这是我看到的一篇文章，表明页面布局确实会影响 SEO。不确定这在多大程度上是正确或正确的 - blog.ucvhost.com/?p=97

【解决方案2】：

理想情况下，从 SEO 的角度来看，您希望最重要的代码在 HTML 源代码中出现在最高位置。这是可能影响页面中某些内容对搜索引擎的重要性的众多因素之一。

如果是我，我会对提供的基本模板进行以下调整

将内容 div 移到源代码中导航元素的上方。
将内联 CSS 代码移动到外部 CSS 文件，以帮助减少页面加载时间，并允许最重要的内容在源代码中移动到更高的位置。

【讨论】：

【解决方案3】：

我认为您需要详细说明您的问题。我无法弄清楚您是否关心 SEO 或 HTML 代码。在任何地方宣布潜水不是 SEO 问题。但是为了更好的可读性，最好让你的网页井井有条。

喜欢顶部的标题。内容在中心，页脚在底部。左侧或右侧导航菜单可以在内容之前或之后提及，但我建议您首先应该制作左侧导航，然后是内容，然后是右侧....

【讨论】：

【解决方案4】：

您的代码有误，但您可以通过以下方式修复它：您正在使用 XHTML，因此您必须包含 XML 语言信息，并且您应该只在 HTML 声明中包含您的一般语言信息，如下所示：

Microsft 的 Bing 会将此标记为错误并通知您进行适当的更改。

不要使用边距或浮动！这就像说，好的，请将此元素向左移动一点，向右移动。没有意义！使用绝对定位和百分比在您的网页 CSS 中放置元素。今天有太多不同尺寸的屏幕和太多的分辨率。浮动和边距是 1995 年，我不知道为什么人们仍在使用这些方法。我们还有一个现在由移动驱动的社会。请记住，设备上的一个像素将大于或小于另一设备上的一个像素。您可以拥有 5 台 17 英寸且分辨率完全不同的笔记本电脑！可以为图像和元素指定固定的像素宽度和高度，但是在放置这些元素时必须使用百分比，否则它们将不会出现在备用设备和 LCD 屏幕上的正确位置。

如果您使用绝对定位和百分比值定位元素，例如：

"position: absolute; left: 30%; top: 5%;"，则该特定元素将显示在屏幕上距屏幕左侧 30% 和距屏幕顶部 5% 的位置，与设备无关渲染它！但是，如果您定位具有固定像素值的元素，请说：

"位置：绝对；左：160px；上：45px；"除了您正在查看的屏幕之外，这不会在任何屏幕上正确呈现。不要这样做！想想看？你有两种不同的分辨率，一种是1024x768，另一种是1366x768，显然使用固定值会导致严重的问题。百分比是屏幕或浏览器分辨率的百分比，而像素值是几乎不会改变的固定值。

至于您的问题，您可以以任何您希望的方式包含您的导航或任何其他内容，只要确保使用映射回它们的 CSS ID 和相应的 DIV 标签。在 CSS 中指定它们的位置或时间都没有关系。这完全取决于你。远离所有那些“填充”和“边距”的东西，这是没有意义的。使用绝对定位，您不必浮动任何东西，因为无论是从屏幕的左上角还是右下角，所有东西都会准确地到达您想要的位置。

【讨论】：