![]() ![]() ![]() “Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. I have reached the above conclusion by trying both dimensions and checking how the link will appear in Facebook and Twitter posts. 1200圆00 if the image can be cropped on both sides. Image dimensionġ200圆30 if the image can be cropped at top and bottom. Facebook allows an image file size up to 8MB ( Facebook 2020b). That’s the limit for Twitter ( Twitter 2020a scroll down to “twitter:image”). One of image/jpeg, image/gif or image/png - Facebook (2020a) File size ![]() While Twitter also allows WebP (see Twitter 2020a scroll down to “twitter:image”), Facebook’s guideline says that the og:image:type meta tag - to specify image file format (see Step 2 below)- needs to be: The common denominators of Facebook and Twitter guidelines are as follows (as of July 2020): File format This should be done first because the image dictates what needs to be written for meta tags. We start with the preparation of an image to be displayed when someone shares the link to your website on social media. Note: I use the Author-Date referencing system in this article, to refer to various articles on web development. If the link is dead or if the linked article disagrees with what this article says, then it’s an indication that the relevant part of this article is likely to be outdated. What’s written below may become outdated in the near future. In doing so, I try to link the sources of information as relentlessly as possible, because social media has constantly been evolving (some of the descriptions in the 2016 CSS Tricks article are now outdated). It takes half a day to fully grasp what needs to be done.įor the future self and for those who might also benefit, I summarise what I have learned. It prompts me to check the sources: Facebook and Twitter’s own documentations. But it was written 4 years ago, and some comments to the article show disagreements. Then I remember there is a set of things to be done for controlling the appearance of social media links to your webpage.Ī CSS Tricks article on the subject ( Coti 2016) gives us a good overview. Very excited, I share the link to the app on my Twitter post. I have recently created my first front-end webapp called Line-height Picker. Meta tags for sharing the link on Facebook and Twitter Motivation ![]()
0 Comments
Leave a Reply. |