Add OG image as customization option
Asked by 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.


Answers:
author: Siddhartha Mohapatra
body: 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](https://community.atlassian.com/t5/image/serverpage/image-id/152573i04A0FD6808E66BA4/image-size/large?v=v2&px=999 "Screenshot 2021-07-23 at 5.55.38 PM.png")  

![Screenshot 2021-07-23 at 5.54.26 PM.png](https://community.atlassian.com/t5/image/serverpage/image-id/152574iC7D5400F37F8826B/image-size/large?v=v2&px=999 "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  
![](https://wac-cdn.atlassian.com/dam/jcr:4d5bf146-aa3a-453a-8628-28bdcf1f26a9)  
[Learn new skills with Atlassian Training \& Certification](https://www.atlassian.com/university?utm_source=support_ticket&utm_medium=link&utm_campaign=select_support)  

comments: author: SML BioBot
body: 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](https://community.atlassian.com/t5/image/serverpage/image-id/153259i90821823C5659346/image-size/large?v=v2&px=999 "Screen Shot 2021-07-28 at 5.53.53 PM.png")


author: Siddhartha Mohapatra
body: 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?  

<br />

Thanks   
**Siddhartha Mohapatra**   
Senior Cloud Support Engineer  
![](https://wac-cdn.atlassian.com/dam/jcr:4d5bf146-aa3a-453a-8628-28bdcf1f26a9)  
[Learn new skills with Atlassian Training \& Certification](https://www.atlassian.com/university?utm_source=support_ticket&utm_medium=link&utm_campaign=select_support)  


author: SML BioBot
body: 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:

![cr-api-logo-pad@4x.png](https://community.atlassian.com/t5/image/serverpage/image-id/153728i4201CD31AA2BB8D6/image-size/large?v=v2&px=999 "cr-api-logo-pad@4x.png")


author: Siddhartha Mohapatra
body: Hi There,   

Thanks for sharing the details with us. I am glad that the issue has been resolved.  

<br />

Let us know if you need anything else I may help you with?  

<br />

Thanks   
**Siddhartha Mohapatra**   
Senior Cloud Support Engineer  
![](https://wac-cdn.atlassian.com/dam/jcr:4d5bf146-aa3a-453a-8628-28bdcf1f26a9)  
[Learn new skills with Atlassian Training \& Certification](https://www.atlassian.com/university?utm_source=support_ticket&utm_medium=link&utm_campaign=select_support)  

<br />


author: SML BioBot
body: [@Siddhartha Mohapatra](/t5/user/viewprofilepage/user-id/4056227)


author: SML BioBot
body: 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](https://community.atlassian.com/t5/image/serverpage/image-id/152284iB02FB78BFF2C3254/image-size/large?v=v2&px=999 "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](https://community.atlassian.com/t5/image/serverpage/image-id/152285i2448552896CD7E93/image-size/large?v=v2&px=999 "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.


author: Siddhartha Mohapatra
body: 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

comments: author: Siddhartha Mohapatra
body: 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


Tags: cloud