Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Grab iTunes image artwork from the DOM using the Open Graph meta tags

iTunes Artist Photos

The iTunes API doesn't provide a way to grab artist images, but the iTunes website uses Open Graph meta tags, which embeds a meta tag with a property attribute value set to og:image. As it turns out, this seems to be the same image used in the iTunes artwork.

The URL structure is similar to the artworkUrl values returned by the API, but what concerns us here is the part I've indicated at the end of the URL.

http://is3.mzstatic.com/image/thumb/Music7/v4/68/68/41/68684190-833b-bfb4-5018-e5a2e6f69eb0/source/1200x630bf.jpg
                                                                                                   └─ widthxheight

The maximum image dimensions seems to be 10,000px by 10,000px. We can simply replace 1200x630bf.jpg with the dimensions we want.

var x = document.querySelector('meta[property="og:image"]').getAttribute("content");
var image = x.substring(0, x.lastIndexOf("/") + 1) + "10000x10000-999.jpg";
window.location = image;

Note the -999 at the end, which denotes that we want the highest quality image.

For example, consider Taylor Swift

Running the above gives the following page:

http://is3.mzstatic.com/image/thumb/Music7/v4/68/68/41/68684190-833b-bfb4-5018-e5a2e6f69eb0/source/10000x10000-999.jpg

tayisbae

What's nice about this is that this method can be used to grab any images (including album art, TV show pictures, movie pictures, iBook covers, etc), since they all use the og:image Open Graph meta value. I don't use iTunes as my daily media player, but this should be the same as the iTunes artwork for all the media types.

You can even cobble together a bash script to download the image files you need (it might be easier to run a headless browser, like a CapserJS module, or at least something that can parse DOM).

url=https://itunes.apple.com/ca/artist/taylor-swift/id159260351
img=$(curl $url | grep -Eo "<meta content=\"[a-zA-Z0-9 :\/\.\-]+.jpg\" property=\"og:image\" \/>" | grep -Eo "http(s)?://[a-zA-Z0-9:\/\.\-]+.jpg")
wget $img

You can combine this with the API and search for an artist, grab their artistId, navigate to their artist page (which is just your country's base iTunes url with /artist/id and then the artistId). From here, you can then grab their artist and album art photos.

For most operations (other than getting the Artist Photo), you can just use Ben Dodson's iTunes Artwork Finder, which works by leveraging the iTunes Search API.

@thefinnomenon

This comment has been minimized.

Copy link

@thefinnomenon thefinnomenon commented Mar 21, 2020

Just wanted to leave a note for anyone else who ends up here. This solution is great but the format of the meta tag changed a bit since this was written up. The fork of this gist has the updated code but here is what I ended up using on my Node server,

// Input: artistUrl = "https://music.apple.com/us/artist/jon-bellion/659289673"
// Output: "https://is2-ssl.mzstatic.com/image/thumb/Features128/v4/16/77/49/16774954-6eec-d5d4-99e4-c412fe8d6e0f/mzl.rdvmhiih.jpg/{w}x{h}cw.png"
axios
  .get(artistUrl)
  .then(response => {
    const html = response.data;
    const ogImage = html.match(/<meta property=\"og:image\" content=\"(.*png)\"/)[1];
    return ogImage.replace(/[\d]+x[\d]+/, '{w}x{h}');
  })
  .catch(error => {
    console.log(error);
  });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment