Blomstra Meta - an open graph and schema.org extension with cards

luceos

Hi 👋 ,

I've been working on a new extension that renders open graph and schema.org information into pages.

A couple of weeks ago GitHub released some changes to their open graph images which astounded me, eg look at this one:

With that in mind, I first implemented a basic open graph image generator for all extensions on extiverse, see for instance:

Having really enjoyed this, I decided to push forward by doing something similar inside a Flarum extension. My first thought was integrating it into the existing SEO extension, but I ran into many obstacles including the fact that generating images should not be done during rendering/runtime.

Therefor I decided to pivot my efforts and write an extensible, fully open graph and schema.org extension from scratch.

blomstra/meta

The goal of Meta is to fully automate meta tag rendering for open graph and schema.org, while still allowing (at some point) some form of customization.

What can it already do:

Work with content types Discussion and User (profiles).
Generate open graph and schema.org.
Generate images for both content types.
Update all information on save/delete and use the queue to offload the process of doing so.
Allow extending (adding, replacing, removing) content types.
Take into consideration themeing (primary, secondary, darkmode and colored header).
Integrate logo.

What is planned:

Improve design and use of theme settings further.
Possibly allowing custom meta fields from the admin area.
Add extenders for extensions to influence the content types.
Adding support for Best Answer.
Adding support for v17 support.
A UX to manage some stuff.

Example images:

A discussion.

A user profile (the white area is filled with bio if that is used).

This extension is going to be a Premium extension maintained by the Blomstra company, but priced very low (around $ 25 yearly). A couple of lifetime licenses will be available just after the initial release as well.

I'd love to hear your thoughts about this extension and whether you have any requests on what features to include.

010101

luceos Yes, please! 🙌

I’ve wanted open graph cards for Flarum since I found Flarum. In fact, it might have taken me 2 years, but an open graph extension was going to be what I wanted to try next.

almalino

I am new to the whole Opengraph thingy. Is there a page in internet explaining what are the use cases of it?

tankerkiller125

almalino OpenGraph is a basically a meta tag standard used for the purposes of bots and services. As an example when you go to twitter, facebook, pintrest, etc. and you see a link that has an image, title, description, etc. already that is because those websites parsed the OpenGraph data and is displaying that to users in a "Rich" format.

The OpenGraph standards are on https://ogp.me/

As an example flarum.org has the follow OpenGraph data:

<meta property="og:type" content="website">
<meta property="og:url" content="https://flarum.org/">
<meta property="og:title" content="Flarum">
<meta property="og:description" content="Flarum is the next-generation forum software that makes online discussion fun. It's simple, fast, and free.">
<meta property="og:image" content="https://flarum.org/assets/img/flarum-banner.png">

There is also another format called Schema that allows for much more information and is used by things like search engines to display those Info panes https://schema.org/docs/schemas.html

As an example flarum.org has the following Schema attached for search engines to parse:

<script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "NGO",
            "name": "Flarum",
            "url": "https://flarum.org",
            "logo": "https://flarum.org/assets/img/logo.png",
            "alternateName": "Flarum Foundation",
            "sameAs": [
                "https://github.com/flarum",
                "https://twitter.com/flarum"
            ],
            "contactPoint": [{
                "@type": "ContactPoint",
                "contactType": "sales",
                "email": "info@flarum.org",
                "availableLanguage": [
                    "en",
                    "nl",
                    "fr"
                ]
            }]
        }
    </script>

GreXXL

Looks quite interesting. So it's basically creating an image that you could use elsewhere to share a discussion. Like for example to share it on social media? It would be interesting if you could adapt the generated image to your needs (eg. excerpt length, show/hide: posts, last updated, created) etc.

tolgaaaltas

Are these just concept or final design? I made this quickly, i'm not saying these examples are bad or something like that but it's definitely needs some improvements.

luceos

tolgaaaltas that's great! Send over more (for a discussion) I'll see what I can implement 😃

PS what would you white middle area do when you move bio underneath the name?

This was my latest attempt:

tolgaaaltas

luceos PS what would you white middle area do when you move bio underneath the name?

I think that area can be used for the last post. So it becomes very dynamic (if image url will be static).

almalino

tankerkiller125 Thank you for detailed explanation! Interesting thing to know!

Hari

✨ luceos adding the site logo on the image card would be nice. there should be an option to display on the right-hand corner or left-hand corner.

tankerkiller125 <meta property="og:type" content="website">
<meta property="og:url" content="https://flarum.org/">
<meta property="og:title" content="Flarum">
<meta property="og:description" content="Flarum is the next-generation forum software that makes online discussion fun. It's simple, fast, and free.">
<meta property="og:image" content="https://flarum.org/assets/img/flarum-banner.png">

if I share the 42nd post link on Twitter or FB will it display the 42nd post description as meta description? or will it consider the first post description as the meta description?

https://discuss.flarum.org/d/27092-blomstra-meta/42

i think it should consider the 1st post as description

when can we expect this extension?

MikeJones

Very interesting and awesome work as always!

Ralkage

I am REALLY digging the open graph cards for Extiverse! I had planned to create a portfolio-like site for myself to list Flarum extensions I've developed, but this could also be used on the FoF site which is not being actively maintained at the moment (that will change soon!). As for the Blomstra extension itself, I'd like to throw in some suggestions myself in regards to the card design 🙂

luceos

Looking at everyone having their own taste in what needs to be rendered on such a card and how - rightly so, I have started adding the ability to create Templates and Themes for the cards.

A theme can hold any variables/configuration, but by default will simply re-use the settings from the Appearance tab. A template can then use that Theme to generate fields. A template will contain a predefined set of methods that can be called to generate the image like Title, Subtitle, Logo, Author and a couple more based on the needs of the default template. Each of these methods in a template can then be used to generate a layer into the image.

I'm also trying to allow these templates to use the natively shipped FA icons so that's going to allow these images to look even more awesome.

luceos

Refactoring done. Font awesome now also works.

Next building a better default template and creating a couple alternatives.

MikeJones

So are these the cards that show up for links on Facebook and Twitter? Or are they what show up in Google search results, I am a little confused still.

luceos

MikeJones Both. Sites usually use or fallback on open graph data if it exists. Including that image. Eg discord also uses them.

Hari

i think this extension will be very useful since you are developing it 😃

we want to completely switch to this whenever it is out, and will we able to completely relay on new extension ? we dont want to use any other seo extension if this satisfies all the needs

can we expect any SEO fix for "near?" = canonical url issue
custom page title and description where post title can be different and for seo purpose we can add different title : like Yoast SEO | is there any possibility to define page tittle at admin level for all pages like yoast seo ?
full support to Q&A schema https://developers.google.com/search/docs/data-types/qapage
Best answer count issue - As per the Google’s doc we need to set answerCount to 0 for unsolved topics.
there will be any possibility to add custom page tittle for tag pages?

these are my Wishlist for an a ideal SEO extension

askvortsov

Hari can we expect any SEO fix for "near?" = canonical url issue

This is fixed in core for the next release.

luceos

Hari thanks for this clear list of requirements. Allowing custom meta definitions is on my todo, but takes a huge amount of more effort. All of the mentioned items seem like something that I'd like to implement at some point.

I have made great progress and will make a simple first version available as soon as possible after my vacation.

Hari

askvortsov Yay ! , I want to do the happy dance now ... Thanks a lot to everyone 😍😍😍😍

Hari

@JasperVriends //update

askvortsov Hari can we expect any SEO fix for "near?" = canonical url issue

This is fixed in core for the next release.

Hari

luceos Sure sir, take your time. all we need a copy version of yoast SEO in our flarum 😁