Question

以下是我从SEO专家那里学到的一个声明：

在网页的子页面中，可能有多个指向主页的链接。但是第一个到主页的链接应该在标签中包含有用的文字，因为这个链接将是爬虫唯一需要注意的链接。

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

＆＃13;

<div class="topImage">
  <a href="/" title="topImage"><img src="url"></a>
</div>

<div class="imageBelow">
  <a href="/" title="imageBelow">Useful SEO Text</a>
</div>

＆＃13;

...如何在源代码的第一个链接（这是一个图像）上方显示第二个链接（文本），没有影响网页的布局？这可能吗？

Answer 1

我知道你对整个搜索引擎优化的意思。你可以通过一点CSS来实现它

选项1：

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

但在我看来更好的方法是，在div中为<a>标记提供类＆＃39; .topImage＆＃39;背景图片。那么你可以把所有的seo文本放在那里，就像下面的例子一样，并给它一个＆＃39; text-indent＆＃39;具有很高的负值。通过这种方式，抓取工具可以查看文本并将其用于优化，但您的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

你不应该关心那些所谓的专家。任何搜索引擎最终都会关注并索引页面上的每个链接，无论该链接指向外部资源还是示例中的内部资源。除非你主动告诉搜索引擎不要通过例如robots.txt disallow指令来索引某些页面。

这里的关键点不是＆＃34; SEO＆＃34;，而只是正确构建您的网页。也就是说，为您的内容使用正确的HTML标记，并充分利用HTML属性。

考虑到这一点，有一些简单的＆＃34;技巧＆＃34;您可以使用大量增加搜索引擎的意愿，并在您的示例中为链接编制索引。

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

这里没有任何东西可以吸引搜索引擎，而且链接在＆＃34; SEO＆＃34; -context中完全没用。它只是一个带链接的图像。您必须通过<a>代码title属性以及<img>代码title和alt属性为引擎添加一些诱饵。仅在<img> - 链接时这非常重要。

<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标记，如果链接是重要链接，请将其包装到标头标记中，如<h3>，告诉搜索引擎此文本和此链接对您的网页非常重要。

<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中的元素进行单调处理根本没有任何影响。将<section>替换为<div>＆＃39;等等不会影响布局。

如何使元素出现在html之上，而不影响布局

2 个答案: