nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add OG image as customization option

SML BioBot

Would you consider adding OG image and/or Twitter card image as a standard customization option? Favicon is great — but what would additionally be nice is to customize the preview icon, so that it won’t just show up as a generic statuspage app when shared on Twitter / Discord / etc.

Accepted answers

All comments

Siddhartha Mohapatra_n023ka

Hi There,

I am sorry can you please help me understand the requirement better by elaborating the same with help of an example & a screenshot.

Waiting to hear from you.

Thanks
Siddhartha

Siddhartha Mohapatra_n023ka

Hi There,

I am sorry can you please help me understand the requirement better by elaborating the same with help of an example & a screenshot.

Waiting to hear from you.

Thanks
Siddhartha

SML BioBot

When you post a URL to Twitter / Facebook, it generates an icon or a large preview depending on the presence of these meta tags.

For example:

This tweet https://twitter.com/RoyaleAPI/status/1415659427831554050 looks like this:

Screen Shot 2021-07-22 at 10.17.28 AM.png

Because of the presence of these meta tags:

<meta property="og:image:width" content="256">
<meta property="og:image:height" content="256">
<meta property="og:image" content="https://cdn.royaleapi.com/static/img/event/crl.png?t=86284e67c">
<meta property="og:description" content="Duel Deck Sets of Clash Royale League (CRL) 2021 season.">

These are the OG tags, which stands for OpenGraph meta tags. You can read more baout the specs here: https://ogp.me/

Right now, because there are no way to customize these OG tags, statuspage pages all render in a generic way like this:

https://twitter.com/RoyaleAPI_Help/status/1410978630411247623

Screen Shot 2021-07-22 at 10.20.45 AM.png

I realize that this is not our own statuspage but all status pages give this generic icon specifically because we can’t customize the OG image.

SML BioBot

@Siddhartha Mohapatra

Siddhartha Mohapatra_n023ka

Hi There,

Thanks for sharing the details with us. There is an option to add the image when posting to Twitter on your page's - Apps -> Twitter settings. You may upload an image with the desired resolution you wish to display on the Twitter page.

I have tested it uploading few different images with different pixels please refer the screenshots below.

Screenshot 2021-07-23 at 5.55.38 PM.png

Screenshot 2021-07-23 at 5.54.26 PM.png

If you have any other questions or concerns please do not hesitate to get in touch with us.

Siddhartha Mohapatra
Senior Cloud Support Engineer

Learn new skills with Atlassian Training & Certification

SML BioBot

I am not sure if this is working. I have uploaded an image but it doesn’t show up.

Here’s the tweet: https://twitter.com/RoyaleAPI_Help/status/1420296912951910401

I am fairly certain that og:image is required.

Attached is a screenshot of the setting:

Screen Shot 2021-07-28 at 5.53.53 PM.png

Siddhartha Mohapatra_n023ka

Hi There,

Thanks for sharing the details with us. Would you mind sharing the image file that you are trying to use or you may specify the resolution of the image that you are trying to use so that I can replicate the issue in my lab & get back to you?

Thanks
Siddhartha Mohapatra
Senior Cloud Support Engineer

Learn new skills with Atlassian Training & Certification

SML BioBot

After posting this reply, the image magically showed up on Twitter. I will send an update if it doesn’t show up in the future.

but for completeness, here’s the image I’ve used:

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

cloud

statuspage