XHTML и поисковая оптимизация - PullRequest
0 голосов
/ 19 мая 2011

Я новичок в мире кодирования, а также 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>

Ответы [ 4 ]

2 голосов
/ 07 октября 2011

Я думаю, вам нужно проработать свой вопрос.Я не могу понять это, если вы беспокоитесь о SEO или HTML-коде.Объявление о погружении в любом месте не является проблемой SEO.Но для лучшей читаемости было бы лучше сделать вашу веб-страницу в порядке.

Как заголовок вверху.Содержимое в центре и нижний колонтитул внизу.Левое или правое навигационное меню может быть упомянуто до или после контента, но я предлагаю сначала сделать левую навигацию, затем контент, а затем право ....

0 голосов
/ 06 декабря 2012

Ваш код неверен, но вот как вы можете это исправить: Вы используете XHTML, поэтому вы должны включить информацию о языке XML, а также просто включить информацию об общем языке в декларацию HTML следующим образом:

Bing от Microsft отметит это как ошибку и сообщит вам, чтобы изменить его соответствующим образом.

Не используйте поля или поплавки! Это все равно что сказать, хорошо, пожалуйста, переместите этот элемент немного влево и немного вправо. Не имеет смысла! Используйте абсолютное позиционирование и проценты для размещения элементов на ваших веб-страницах CSS. Сегодня слишком много экранов разных размеров и слишком много разрешений. Float и margin - 1995, и я понятия не имею, почему люди все еще используют эти методы. У нас также есть общество, которым сейчас движет мобильный. Помните, что один пиксель на устройстве будет больше или меньше одного пикселя на другом устройстве. У вас может быть 5 ноутбуков, которые все 17 дюймов, и все имеют совершенно разные разрешения! Можно указать фиксированную ширину и высоту пикселя для изображений и элементов, но при размещении этих элементов необходимо использовать проценты, иначе они не будут отображаться в правильном положении на альтернативных устройствах и ЖК-экранах.

Если вы позиционируете элемент, используя абсолютное позиционирование с процентным значением, например:

"позиция: абсолютная; слева: 30%; сверху: 5%;", тогда этот конкретный элемент будет отображаться на экране на 30% слева и на 5% от верхней части экрана независимо от устройства рендеринг это! Однако, если вы размещаете элемент с фиксированным значением пикселя, скажите:

"позиция: абсолютная; слева: 160px; верх: 45px;" это не будет правильно отображаться на любом экране, кроме того, на котором вы его просматриваете. Не делай этого! Думаю об этом? У вас есть 2 отдельных разрешения, одно - 1024x768, а другое - 1366x768, очевидно, что использование фиксированных значений вызовет серьезные проблемы. Процент - это процент разрешения экрана или браузера, а значение пикселя - это фиксированное значение, которое практически не меняется.

Что касается вашего вопроса, вы можете включить свою навигацию или любой другой контент любым удобным для вас способом, просто обязательно используйте CSS ID и соответствующие теги DIV, которые сопоставляются с ними. Неважно, где или когда вы указываете их в своем CSS вообще. Это полностью зависит от вас. Просто держитесь подальше от всего этого "отступов" и "полей", это бессмысленно. С абсолютным позиционированием вам не нужно ничего плавать, потому что все идет точно так же, как вы хотите, в верхнем левом или нижнем правом углу экрана.

0 голосов
/ 22 мая 2011

В идеале, с точки зрения SEO, вы бы хотели, чтобы самый важный код отображался в исходном HTML-коде как можно выше.Это один из многих факторов, которые могут повлиять на то, насколько важен определенный контент на странице для поисковых систем.

Если бы это был я, я бы внес следующие изменения в предоставленный базовый шаблон

  • Переместите div содержимого над навигационными элементами в исходном коде.
  • Moveвстроенный CSS-код во внешний CSS-файл, который помогает сократить время загрузки страницы и позволяет наиболее важному контенту перемещаться еще выше в исходном коде.
0 голосов
/ 19 мая 2011

Совет по размещению блока навигации перед блоком контента связан не с SEO, а с юзабилити, особенно для тех, у кого есть программы чтения с экрана.

Идея состоит в том, чтобы поместить первую (невидимую для графических браузеров) ссылку на содержимое страницы, чтобы навигацию можно было обойти.

...