SEO Воздействие ботстрапов видимое - lg/md/sm/xs - classes

Мне было интересно, знает ли кто-нибудь о влиянии SEO на использование классов bootstraps visible для создания отзывчивого веб-сайта? Я создал новый сайт с Bootstrap, используя эти классы. На большинстве страниц основное содержание находится слева, а затем есть несколько ссылок в правой части страницы. Моя структура такова:

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        //Main content here on left of page
    </div>

    <div class="col-lg-6 col-md-6 visible-lg visible-md">
        //Content on right of page for large and medium devices
    </div>

    <!--SMALL STARTS HERE-->      
    <div class="col-sm-12 visible-sm">
        //Same content but drops below main content of page for small devices 
    </div>

    <!--EXTRA SMALL STARTS HERE-->    
    <div class="col-xs-12 visible-xs">
        //Same content again but drops below main content and is rendered for phones
    </div>
</div>

Итак, мой вопрос, если это плохая идея или нет? Я обеспокоен тем, что Google/Bing/Yahoo увидит это как дублирующее содержимое на моих страницах и накажет меня за это. Это проблема, о которой я должен беспокоиться? Спасибо.

Ответы

Ответ 1

Вам не нужно иметь отдельный div для аналогичного контента. Приведенный ниже код эквивалентен тому, что вы написали, если контент такой же, как написано в комментарии в вашем коде i.e.//То же содержимое

   <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          //Main content here on left of page
      </div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    //Content on right of page for large and medium devices
</div>
</div>

для вытягивания вправо и вытаскивания влево вы можете достичь этого, добавив классы pull-left и pull-right

     <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">
          //Main content here on left of page
      </div>

   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">
    //Content on right of page for large and medium devices
     </div>
    </div>

если вы хотите, чтобы контент справа не выпал, вам нужно специально указать ему, чтобы он не падал, как этот

  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-left">
        //Main content here on left of page
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right">
        //Content on right of page for large and medium devices
    </div>
</div>

Я не буду советовать вам дублировать ваш контент div, поскольку вы уже знаете, что это не хорошо для вас. SEO и не поддерживает обслуживание (обновляйте все div для каждого изменения вместо одного div).

Ответ 2

Использование скрытых/видимых классов таким образом побеждает цель использования классов начальной загрузки для разрывов медиаразмера. Хотя трудно найти конкретный ответ на потенциальные проблемы SEO, важно помнить, что даже если контент установлен на display: none;, он все еще отображается в исходном коде. Это то, что сканируется и индексируется поисковыми системами. Даже если ваш контент не отображается пользователю, он отображается в поисковой системе, поэтому ваш дублированный контент по-прежнему "виден". Как правило, дублирующее содержимое плохо для SEO, хотя никто не сможет сказать вам ТОЧНО, насколько плох или в какой точной точке дублирующийся контент становится вредным для ваших рядов.

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

<div class="row">
  <div class="col-md-6"><!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Main content here on left of page
  </div>

  <div class="col-md-6"> <!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Content on right of page - THIS WILL GET PUSHED BELOW OTHER CONTENT ON SMALL AND XS SCREENS
  </div>
</div>

Ответ 3

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

объедините классы col для достижения своей цели, не увеличивая ваш контент. так как вы хотите потянуть влево/вправо, вы можете посмотреть на .pull-left.pull-right.

Ответ 4

Google будет использовать контент, отображаемый для рабочего стола для ранжирования. Это означает, что и мобильные рейтинги. Другое содержимое будет проигнорировано. Я не думаю, что Bing выпустил любую соответствующую информацию о том, как они работают.

Нет такой вещи, как дублирование контента. В вашем случае ваш SEO не пострадает вообще. Вам не нужно беспокоиться.

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

Я поддерживаю резюме для мобильного SEO для получения дополнительной информации.

Ответ 5

Используйте сетку для получения желаемых результатов. Не забудьте правильно настроить окно просмотра. Я могу направить вас здесь!