search

lucid-fox / social-magick

An Open Graph Image generator plugin for Joomla 3 and 4
GNU General Public License v3.0
15 stars 1 forks source link

Add options to add other OG tags #4

Closed crystalenka closed 3 years ago

crystalenka commented 3 years ago

For this to be a complete magical social solution there should be settings in the backend to automatically set other OG info:

Also, the option to enable/disable Twitter proprietary tags: (notice the different structure!)

Finally, should these options be available in the plugin configuration?

nikosdion commented 3 years ago

Based on my extensive mucking around with these properties the last year and a half I do have a few comments :)

The title and description should be the same ones that Joomla is using in its micro data. Also note that since Joomla does use micro data since Joomla 3.7 it's no longer necessary to set up their Open Graph equivalents.

Likewise for the URL and site name.

Twitter will first try to find its own tags. If they do not exist it will fall back to the OpenGraph tags and / or micro data, in this order. Therefore the title, descriptions, image and image:alt are not necessary. The card tag is a good idea through. This should be a template option.

The FB app ID and Twitter site are useful properties to have at the plugin configuration.

There is another Twitter tag for the handle of the author of an article. This could be a per-article option, unrelated to anything else. If it's non-empty the tag would be set. See https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started under Card and Content Attribution. It's optional, like twitter:site, but good to have.

Recap

The twitter:card should be a template option.

The fb:app_id and twitter:site should be plugin options.

We can add a twitter:creator option in the article.

crystalenka commented 3 years ago

I think the Facebook validator complains if you're not actually using OG tags; is there any downside to including them anyway even if they're technically not necessary?

The twitter:card options are summary and summary_large_image - the latter should be the default.

I agree that we should add the twitter creator option in the article.

nikosdion commented 3 years ago

The Facebook validator complains because your HTML is not strictly correct.

The Open Graph attributes have an RDFa prefix of og: but we never defined it. W3C's RDFa context page describes that the og: prefix belongs to Facebook's Open Graph protocol and needs to be pointed to the URL http://ogp.me/ns#. Otherwise strict validation such as W3C's RDFa validator will complain.

Since we are using this prefix in the document's <head> we would need to define the Open Graph prefix there. However, since Open Graph annotations might appear in the <body> as well it's a good practice setting it to the opening <html> document. This is what the official Open Graph protocol page recommends.

See for example how the tag is on my site's HTML output:

<html lang="en-gb" dir="ltr" prefix="og: http://ogp.me/ns#">

Versus how it is on your site:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >

If you want a great OOTB (Out Of The Box) experience we need to have an option to add the prefix declaration to the HTML root node, enabled by default. It's necessary unless the site's integrator have done it themselves, like I did on my site.

PS: Figuring that out the first time I bumped into it took me a few hours of searching and experimenting. It's totally not obvious if you go by Facebook's official Open Graph integration documentation. They never mention it anywhere as far as I can tell. You have to think to look for the Open Graph site or trawl Stack Overflow to get a hint to do so.

crystalenka commented 3 years ago

one more: <meta property="og:locale" content="en_gb OR SET LANGUAGE" />

nikosdion commented 3 years ago

I've been using Git for 10 years. Today my commit disappeared from all repos. What the actual fuck.