Display SEO-friendly musical chords above text in HTML

Question

I'm currently rendering guitar chords above lyrics on my website like this:

span.chunk {
    position:relative;
    top: 15px;
    display: inline-flex;
    flex-direction: column;
    vertical-align: bottom;
}
span.chunk:before {
    content:attr(data-chord);
    position:relative;
    top:-6px;
    color: #7D7D7D;
    font-weight: bold;
    margin-bottom: -0.4em;
    font-size: 0.75em;
    padding-right: 0.3em;
}

.linediv {
    position:relative;
    top: 15px;
    margin-bottom: 4px;
}

.chordtext {
    padding-bottom: 0.5em;
    margin-top: 5px;
    width: 100%
}

<div class="spiv">
    <div class="chordtext ">
        <span class="chunk" data-chord="Am">Ми&nbsp;тут&nbsp;прийшли</span>
    </div>
    <div class="chordtext ">
        <span class="chunk" data-chord="F">Вам&nbsp;заспівати</span>
    </div>
    <div class="chordtext ">
        <span class="chunk" data-chord="">П</span>
        <span class="chunk" data-chord="C">ро&nbsp;нашу&nbsp;дорогу&nbsp;</span>
        <span class="chunk" data-chord="Em">до&nbsp;мети</span>
    </div>
    <div class="chordtext ">
        <span class="chunk" data-chord="Am">Ми&nbsp;приїхали&nbsp;на&nbsp;Ю-two</span>
    </div>
    <div class="chordtext ">
        <span class="chunk" data-chord="F">Щоб&nbsp;запалити&nbsp;цей&nbsp;юнацький&nbsp;дух</span>
    </div>
    <div class="chordtext ">
        <span class="chunk" data-chord="C">Там&nbsp;де&nbsp;дико&nbsp;добре&nbsp;нам&nbsp;</span>
        <span class="chunk" data-chord="Em">буде</span>
    </div>
</div>

This is working fine for display purposes, but is making SEO substantially worse because words which are split by the span tags are being interpreted as separate tokens for searching. As an example of this, searching for the complete phrase "Про нашу дорогу до мети" is giving no results:

It's giving no results because "Про" is being interpreted as two tokens - "П" and "ро" - because they are within different spans.

If I only search for the part of the phrase which is within a single span, my site shows up fine in the search results:

Not being able to have my website show up when searching for lyrics from within songs is almost certainly harming the findability of my site, and I'd like to figure out an alternative method of displaying chords inline above lyrics while still being understandable to Google.

The only ideas I've come up with are:

Have an invisible div which contains the full text without any chords
Use Javascript to replace a version of the page with no chords with a version of the page with chords as it loads

Both of these options seem less-than-ideal and I was hoping there might be a better option available. All of the answers to similar questions I've seen on StackOverflow seem like they'd all have the same issues as I'm currently seeing.

How about providing different lyrics in metatags
– bogdanoff
Oct 6, 2021 at 7:18 — bogdanoff, Oct 6, 2021 at 7:18

A HaworthA Haworth · Accepted Answer · 2021-10-06 08:11:57Z

google and co are getting more sophisticated all the time so I'm not sure I would rely on a hidden 'virgin' copy of the text being picked up.

If possible it would seem safer to have google and the user see the same things all the time.

One idea would be to have the text plus spans covered with the full unadulterated text, the color in the underneath spiv being set to transparent (other than on the pseudo elements of course which remain colored as they are).

This doesn't meet your requirement not to have a second copy of the text, but to be absolutely sure that the search engine sees the same as the user I think it's inevitable that you need it. And it will be this text that the user (and google) see.

span.chunk {
  position: relative;
}

span.chunk:before {
  content: attr(data-chord);
  position: absolute;
  top: -1em;
  color: #7D7D7D;
  font-weight: bold;
  font-size: 0.75em;
  padding-right: 0.3em;
}

.chordtext {
  margin: 0.75em 0;
  padding-bottom: 0.25em;
  width: 100%
}

.chordcontainer {
  position: relative;
  padding-top: 0.75em;
}

.spiv:nth-child(1) {
  position: absolute;
  color: transparent;
}

<body>
  <div class="chordcontainer">
    <div class="spiv">
      <div class="chordtext ">
        <span class="chunk" data-chord="Am">Ми&nbsp;тут&nbsp;прийшли</span>
      </div>
      <div class="chordtext ">
        <span class="chunk" data-chord="F">Вам&nbsp;заспівати</span>
      </div>
      <div class="chordtext ">
        <span class="chunk" data-chord="">П</span>
        <span class="chunk" data-chord="C">ро&nbsp;нашу&nbsp;дорогу&nbsp;</span>
        <span class="chunk" data-chord="Em">до&nbsp;мети</span>
      </div>
      <div class="chordtext ">
        <span class="chunk" data-chord="Am">Ми&nbsp;приїхали&nbsp;на&nbsp;Ю-two</span>
      </div>
      <div class="chordtext ">
        <span class="chunk" data-chord="F">Щоб&nbsp;запалити&nbsp;цей&nbsp;юнацький&nbsp;дух</span>
      </div>
      <div class="chordtext ">
        <span class="chunk" data-chord="C">Там&nbsp;де&nbsp;дико&nbsp;добре&nbsp;нам&nbsp;</span>
        <span class="chunk" data-chord="Em">буде</span>
      </div>
    </div>
    <div class="spiv">
      <div class="chordtext ">
        Ми&nbsp;тут&nbsp;прийшли
      </div>
      <div class="chordtext ">
        Вам&nbsp;заспівати
      </div>
      <div class="chordtext ">
        П ро&nbsp;нашу&nbsp;дорогу&nbsp; до&nbsp;мети
        </span>
      </div>
      <div class="chordtext ">
        Ми&nbsp;приїхали&nbsp;на&nbsp;Ю-two
      </div>
      <div class="chordtext ">
        Щоб&nbsp;запалити&nbsp;цей&nbsp;юнацький&nbsp;дух
      </div>
      <div class="chordtext ">
        Там&nbsp;де&nbsp;дико&nbsp;добре&nbsp;нам&nbsp; буде
      </div>
    </div>
  </div>
