如何在不影响布局的情况下让元素出现在 html 之上

Question

以下是我从 SEO 专家那里学到的说法：

在一个网页的子页面中，首页可能有多个link。但是主页的第一个 link 应该在标签中包含有用的文本词，因为这个 link 将是爬虫唯一会注意的。

假设以上是正确的，并且具有以下代码：

<div class="topImage">
  <a href="/" title="topImage"><img src="url"></a>
</div>

<div class="imageBelow">
  <a href="/" title="imageBelow">Useful SEO Text</a>
</div>

...源代码中如何让第二个link（文字）出现在第一个link（这是一张图片）的上方，没有影响网页布局？这可能吗？

Answer 1

我知道你对整个 SEO 的意思。你可以按自己的方式做一点 CSS

选项 1：

.imageBelow {
     position:absolute;
     top:0;
     left:0;
     z-index:10;
 }
.topImage {
     z-index:0;
 }

但我认为更好的方法是在 div 中给 <a> 标签加上 class '.topImage' 背景图片。然后你可以像下面的例子一样把所有的 seo 文本放在那里，并给它一个 'text-indent' 一个非常高的负值。以这种方式，爬虫可以看到文本并将其用于优化，但你得到的更少 html 并且没有多个链接

选项 2

<!-- HTML PART //-->
<div class="topImage">
    <a href="/" title="top-image">IMPORTANT SEO TEXT</a>
</div>

/* CSS PART */
.topImage > a {
    background:url(*path to your image*) left top no-repeat;
    width:100px;
    height:100px;
    text-indent:-999em !important;
    display:block;
}

Answer 2

那些所谓的高手，你不用在意。 Any 搜索引擎最终将跟随并索引您页面上的每个 link，无论 link 是否指向外部或者在你的例子中是一个内部资源。除非你主动告诉搜索引擎不要通过例如 robots.txt disallow 指令索引某些页面。

这里的重点不是 "SEO"，而是简单地正确构建您的网页。也就是说，为您的内容使用正确的 HTML 标签，并按原样利用 HTML 属性。

考虑到这一点，您可以使用一些简单的 "tricks" 来大大提高搜索引擎对示例中的 link 进行跟踪和索引的意愿。

<div class="topImage">
  <a href="/" title="topImage"><img src="url"></a>
</div>

这里没有任何东西可以吸引搜索引擎，link 在 "SEO" 上下文中完全没有用。它只是一张带有 link 的图像。您必须通过 <a> 标签 title 属性以及 <img> 标签 title 和 alt 属性给引擎一些诱饵。这在只有 <img>-link 时非常重要。

<section class="topImage">
  <a href="/" title="a description of your page (this link is going to the frontpage, right? Why describe the topImage?">
     <img src="url" title="here more details about your page" alt="even more ..">
  </a>
</section>

使用 <section> 标签代替 <div> 标签，告诉引擎这是您网页的重要部分。在 HTML5 中，<div> 标签应该只用于块样式，而不是将内容分隔成逻辑单元。尽可能使用 title 属性，始终记住巧妙地使用关键字来描述您的页面，包括在标题中！喜欢title="Buy cellphones and smartphones, click here"。每个标题标签中有大约 50 个字符，以改进对站点的整体描述。使用它们！

<div class="imageBelow">
  <a href="/" title="imageBelow">Useful SEO Text</a>
</div>

同样，利用非常重要的 title 标签，如果 link 是一个重要的 link，将其包装到 header 标签中，例如<h3>，告诉搜索引擎此文本和此 link 对您的网页具有重要意义。

<section class="imageBelow" title="sections supports the title attribute">
  <h3 title="header tags also supports the title attribute as well">
    <a href="/" title="50 characters of description">more useful SEO Text</a>
  </h3> 
</section>

以上建议对于搜索引擎如何查看您的网页非常有效。与 CSS 中的元素混在一起根本没有效果。并且用<div>替换<section>等等不影响布局。

如何在不影响布局的情况下让元素出现在 html 之上

How to make element appear on top of html, without affecting layout

html

seo