by slowe » Wed Jul 06, 2022 5:51 pm
Following on from comments in an earlier Zoom...
I've been automatically parsing and re-posting APODs to Twitter for about 15 years (twitter.com/apod) and I've had two long-running issues:
1) reliably and consistently parsing out specific things from the HTML (particularly the title and copyright/credit statement as separate items because these are not reliably marked up).
2) I've had several requests over the years to include every image in the tweets but I've never been entirely convinced that contributors have legally agreed to me giving a licence to Twitter and all its 3rd parties to reuse their images so I've worried that I'd be at legal risk from both the contributors and for violating Twitter's Developer T&Cs. As a result I only include the image when the copyright line says "Credit..." rather than "Copyright...". This annoys quite a few people.
There's a simple, HTML, "fix" that would solve some of this and add extra functionality across a variety of services such as Facebook/Microsoft Teams/Slack when people share links to APOD webpages. That is to add a few extra <meta> lines in the <head> of the page so that all these services can create a "preview card" automatically. From the practical perspective of an Editor, this would mostly involve copy-and-pasting from a template (or previous version) each day with three minor daily changes. Here are the meta tags:
Code: Select all
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@apod">
<meta name="twitter:url" property="og:url" content="https://apod.nasa.gov/apod/ap220706.html">
<meta name="twitter:title" property="og:title" content="Milky Way Motion in 3D from Gaia">
<meta name="twitter:image" property="og:image" content="https://apod.nasa.gov/apod/image/2207/MilkyWayMotion_Gaia_1080.jpg">
The first two meta tags would stay the same day-to-day. The third (twitter:url/og:url) needs to be updated to the URL for that APOD i.e. update the date in the URL. The fourth meta tag (twitter:title/og:title) would be the title (copy and paste from the main part of the page). The last meta tag (twitter:image/og:image) would be the URL of the image used in the page (copy and paste from the <img> src attribute). The end result is that when someone includes a link to, say,
https://apod.nasa.gov/apod/ap220706.html in a huge range of services (Twitter/Facebook/Teams/Slack/Zoom etc) those services will be able to automatically render a preview e.g. this is how it would look on Twitter:
As you can see, the preview includes the image and the title. Other services may render the preview slightly differently (perhaps with the image on the left and text on the right). Having a "preview" would actually also solve my second issue (above) as the image isn't actually uploaded and re-licensed to Twitter (and their 3rd parties) by me in the tweet because it would be rendered from the apod.nasa.gov website separately; I'd just be including the URL. It also makes the whole image/title block a clickable link to encourage people to click through to the description. An extra bonus is that, unlike a tweet, these cards also give the ability to update the title/image in the preview after posting because you can update the webpage metadata (someone would probably also want to flush Twitter's cache using
https://cards-dev.twitter.com/validator but it is at least possible and easy).
Yes, I could recreate the entire APOD website and insert these meta tags myself but then the functionality would
only work when people shared links to the pages on my website - none of it would work for people sharing links to the canonical URLs (i.e. apod.nasa.gov links).
Following on from comments in an earlier Zoom...
I've been automatically parsing and re-posting APODs to Twitter for about 15 years (twitter.com/apod) and I've had two long-running issues:
1) reliably and consistently parsing out specific things from the HTML (particularly the title and copyright/credit statement as separate items because these are not reliably marked up).
2) I've had several requests over the years to include every image in the tweets but I've never been entirely convinced that contributors have legally agreed to me giving a licence to Twitter and all its 3rd parties to reuse their images so I've worried that I'd be at legal risk from both the contributors and for violating Twitter's Developer T&Cs. As a result I only include the image when the copyright line says "Credit..." rather than "Copyright...". This annoys quite a few people.
There's a simple, HTML, "fix" that would solve some of this and add extra functionality across a variety of services such as Facebook/Microsoft Teams/Slack when people share links to APOD webpages. That is to add a few extra <meta> lines in the <head> of the page so that all these services can create a "preview card" automatically. From the practical perspective of an Editor, this would mostly involve copy-and-pasting from a template (or previous version) each day with three minor daily changes. Here are the meta tags:
[code]
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@apod">
<meta name="twitter:url" property="og:url" content="https://apod.nasa.gov/apod/ap220706.html">
<meta name="twitter:title" property="og:title" content="Milky Way Motion in 3D from Gaia">
<meta name="twitter:image" property="og:image" content="https://apod.nasa.gov/apod/image/2207/MilkyWayMotion_Gaia_1080.jpg">
[/code]
The first two meta tags would stay the same day-to-day. The third (twitter:url/og:url) needs to be updated to the URL for that APOD i.e. update the date in the URL. The fourth meta tag (twitter:title/og:title) would be the title (copy and paste from the main part of the page). The last meta tag (twitter:image/og:image) would be the URL of the image used in the page (copy and paste from the <img> src attribute). The end result is that when someone includes a link to, say, https://apod.nasa.gov/apod/ap220706.html in a huge range of services (Twitter/Facebook/Teams/Slack/Zoom etc) those services will be able to automatically render a preview e.g. this is how it would look on Twitter:
[img]https://strudel.org.uk/apod_example_social_card.png[/img]
As you can see, the preview includes the image and the title. Other services may render the preview slightly differently (perhaps with the image on the left and text on the right). Having a "preview" would actually also solve my second issue (above) as the image isn't actually uploaded and re-licensed to Twitter (and their 3rd parties) by me in the tweet because it would be rendered from the apod.nasa.gov website separately; I'd just be including the URL. It also makes the whole image/title block a clickable link to encourage people to click through to the description. An extra bonus is that, unlike a tweet, these cards also give the ability to update the title/image in the preview after posting because you can update the webpage metadata (someone would probably also want to flush Twitter's cache using https://cards-dev.twitter.com/validator but it is at least possible and easy).
Yes, I could recreate the entire APOD website and insert these meta tags myself but then the functionality would [i]only[/i] work when people shared links to the pages on my website - none of it would work for people sharing links to the canonical URLs (i.e. apod.nasa.gov links).