Rich snippets - Music

When you mark up song information in the body of a web page, Google can identify it and, when users search for albums or songs, we may use this information to display links to those songs or samples in your search result snippet. Direct links to songs and videos in search results can help users better identify pages with good, relevant music content.

Google search result snippet for a webpage about band, showing links to specific songs

Marking up code

The following HTML code identifies a music group and lists several of their songs.

<h1>The Parrot Family</h1>
<h2>Songs</h2>
Hello, World!
 Length: 4:05 - 14300 plays
<a href="parrot-family-helloworld-play.html">Play</a>
<a href="parrot-family-helloworld-buy.html">Buy</a>
From album: <a href="parrot-family-yellow-album.html">The Yellow Album</a>

Parrot Power
 Length: 6:33 - 11700 plays
<a href="parrot-family-parrotpower-play.html">Play</a>
<a href="parrot-family-parrotpower-buy.html">Buy</a>
From album: <a href="parrot-family-yellow-album.html">The Yellow Album</a>

Here’s the same content marked up using the microdata format and the MusicRecording schema.org vocabulary:

<div itemscope itemtype="http://schema.org/MusicGroup">
  <h1 itemprop="name">The Parrot Family</h1>
  <h2>Songs</h2>
    <div itemprop="tracks" itemscope itemtype="http://schema.org/MusicRecording">
      <span itemprop="name">Hello, World!</span>
      Length: <meta itemprop="duration" content="PT4M5S" />4:05 -
      14300 plays
      <meta itemprop="interactionCount" content="UserPlays:14300"/>
      <a href="parrot-family-helloworld-play.html" itemprop="audio">Play</a>
      <a href="parrot-family-helloworld-buy.html" itemprop="offers">Buy</a>
      From album: <a href="parrot-family-yellow-album.html" itemprop="inAlbum">The Yellow Album</a>
    </div>   
  <a href="parrot-family-helloworld-link.html" itemprop="url">Link</a>
  <div itemscope itemtype="http://schema.org/MusicRecording">
    <span itemprop="name">Parrot Power</span>
    Length: <meta itemprop="duration" content="PT6M33S" />6:33 -
    11700 plays
    <meta itemprop="interactionCount" content="UserPlays:11700"/>
    <a href="parrot-family-parrotpower-link.html" itemprop="url">Link</a>
    <a href="parrot-family-parrotpower-play.html" itemprop="audio">Play</a>
    <a href="parrot-family-parrotpower-buy.html" itemprop="offers">Buy</a>
    From album: <a href="parrot-family-yellow-album.html"
      itemprop="inAlbum">The Yellow Album</a>
  </div>
</div>

Here’s how this sample works.

  • Each listed song is enclosed in a <div>, like this: <div itemscope itemtype="http://schema.org/MusicRecording">. itemscope indicates that the HTML enclosed in the <div> is an item, and itemtype="http://schema.org/MusicRecording" indicates that the item is a music recording (song).
  • Each <div> describes properties of the music recording, such as its name and duration. To label song properties, each element containing one of these properties (such as <div> or <span>) is assigned an itemprop attribute. For example, <span itemprop="name">Parrot Power</span>.
  • A song's duration property should correspond to its playable duration on the page. For example, if a user can only play a 30 second preview of a song on a page, its duration property should indicate 30 seconds, <meta itemprop="duration" content="PT30S">, rather than the full song's duration.
  • Each song has a "Play" link to the URL where the song can be played. itemprop="audio" indicates that the link is to an audio recording of the song. Similarly, itemprop="offers" indicates that the URL goes to a page where the user can buy the song itself.

Typically, Google won't display content that is not visible to the user. In other words, you generally shouldn't show content to users in one way, and use hidden text to mark up information separately for search engines and web applications. However, in some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be seen by visitors to your page. In this case, you can use the meta tag to display this information, like this:

<meta itemprop="duration" content="PT6M33S" />

This tells the rich snippets parser that it should use the value in the content attribute to find the duration of the song.

For a full list of MusicRecording properties, see the schema.org type hierarchy.

Once you've marked up your site's content, you can test it using the structured data testing tool. Google will discover it the next time we crawl your site (although it may take some time for rich snippets to appear in search results). If rich snippets aren't appearing for your site, see possible reasons why.