Adding OpenGraph fields to the TabInfo object

[X3Technology]

It would be nice for at least some of the the OpenGraph properties to be added to the TabInfo object.
If present, the render engine would create the <meta property:"og:xxxx"> meta tags similar to how it creates the <title> tag.

At a minimum og:title, og:description and og:image would be included. I could see use cases for adding all the others as well, but primary interested in supporting the requirements for posting to social media like LinkedIn, Facebook, etc.

In addition to allowing normal "static" pages to have OpenGraph support, by adding this to the TabInfo object, it would allow custom module developers to simply set the appropriate TabInfo property instead of having to include custom code to add these tags. For example, the detail view for a Blog module would simply set these values for the current blog article.

It would also require making the necessary form changes to the Page settings UX.

Thoughts?

[WillStrohl]

This really should be in the core as a formal feature in the core. As for where to put the settings, OGP implementations and needs change over time, so I think these settings should be saved in the often overlooked TabSettings. This would require less work architecturally if we need to quickly react to OGP changes.

[X3Technology]

Forgot about the Twitter meta tags. They don't use OG.

This blog post is useful:
https://neilpatel.com/blog/open-graph-meta-tags/

[david-poindexter]

This would be a great contribution to the core. Does anyone know anyone that may be willing to sponsor such a contribution?

[X3Technology]

I'm willing to do the work and submit a PR for most of it if the idea is worthwhile. I'm not comfortable in React (which seems to be a general problem with updating anything PersonaBar related), but I'll figure it out with some assistance.

[X3Technology]

I'm thinking this would work very similar to how SiteAnalytics.config works for inserting a portals Google Analytics APIkey.

The UX has a place to insert the values, but the template exists as an XML file outside the codebase so it can be changed as needed. One template for each OGP tag we want to insert. The templates get cached on app load for performance. Then, during page render, if the appropriate TabInfo property is set, the render process inserts the value into the template and kicks out the meta tag where it belongs. This also allows an admin to change the template if/when the OGP formats change without having to upgrade Dnn.

[X3Technology]

In fact, all of the logic for how to read the template and insert it where specified is already in DotNetNuke.Services.Analytics.GoogleAnalyticsEngine