How to make GREAT media playlists in WordPress

 

The new Gutenberg editor makes it a little tricky to make audio and video playlists, but I’ll not only show you HOW to do it, I’ll show you how to make them user friendly and boost your SEO to boot!

Transcription

Hey folks, welcome to another HeroPress Tip of the Week. This week, I’m going to show you how to make a high quality html5 user friendly and SEO friendly playlist for both mp3 ease and video. Let’s jump right in. I have a post here called playlist. And it’s empty right now. Now there is not a Gutenberg block for a playlist. And so to make one, you have to use the classic editor block. So let’s pull that up. And then there’s this button right here with the little camera and musical note on it, add media. And on the left, we can create a gallery, an audio playlist or a video playlist.

We’re going to start with audio. Now I’ve already uploaded four mp3s. And if you haven’t yet watched the video on ID3 tags, you may want to check that out first, because these are the same videos. These are the same audio files that are used. And some of these have ID3 tags and some do not. So I’m going to click each of them and you see the each get a checkmark. Over on the right. Depending on which one is highlighted, you can update the metadata. Now a ditches has the most information. There’s a title, artist album description, and there’s the URL and reach us has a little bit Caroline’s has the least and Aurooba’s has the least also. So I’m going to click create new playlist right here. And on this page, we can update these captions, we can choose to show a tracklist choose to show an artist’s name and tracklist and choose to show images. And we’re going to go through all those options. So you get to see what each one looks like. So when we leave them all checked, you’ll note that the ones that had ID3 tags have have names there. And the others are just basically the roots of the file names.

So I insert audio playlist. And there we are. So Aurooba is first than Caroline, and then Aditya, and Alice. And you’ll note that these have Hallway Chats after them. And then up above, there’s the file name and a little icon. Now if we click it, you’ll see there’s a pencil here, we can click to adjust that. I want to point out you can reverse order. And you can also drag and drop these to order them however you want. So I’m just going to update it with the reverse order. And you’ll see that Aditya’s with the extended ID3 tags shows the caption here; well, the name, it shows the album and think and then podcast. Don’t remember which order that is. But if I uncheck show images, you’ll see that nothing changes. Because we don’t have any images. We can uncheck artists name in tracklist. And you’ll see that down here it does not say hallway chats anymore. And then if we uncheck show tracklist it only shows the one. It doesn’t show tracklist. But it will skip ahead to the next one as you go. I don’t recommend that it’s really confusing. I mean, I would expect there to only be the one if I was looking at this.

So I’m going to turn all that back on, update the audio playlist. And we’re going to update this. And I want to show you that it basically looks identical here in Gutenberg that it does on the page. But there’s some more stuff that I want to show you related to this audio podcast, we’re going to go edit Aditya’s image. Let’s go to the dashboard. We’ll go to Media Library. And we’re going to go to here’s Aditya’s mp3. Something unique about audio and video in the media library is that they can have featured images. And normally you think of the content of the Media Library as being images and a featured image for an image would be ridiculous. But this is not an image so we can include a featured image and so I’m going to upload that Grab this one. And set featured image. So I’m going to update that image, or that mp3 file.

And now when I reload my mp3 playlist, you can see there is an image. Now interestingly, one of our options when editing this is to show images. But it still shows, I need to say that still shows an image. And I don’t know why it could be about, maybe we should list it. But I’m going to leave it on. Update there, reload here. And then if I click on Alice’s, I just get this. Caroline’s again, and Aurooba’s. But there’s a cool icon there. So this is an html5 player, which means the HTML that renders it is just plain HTML. And you can use CSS to make this look any way you want. This doesn’t have to be all caps. It doesn’t have to be short. This doesn’t have to be bold, you can do anything you want. You can change all this looks all the plugins on wordpress.org that give you a fancier mp3 player, or just using CSS to edit this one.

One more thing I want to show you, you can do here, we’re going to edit Aditya again. And we’re going to put in a caption. And we’re going to say, “a conversation with Aditya Kane”. And we’ll update that and reload the playlist. So now, up on the top of the player, we still have the title Aditya Kane. But the caption in WordPress goes here. Now this is different from an ID3 tag. We didn’t edit that mp3. This is just WordPress. But Google is going to read this and be able to understand it very nicely. So in fact, let’s go to inspect here. And you can see how well this is marked up. This is a list of playlists, tracks, and playlists playing shows which one is playing. And here’s a caption, Google reads these classes and eats it up. So they know what’s going on. So it can be worth it. To put in a good caption here, you’ll note that we have the which one is that that is the artist’s name. We have artists name turned on. But it’s not showing in the caption right next to the caption if there is a caption.

So that’s a toss up, we could write it in my hand “- Hallway Chats” or something. But that’s up to you. So that’s kind of it out of the box for WordPress for an mp3 playlist. I never used to mess with this stuff. I just threw an mp3 in there because you if you can hear it, you can hear it. But doing the research for this video, I realized how much nicer it is to be able to see this extra information and a little icon and things like that. And it just makes for a much nicer experience. Compared to these two at the bottom Carolina and Aurooba. There’s no information there. I don’t know what this is about. I mean, maybe someone named Caroline. But it’s it’s not very useful.

So now let’s look at a video playlist. We’ll put it right below this one there we go. So same one, we go to create video playlist and I’ve already uploaded three videos. And I’m just going to go create new video playlist. And we will insert. Alright, so we have a big black box. And we have essentially have file name prefixes. Let’s just go take a look at what it looks like here. Just like that, if I click play, it starts up a video. So what can we do with this? Well, this is number 41 alt tags. So let’s go back to our library and under here is the number 41 video. And we can put in a caption and a description.

Now this is displayed on Attachment pages, which means it is not displayed anywhere in the media player. So we’re not going to even put in a description. But I’m going to put in a caption, what is an alt tag and why do you care and then over on the right we can set a featured image just like an mp3 and oh look I’ve already uploaded an image. Imagine that. So let’s update and we will reload this and there we go. We have a default image so there’s no more big black box and in the playlist, we have the actual title of the item. Now we can put more in here if we wanted we can put in a date it was published, we can put in any number of things you can write as long as you want in here let’s go back and oh, that’s not what I want. Let’s go to library let’s look at video only. There we go.

We will edit Kadence Library a look at the KadenceWP Design Library and we will set the featured image and we will update this one then we will back to video again. And you can see they put the images here which is nice as well what are a three tags? And why do you care. set the featured image this is last week’s video by the way, and you should probably check it out. Update announced go back and look at our media player. And this looks much more user friendly. You can easily tell what video is going to be there. You can see how long we are. Click here. Click here. The this media player can go fullscreen and since these are HD then they look great even in large size. The player shows how much has played compared to how long it is. So how you can tell if art is there’s a nice little wind player there. So that’s it. That’s how to make a great mp3 playlist and a great video playlist. And the two important things one that it’d be user friendly and the other be SEO friendly. Because Google likes multimedia and having a high quality SEO multimedia is going to really help you. So I hope you find this useful.