Skip to main content
added 1248 characters in body
Source Link
Simon Hayter
  • 33.1k
  • 7
  • 60
  • 119
<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1 itemprop="name">Album Name</h1>
    <meta content="album-cover.jpg" itemprop="url" />
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <h2 itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
        <span itemprop="name">Artist/Band</span>
    </h2>
    <h3>List of Tracks</h3>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>

If you wanted a singular title then you can use span tags to your benefit, I can crunch the above code into something like this:

<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1>
        <span itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
            <span itemprop="name">Artist</span>
        </span>
        <span itemprop="name">Album Name</span>
    </h1>
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="album-cover.jpg" itemprop="url" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>
</main>

Meta content explained

Using meta content you can inform search engines about your content without visibly displaying it to your visitors. For example: <meta content="8" itemprop="numTracks" /> Uses itemprop="numTracks" which means this is the number of tracks, and the content is 8 therefore the album has 8 tracks... This should be self explanatory across all metas.

<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1 itemprop="name">Album Name</h1>
    <meta content="album-cover.jpg" itemprop="url" />
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <h2 itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
        <span itemprop="name">Artist/Band</span>
    </h2>
    <h3>List of Tracks</h3>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>
</main>
<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1 itemprop="name">Album Name</h1>
    <meta content="album-cover.jpg" itemprop="url" />
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <h2 itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
        <span itemprop="name">Artist/Band</span>
    </h2>
    <h3>List of Tracks</h3>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>

If you wanted a singular title then you can use span tags to your benefit, I can crunch the above code into something like this:

<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1>
        <span itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
            <span itemprop="name">Artist</span>
        </span>
        <span itemprop="name">Album Name</span>
    </h1>
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="album-cover.jpg" itemprop="url" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>
</main>

Meta content explained

Using meta content you can inform search engines about your content without visibly displaying it to your visitors. For example: <meta content="8" itemprop="numTracks" /> Uses itemprop="numTracks" which means this is the number of tracks, and the content is 8 therefore the album has 8 tracks... This should be self explanatory across all metas.

added 1248 characters in body
Source Link
Simon Hayter
  • 33.1k
  • 7
  • 60
  • 119

If you want marking up of author/creator etcmusic then its best to use microdata such as SCHEMASCHEMA MusicAlbum. Also, not sure what guides your following but hgroup was deprecated eons ago!

A typical good example would look something like this:

<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1 itemprop="name">Album Name</h1>
    <meta content="album-cover.jpg" itemprop="url" />
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <h2 itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
        <span itemprop="name">Artist/Band</span>
    </h2>
    <h3>List of Tracks</h3>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>
</main>

If you want marking up of author/creator etc then use SCHEMA. Also hgroup was deprecated eons ago!

If you want marking up of music then its best to use microdata such as SCHEMA MusicAlbum. Also, not sure what guides your following but hgroup was deprecated eons ago!

A typical good example would look something like this:

<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1 itemprop="name">Album Name</h1>
    <meta content="album-cover.jpg" itemprop="url" />
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <h2 itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
        <span itemprop="name">Artist/Band</span>
    </h2>
    <h3>List of Tracks</h3>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>
</main>
Source Link
Simon Hayter
  • 33.1k
  • 7
  • 60
  • 119

If you want marking up of author/creator etc then use SCHEMA. Also hgroup was deprecated eons ago!