SEO友好复制(装饰)文本

Question

是否有任何“SEO友好”的方式来显示一个页面标题如下？

这样的HTML代码很容易实现：

<h2>Sample Title</h2>
<span class="shadow">Sample Title</span>

但这对搜索引擎优化不好吗，因为它看起来就像一个重复的内容？

像h2::after { content: "Sample Title" }这样的css技巧可以工作，但是我从后端动态调用内容，我不想在正文中包含样式标记。

Answer 1

经过一些研究和启示，我终于找到了正确的解决方案。

具有自定义属性的

解决方案：

<style>   
 h2::after { content: attr(data-content); ... }
</style>

...

<h2 data-content="The Title">The Title</h2>

带有内联css:的

解决方案<style> h2::after { content: var(--title); ... } </style> ... <h2 style="--title: The Title">The Title</h2> 正如您所看到的，它打印动态插入的内容，而不复制它或触摸样式表。 只是一些CSS知识和逻辑。:)

Answer 2

Ahmet，谷歌应该仅仅因为你的尽职调查而提升你的排名。但不幸的是，它们并没有提振尽职调查。

一份文本不会让你陷入谷歌认为你是关键词填充的情况。他们知道有一些用例，例如装饰性文本，文字可能会重复。

一个这样的用例是彩色文本，其中多个字体字形包含不同的颜色，因此文本被重复(覆盖相同字母的不同字形)。在这个用例中，需要重复。

1>一种选择是使用图像，这可能是一个svg，提供了许多装饰选项。

2>另一种方法是使用画布，提供许多装饰选项。

但是，这两个选项在更改内容或响应性布局方面可能不那么灵活。

3>使用javascript。不完全被忽略，但不会与关键字填充混淆。

如果我假设你将有8份左右的文本“跨度”S，以创造一个3d效果出来的网页。当你使用类的时候，也许不止一个标题使用效果.Javascript可能是最好的选择。

注意:我声称在这种情况下专门使用内联javascript，我知道人们不喜欢内联javascript --在这种情况下，就是允许将内容添加到页面中。

<style>
.shadow {
   color:red; // example style not 3d
}
</style>

<div class="addeffect">
<h2 >Sample Title</h2>
</div>

<script>
elements = document.getElementsByClassName("addeffect")
text = elements[0].innerText; // special use case -- see note below.


var span = document.createElement("SPAN");
span.classList.add('shadow');
span.innerText = text;
elements[0].append(span);

// note this is special use inline on each heading so removing the class will advance to next element.
// instead could be coded once on page instead but as a new class is dynamically added ...
// So usage could change to once per page. Hence getElementById not used intentionally.

elements[0].classList.remove("addeffect")

</script>


<div class="addeffect">
<h2 >New Title Just added</h2>
</div>

<!-- run same script here for new title and it will not effect prior title -->

这可能是一个函数，通常加载到页面中，然后从用于向页面添加新内容的脚本调用。在这种情况下，我不知道这是否是一个选择。如果是..。那么，最好是所有的javascript都位于同一个位置，而不是需要查看不同的位置。因此，人们不喜欢内联javascript。