SEO-friendly duplicated (decorative) text

Question

is there any "SEO-friendly" way to show a page title like below?

It's easy to implement with an HTML code like this:

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

But isn't it bad for SEO, since it looks just like a duplicate content?

A css trick like h2::after { content: "Sample Title" } would work but I call the content dynamically from backend and I don't want to include a style tag inside the body.

Answer 1

After some researches and inspirations I finally found the right solution for my case.

Solution with a custom attribute:

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

...

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

---

Solution with inline css:

<style>
 h2::after { content: var(--title); ... }
</style>

...

<h2 style="--title: The Title">The Title</h2>

As you see it prints the dynamically inserted content without duplicating it or touching the stylesheet.

Just some CSS knowledge and logic.. :)

Answer 2

Ahmet, you should be given a ranking boost by google merely for your due-diligence. But unfortunately they don't give a due-diligence boost.

One copy of text is not going to push you into the situation where google thinks you are keyword stuffing. They understand there are use cases like for example decorative text, where words may repeat.

One such use case is colored text, where multiple font glyph contain the different colors so the text is repeated (overlaying a diffent glyph of the same letters) for each color overlay. In this use case duplication is required.

1> One option is to use an image, which could be an svg giving a lot of decorative options.

2> Another is to use a canvas giving a lot of decorative options.

But these two options may not be as flexible to change content or in responsive layout.

3> use javascript ... not entirely ignored but will not to be confused with keyword stuffing.

If I am to assume you are going to have 8 or so copies of text "span"s to create a 3d effect of coming out of the page. And as you are using class, maybe more than one title using the effect ... Javascript may be the best option.

Note: I'm claiming special use for inline javascript for this case, I know people don't like inline javascript -- in this case it is to allow content to be added to the page.

<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 -->

This could be a function loaded normally into the page and then called from the script used to add the new content for to the page. In this case I don't know if that is an option. If it is ... then it is best that all javascript is in the same location instead of needing to look in different locations. Hence people don't like inline javascript.