弹性框导航栏、容器和语义



这是我关于stackoverflow的第一个问题。如果我没有相应地格式化或询问,请提前原谅我。

所以,我见过人们以多种方式构建导航栏,特别是使用 flexbox,因此,我知道这个话题之前被多次提到过,但是,如果有人可以澄清我:

  1. 出于 SEO 目的,我网站上的品牌/徽标是否必须位于任何其他标题标签的<h1>标签内?

  2. 将品牌/徽标留在<nav>标签之外是否正确?

  3. 例如(下面的代码(,我会将带有class= container<div>设置为flex容器,但是站点其余部分中具有相同类的所有内容也将获得display: flex;。您是否建议创建一个单独的容器类来包含仅导航栏?我也在容器和<ul>上应用display: flex;,所以一切都在同一条线上。

非常感谢您抽出宝贵时间阅读本文,如果这是一个旧话题,我再次表示歉意。我正在尝试更好地组织我的代码并了解最佳实践。

<body>
<header>
<div class="container">
<a href="" class="brand">
Brand
</a>
<nav>
<ul>
<li><a href="#" class="nav-link">services</a></li>
<li><a href="#" class="nav-link">about</a></li>
<li><a href="#" class="nav-link">location</a></li>
</ul>
</nav>
</div>
</header>
</body>

就SEO而言,有多种方法可以获得更好的评级。H1 可能是最好的,但您可以使用任何标题标签,并强调粗体、斜体等内容。 该区域中还有元标记,例如

<meta name="keywords" content="your keywords here">

在整个页面中使用关键字也是一个很大的帮助。人们在他们的页面上获得大量点击的方法之一是将名称添加到链接中。就像你在网上看到的文章一样,它们将是/name_of_the_article.html这对搜索引擎有很大帮助。

对于品牌/徽标,最好将其保留在导航标签之外。您可能希望将其放在自己的div 中,或者将它们都包裹在div 树中,以便您可以更轻松地定位它。但是,如果您希望品牌/徽标与导航栏一起使用,那么您也可以将其放在那里。

对于容器部分,在没有看到 css 的情况下,我会说如果它们要具有相同的样式,那么一定要将它们放在一起。但是,除非都是非常简单的东西,否则最好给他们自己的类,因为一件事的样式可能不适合另一件事。

如果你能做一个jsfiddle或codepen,那么获得你想要的关于类css的图片会容易得多。

相关内容

  • 没有找到相关文章

最新更新