</body>

Note: this snippet has changed all spacing to be relative to em size - in case the user has altered the basic size in their browser. Obviously you can add a little to some of the sizing (using e.g. CSS calc) to get more spacing if required.

This got me on the right track, thank you!!! I did modify it to use visibility: hidden; instead of color: transparent; (and then the :before needs a visibility: visible;). I did this because highlighting and copying text was resulting in 2 copies with the transparent version. jsfiddle.net/danielcentore/sokz84c5/4 — Daniel Centore, Oct 12, 2021 at 22:05

Mike Ciffone · Accepted Answer · 2021-10-11 22:18:14Z

Google is concerned with showing the result that matches the query of the user. I think that it's going to be rare that someone searches for a specific line of the lyrics to a song and expects to find the lyrics with chords.

I don't fully know what your site is about, but music, lyrics, and chords gives me enough to say that the following are likely going to be searches for which your pages are relevant. I'm using the song "A Day in the Life" as an example.

User looking for lyrics to a song searches for "a day in the life lyrics"
User looking for the lyrics with chords searches for "a day in the life with chords".

The SERP for "a day in the life with lyrics"

This is likely going to be a "zero click search". The user is either reading the lyrics while listening to the song or copy and pasting them. If it's not a zero click search, well...it's a very competitive SERP.

The SERP for "a day in the life with chords"

Here we go. This is more likely the search that you want to rank for, or what Google is going to be comparing your page to.

The top ranking result (after the video) is from Ultimateguitar.com. Let's see how they do it.

How is google understanding it then?

At the most fundamental level, Google looks to a page's <title> tag and a single <h1> to understand what a page is about. Then they'll extract phrases and important info from the body content to learn more.

So in our example:

The page's <title> tag is "A DAY IN THE LIFE CHORDS (ver 3) by The Beatles @ Ultimate-Guitar.Com" - includes the user's search term almost exactly.

<meta property="og:type" content="music.song">
<meta property="og:title" content="The Beatles - A Day In The Life (Chords)">
<meta property="og:description" content="CHORDS (ver 3) by The Beatles">
<meta property="og:image" content="https://tabs.ultimate-guitar.com/static/_img/ug-logo-fb.png">
<title>A DAY IN THE LIFE CHORDS (ver 3) by The Beatles @ Ultimate-Guitar.Com</title>
<meta name="description" content="A Day In The Life Artists: The Beatles Tabbed by: Paul Brannigan Tuning: Standard Special voicings E-A-D-G-B-e Bm 2-2-4-4-3-2 (actually Bm/F#) Em7 0-2-0-0-0-0 C/B x-2-x-0-1-0 Asus2 x-0-2-2-0">
<meta name="keywords" content="The Beatles - A Day In The Life (Chords), Chords, The Beatles, Ultimate-Guitar.Com, ug">

The page's h1 tag is "A Day In The Life chords" - again, closely matching the user's search query.

Focus on the content

I think you're wasting your time worrying about this. Instead optimize your on-page factors for the keywords you want this page to rank for, and put all of your efforts into making the rest of the content on the page great.

If you really are concerned with it I would simply provide the user with both the "raw lyrics" and the "lyrics with chords". You could hide the raw lyrics, but I really don't see the point. You don't need the raw lyrics to rank the page.

This is a really excellent answer. Sometimes the solution to good SEO is to put your own page in context of how your competitors are ranking for things. When doing technical SEO like this, it's easy to lose the forest for the trees. — Maximillian Laumeister, Oct 7, 2021 at 20:14
This isn't quite as applicable for my case because for folk songs there isn't always a well-known canonical title for the song and people often search by a random memorable line instead. Competing sites mostly use fixed-width fonts for chord alignment (which I think looks terrible) but this does have better search performance than what I was doing. Others have tabs for sections with and without chords but I was hoping to avoid that if possible. — Daniel Centore, Oct 12, 2021 at 22:14
@MaximillianLaumeister Of all the answers I've written, this is still one of my favorites! — Mike Ciffone, Jan 6 at 0:32

Stack Exchange Network

current community

your communities

more stack exchange communities

Display SEO-friendly musical chords above text in HTML

2 Answers 2

The SERP for "a day in the life with lyrics"

The SERP for "a day in the life with chords"

How is google understanding it then?

Focus on the content

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript html css seo or ask your own question.

Hot Network Questions

Display SEO-friendly musical chords above text in HTML

2 Answers 2

The SERP for "a day in the life with lyrics"

The SERP for "a day in the life with chords"

How is google understanding it then?

Focus on the content

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript html css seo or ask your own question.

Related

Hot Network Questions