4,151 questions
You can add the opengraph tag like below:
<meta property="og:image" content="`http://example.com/image.jpg">`
Open graph thumbnail previews for urls get cut off
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(83.2, 97%, 18%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EN%3C/text%3E%3C/svg%3E)
Nelson
0
Reputation points
When posting a url in teams, we get shown a thumbnail preview of the website's opengraph tag for image. However the thumbnail preview has it's sides cut off.
There is a weird cropping that is happening.
The standard recommendation for websites for open graph image is 1200 x 630, so most website previews will have this problem.
Here is a screenshot of Microsoft Learn's preview when posted:
As we can see, in the thumbnail, the gray sides of the microsoft logo is cropped away.
My question is, how should an external website set their opengraph image tags so that their images are rendered fully in their entirety on thumbnail previews in MS Teams chats?
Microsoft Teams | Development
Microsoft Teams | Microsoft Teams for business | Other
10,961 questions
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(112.00000000000001, 85%, 20%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ENM%3C/text%3E%3C/svg%3E)
Nivedipa-MSFT 3,646 Reputation points Microsoft External Staff Moderator2024-08-16T06:11:29.65+00:00 @Nelson- Thanks for reporting your issue. We will check and update you soon.
-
Fayaz Sunte 0 Reputation points2024-08-18T22:19:08.64+00:00 Thanks for reporting your issue. We will check and update you soon
Sign in to comment
4 answers
Sort by: Most helpful
-
Deleted
This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Comments have been turned off. Learn more
-
Deleted
This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Comments have been turned off. Learn more
-
Nivedipa-MSFT 3,646 Reputation points Microsoft External Staff Moderator
2024-08-16T15:25:39.4066667+00:00 -
Nelson 0 Reputation points
2024-08-18T22:07:30.0933333+00:00 Yes, that is how you set an opengraph tag for an image, but MS Teams will crop it so that the sides are missing - How do you set the tag so that MS Teams doesn't crop the sides away and preserves the full image?
-
Nivedipa-MSFT 3,646 Reputation points Microsoft External Staff Moderator
2024-08-20T06:20:18.06+00:00 @Nelson - We have raised a bug for this, we will let you know once we get any updates on it.
Sign in to comment -
-
Fayaz Sunte 0 Reputation points
2024-08-18T22:13:50.3933333+00:00 When posting a url in teams, we get