草庐IT

twitter-bootstrap - 我会因为在 Bootstrap 3 布局中使用两个 H1 标签而受到处罚吗？

coder 2024-02-28 原文

我最近不得不构建一个响应式网站，其中的产品页面具有以下行为:

超小型设备

H1 ​​占据自己的行，其下方是产品图片(3 列)，然后是右侧的产品价格和其他信息(9 列)

中型及以上设备

H1 ​​也位于产品图片的右侧(因此位于上述 9 列 div 的顶部)。

我设法让它在我需要它的设备上正确运行的唯一方法如下:

<h1 class="visible-xs">Product Name</h1><div class="row"><div class="col-xs-3"><img /></div><div class="col-xs-9"><h1 class="hidden-xs">Product Name</h1>£11.99 and other product info</div></div>

这意味着我有 2 个 H1 标签 - 这是 SEO 的问题还是现代搜索引擎足够智能以理解这一点？

我尝试在 h1 和图像容器上使用 col-[size]-push-* 和 col-[size]-pull-* 类，但这导致产品信息容器被视为一个全新的行并被归入图像容器 & H1。

抱歉 - 希望解释清楚!如果有人知道一种更好的方法来执行上述操作并仅使用一个最受欢迎的 H1 标签即可获得相同的结果 - 列排序的 Bootstrap 示例都在同一行中，所以在这种情况下真的没有帮助。

最佳答案

基于一些 quick research , 似乎多个 h1 标签会导致惩罚，至少对于 Google 是这样。

一个可能的解决方案是创建一个 .h1 类来匹配 h1 的样式。然后，使用您包含的代码，您可以这样做:

<h1 class="visible-xs">Product Name</h1>
<div class="row">
    <div class="col-xs-3"><img /></div>
    <div class="col-xs-9">
        <p class="h1 hidden-xs">Product Name</p>
        £11.99 and other product info
    </div>
</div>

请注意，我用 p 标记替换了第二个 h1 标记，并将 .h1 类应用于它。这应该会为您提供所需的外观，同时消除重复的 header 。

关于twitter-bootstrap - 我会因为在 Bootstrap 3 布局中使用两个 H1 标签而受到处罚吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20126290/

twitter-bootstrap处罚codeclasssectionseotwitter-bootstrap-3

有关twitter-bootstrap - 我会因为在 Bootstrap 3 布局中使用两个 H1 标签而受到处罚吗？的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. ruby-on-rails - 我更新了 ruby​​ gems，现在到处都收到解析树错误和弃用警告! - 2

    简而言之错误:NOTE:Gem::SourceIndex#add_specisdeprecated,useSpecification.add_spec.Itwillberemovedonorafter2011-11-01.Gem::SourceIndex#add_speccalledfrom/opt/local/lib/ruby/site_ruby/1.8/rubygems/source_index.rb:91./opt/local/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/rails/gem_dependency.rb:275:in`==':und

  3. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

  4. ruby-on-rails - 为什么用户必须输入 7 位数的 Twitter PIN 才能授予我的应用程序访问权限？ - 2

    我正在为我的用户实现一些ruby​​onrails代码推特内容。我正在创建正确的oauth链接...类似http://twitter.com/oauth/authorize?oauth_token=y2RkuftYAEkbEuIF7zKMuzWN30O2XxM8U9j0egtzKv但在我的测试帐户授予对twitter的访问权限后，它会弹出一个页面，上面写着“您已成功授予对.我不知道用户应该在哪里输入此PIN以及他们为什么必须这样做。我认为这不是必要的步骤。Twitter应该将用户重定向到我在应用程序设置中提供的回调URL。有谁知道为什么会这样？更新我找到了thisarticle声明我需

  5. ruby-on-rails - 使用 rspec 测试自定义验证器。为什么我会得到 Proc？ - 2

    如标题所示，我正在尝试使用Rspec测试自定义验证器。我得到一个错误，我不明白为什么......如果你能阐明一些问题，我将非常感激。我们开始吧:验证者规范require'spec_helper'describeGraphDateValidatordoit"shouldnotvalidateactivitywithemptystarttime"doexpect{Graph.new({start_time:''}).valid?}.toeq(false)endend如果我打印Graph.new({start_time:''}).valid?它会打印false然而，当它通过规范时，它返回一个

  6. ruby - Sinatra 不以 twitter gem 开头 - 2

    当我尝试启动sinatra时，出现以下错误/var/lib/gems/1.9.1/gems/sinatra-1.4.4/lib/sinatra/base.rb:1488:instart_server':undefinedmethodrun'forHTTP:模块(NoMethodError)require'sinatra/base'require_relative"twt.rb"classSinatraApp在“twt.rb”中我需要Twitter(5.7.1)require'twitter'classTwitattr_accessor:clientdefinitialize(consu

  7. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  8. ruby-on-rails - rails 中的 Omniauth-twitter:OAuth::Unauthorized 401 - 2

    我在使用Twitter进行基本的omniauth身份验证时被封锁了2天。我在简单的omniauth上跟随RyanBates的railscast，但无法通过OAuth::Unauthorized401异常，当我尝试登录时引发。请帮忙!我的代码粘贴在下面:twitterinfo:website:[http://127.0.0.1:3000]callbarckurl:[http://127.0.0.1:3000/auth/twitter/callback]//路线.rbSentimentalist::Application.routes.drawdoresources:dashboard,o

  9. python - 开源 Twitter 克隆(在 Ruby/Python 中) - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭6年前。Improvethisquestion是否有任何用Ruby或Python编写的生产就绪的开源Twitter克隆？我对功能丰富的实现更感兴趣，而不仅仅是简单的Twitter消息(例如:API、FBconnect、通知等)谢谢!

  10. ruby - 为什么我会看到这两个几乎相同的 Ruby 正则表达式模式的不同结果，为什么一个匹配我认为不应该匹配的内容？ - 2

    使用Ruby1.9.2，我在IRB中有以下Ruby代码:>r1=/^(?=.*[\d])(?=.*[\W]).{8,20}$/i>r2=/^(?=.*\d)(?=.*\W).{8,20}$/i>a=["password","1password","password1","pass1word","password1"]>a.each{|p|puts"r1:#{r1.match(p)?"+":"-"}\"#{p}\"".ljust(25)+"r2:#{r2.match(p)?"+":"-"}\"#{p}\""}这会产生以下输出:r1:-"password"r2:-"password"r1:

随机推荐