I’m sharing this story because sometimes a web page is all you need, and even a personal web-weaving enthusiast can forget that. A custom, handmade web page can be a powerful way to share something.
A couple weeks ago, my choir performed a six-movement cantata with a chamber orchestra. I wanted to share the recording of this beautiful music with some family and friends. The 40 minute mp3 file was too large to just drag into Messages like I usually do to share a song recording. I also wanted to share the text along with the music, because the cantata is titled These Ancient Words.
I pondered complex self-hosting solutions. I considered installing FunkWhale.
Suddenly, I realized I was being silly and I could simply make a static web page, customized to my purpose.
This was, as I said, simple. I threw together a new html document, added the audio file embedded with an audio player, made a “download” link, and pasted in the text. It looked pretty good, and everything I needed was on the page.
After sending the link to the first of my cousins, though, I realized that the link preview in Messages wasn’t very good. It was just the title of the page with the url and my favicon. I decided that I should add some meta tags, so I went in search of which meta tags to use for a better preview in Messages.
An Apple help page led me to The Open Graph Protocal. There were so many tags to choose from!
I was able to add a custom image and a direct link to the mp3 file which resulted in a play button when I shared the link in messages.
Here are the meta tags I used. For completeness, I included the regular description meta tag as well.
<meta name="description" content="These Ancient Words - A choral cantata by Heather Sorenson in six movements, performed by YLPC Chancel Choir with a chamber orchestra. This recording also includes prelude, offertory, and postlude.">
<meta property="og:title" content="These Ancient Words" />
<meta property="og:type" content="music.song" />
<meta property="og:image" content="https://shannonkay.com/choir/theseancientwords/theseancientwords.png" alt="These Ancient Words Choral Cantata"/>
<meta property="og:url" content="https://shannonkay.com/choir/theseancientwords/" />
<meta property="og:audio" content="https://shannonkay.com/choir/theseancientwords/YLPC-260614-TheseAncientWords-ServiceMusic.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />
<meta property="og:description" content="A choral cantata by Heather Sorenson in six movements, performed by YLPC Chancel Choir with a chamber orchestra. This recording also includes prelude, offertory, and postlude." />
Here’s the link, how does the preview show up on the forum? (Edit: I realized that the image wasn’t showing up on the forum’s link preview because I hadn’t used full URLS. I’ve updated it to include them.)
I made this page mainly to share the music recording with friends and family, but you’re welcome to listen too if you like choral music with orchestra and a little organ. I sing Soprano.
CW, it is church music, but the text is on the page, so you can see what the lyrics will contain. (If it helps, I want to let you know that we are an LGBTQ+ affirming denomination, with a woman minister.) This was also an event for free during our regular service, for our small congregation and some invited friends. Like the small web, it felt anti-capitalist, and anti-AI.
P.S. - It’s been a rough year for my family. My two younger(out of three) kids now have Type1 diabetes and celiac disease. I haven’t had as much time and brain power to spend on fun small web stuff. I’m hoping to be able to do a little more this summer before HTML day. Love to all on the small web!
…it seems like a really good way to make sort of ‘digital postcards’ out of your blog/art posts, that might increase the chance of your friends actually opening it compared to a boring looking link.
It is tough, but managable.