Add meta tags for image/content previews and social media cards

[lupinia]

I thought I already had an issue for this, but it's been on the to-do list for years: Most social media platforms and chat services will pick up the meta description tag for a preview of text content, but it takes an extra step to get an image to show up in the preview. Since the methods for doing this are a little more standardized than they used to be, I'm hoping it won't be prohibitively difficult to implement (famous last words).

[lupinia]

• Standard tags for this: https://ogp.me/
• Twitter's special version: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary
• Helpful blog post 1: https://andrejgajdos.com/how-to-create-a-link-preview/
• Helpful blog post 2: https://dinojoaocosta.medium.com/how-to-make-twitter-preview-your-website-links-5b20db98ac4f

[lupinia]

EDIT: This comment is obsolete, see next comment for current to-do list.

Implementation plan/ideas:

• Maybe include a boolean flag in context that selectively enables this if all the data is properly assembled?
• I still need to decide whether to use a template block (and make heavy use of the {{ super }} variable), or include a sub-template.
• A template tag to assemble all this may be involved, or perhaps some sort of default function I can include in other views (similar to the way I'm handling breadcrumbs, though I'd love to find a more elegant solution to that too).

Specific meta tag data sources:

• Title: Same handling as existing page title, but without the site title appended to the end. Maybe a template tag, to reduce repetition?
• Description: Same handling as existing description meta tag.
• Image: Use icon version of background image generated by Sunset. Will require some modifications to existing Sunset template tag. Also need to design a default logo or something to fall back on.
• Image Alt Text: Use description of image, which may differ from description of page.
• Extra Image Fields (OG): Build from image data. Specific fields: og:image:secure_url, og:image:type, og:image:width, og:image:height.
• og:type: Default to website. If content derives from a deertrees.leaf object, use article and include extra tags accordingly.
• twitter:card: Default to summary. If content type is sunset.image, use summary_large_image.
• og:url: This may require some experimentation; the .get_absolute_url() method will be useful on some content types, but not all of them (especially static/special pages).
• og:site_name: Hard-coded in template or settings.
• twitter:site: Hard-coded in template or settings.
• twitter:creator: Should ideally pull from object author, but I can probably safely default to hard-code my own Twitter handle for now.
• og:locale: Can pull from existing settings value (I'll just add another value to awi_utils.context_processors.settings_vars to include this).
• article:published_time: Corresponds to deertrees.leaf.timestamp_post.
• article:modified_time: Corresponds to deertrees.leaf.timestamp_mod.
• article:author: Pull user display name from deertrees.leaf.owner.
• article:section: Title of deertrees.leaf.cat (immediate parent category).
• article:tag: An array of tags, which, in practice, means one meta tag per content tag. Which, on some content items (especially photos), could end up being a lot of tags. I need to look into this in more detail.

[lupinia]

Tags in template:

• [x] og:title tag in base template
• [x] twitter:title tag in base template
• [x] og:type tag in base template
• [x] twitter:card tag in base template
• [x] og:url tag in base template
• [x] og:description tag in base template
• [x] twitter:description tag in base template
• [x] og:locale tag in base template
• [x] og:site_name tag in base template
• [x] og:image tag in base template
• [x] twitter:image tag in base template
• [x] og:image:secure_url tag in base template
• [x] og:image:type tag in base template
• [x] og:image:width tag in base template
• [x] og:image:height tag in base template
• [x] og:image:alt tag in base template
• [x] og:article:published_time tag in base template
• [x] og:article:modified_time tag in base template
• [x] og:article:author tag in base template
• [x] og:article:section tag in base template
• [x] og:article:tag tags in base template (loop)
• [x] twitter:site tag in base template
• [x] twitter:creator tag in base template?

Data population:

• [x] og:title and twitter:title from main site title - see #88
• [x] og:description and twitter:description from main site description - see #89
• [x] og:type set to website by default
• [x] og:type set to article for content that extends deertrees.leaf
• [x] twitter:card set to summary by default
• [x] twitter:card set to summary_large_image on Sunset images
• [x] og:url set to object's get_absolute_url() value on content that extends deertrees.leaf
• [x] og:url set to current request URL as a fallback default
• [x] og:locale set to primary language from settings.py
• [x] og:site_name set to default from settings.py
• [x] twitter:site set to default from settings.py
• [x] og:image and twitter:image and sub-tags set from Sunset background system (see #65)
• [x] Investigate relevancy of og:image:secure_url
• [x] og:article:published_time and og:article:modified_time set from base timestamps in deertrees.leaf content
• [x] og:article:author from article author data (need to look into this more)
• [x] twitter:creator tag removed when article author isn't me
• [x] og:article:section from parent category of deertrees.leaf content
• [x] og:article:tag list from deertrees.leaf content tags
• [x] Fix permalink URLs for deertrees.leaf in meta tags (URLs are incomplete)

[lupinia]

The implementation of this is mostly done! Yay! Everything works on the actual content pages and the homepage - aka the URLs most likely to be shared - and two of the four related issues are complete. It'll take some time for Twitter and Facebook to re-cache the robots.txt file for cdn.fur.vc (they appear to be the only sites that need to be explicitly allowed in this manner) before things will start working correctly there, but given that I don't personally use either service anymore, that's fine.

I still need to finish the other two related issues - moving title and description blocks - before I can call this done, and there are some complicated views that will need some attention. But the "minimum viable product" version of this new functionality is live and ready to use!

[lupinia]

Since the only tasks remaining are enhancements to functionality that is now implemented, I think I can finally call this one done! This was a much bigger project than I expected, and I expected it to be huge, but I cleared out a lot of technical debt in the process, and it was worth the effort to make the site more useful and improve the quality of my link previews :)