Twitter Cards and Facebook Open Graph
My Web site is already enabled for Twitter Cards and Open Graph, and I previously mentioned I was testing their usage in my Site Redesign post.
At the moment every page on this site either uses a Twitter Summary Card, or it doesn't. On some pages the Open Graph and Twitter Card tags are absent with a comment block indicating why, so I can more easily debug what missing tags are causing the issue.
My Facebook is linked to my Twitter account. Although I rarely post on Facebook, everything I post on Twitter that doesn't start with an @ is automatically posted on Facebook "via Twitter". If I post an URL to a page on my Web site on Twitter, that means that both Twitterbot and facebookexternalhit come to the page to get the metadata.
Both social networks can display images with a link, but those images can be cropped in a way that isn't the greatest.
On Twitter, for example, a lot of pictures taken of a group of people end up as crutch shots until you expand the picture. Not that I'm going to be covering posting images to social media here, rather links to Web pages, but similar unwanted cropping may happen to images on your page when the page is shared.
On Facebook, if you share an URL you might be offered a choice of images that appear on that page and asked which one you want to use. By specifying an image that is also appropriately sized that image will be the one that goes with the URL when someone shares it.
As for updated pages, you can tell Twitterbot and facebookexternalhit to revisit your page, get the updated metadata, and refresh the entry in their databases with the new metadata. For Facebook that is the Open Graph Debugger (Facebook login required) and for Twitter that is the Cards Validator (Twitter login required). Since images are cached, it is best to change the filename of an image when you modify it.
I should also point out at this point that you need to enable Twitter cards for your Web site by using the Cards Validator to fetch an URL at your site and requesting approval. Once approved you can run the URL through the Cards Validator again and it should tell you that card type has been whitelisted for your site.
Update on : This page previously embedded Tweets and Facebook posts on it. My blog post Removing Website Functionality to Improve Privacy explains why that is no longer the case (user privacy reasons).
Twitter Summary with Large Image Cards
The summary_large_image card type includes a large image in the summary card.
Note that to enable the embedding of twitter cards on this site I have had to modify my img-src and style-src Content-Security-Policy because they use different domains than twitter uses for regular tweets, and I also modified child-src, frame-src and form-action to remove some CSP errors.
I have also added a test for Twitter Cards in my JavaScript so that embedded tweets containing cards aren't expanded to 100% width.
Facebook Open Graph Large Images
Note: Embedded Facebook Posts do not currently work on iOS Safari (including apps that use it such as the News App).
When there is a valid image linked to an URL using the og:image tag, and that image is at least 600 pixels wide by 315 pixels high, when someone shares that URL on Facebook (or Facebook via another application) then that image will appear with the other Open Graph data for that URL:
Differences Between Twitter and Facebook
To compare the below embedded Twitter and Facebook posts side by side at normal zoom level, this window needs to be approximately 1060 pixels wide as a minimum. Alternatively, zooming out in your browser may achieve the same result.
The first obvious difference between shared links on the two social networks is twitter displays the URL (possibly with an ellipsis at the end depending on length) even if a Twitter Card is displayed, whereas Facebook hides the URL if Open Graph data is available.
The second difference is that by default Facebook shows the Open Graph data, whereas Twitter hides it and adds a Show Summary link so the end user can expand it if they wish to.
The third difference, which may or may not have something to do with a combination of my own timezone currently being UTC, which of the two (or both) social networks I'm logged in on, third party cookie and DNT browser settings, and twitter:widgets:csp and twitter:dnt meta tags. The time both posts were made appears different.
Facebook appears to default to PST if you aren't logged in, and still only shows PST on embedded posts even if you are logged in. If you click on the date/time to view the post on Facebook, however, you'll be shown your local time if you are logged in.
Twitter, on the other hand, appears to either detect local time or displays embedded tweets in local time. Again, my current timezone is UTC so I'm not sure which. When you click the date/time and view the tweet in Twitter, however, the time is displayed in PST if you are not logged in.
The fourth difference, which you may not have noticed: the two images are different. The image in the embedded Facebook post is 448x235 pixels, and the image in the embedded Twitter tweet is 458x239 pixels. Those aren't, however, the actual dimensions of the images referenced in the twitter:image and og:image tags.
Image Sizes for Page Sharing
First I needed a source image. It not only needed to have a horizontal aspect ratio (wider than tall) but it also needed to be suitable for cropping.
Out of the four images I used on my strawberry planting page, the image of the bare root plants getting soaked in a dish looked like the one I wanted to use. Not only for looking like it would be suitable for cropping, but because it (a) showed the plants and (b) didn't show them planted up (i.e. you'd have to click to see the end result).
So, the first step was to crop an area so it had a 2:1 aspect ratio. When using the selection tool in GIMP it displays the current area's aspect ratio while dragging.
I then copied the selected image to a new file, and used Autocrop Image in GIMP's Image menu. I resized the image to 1024x512 and saved the file as a new image (IMG_1172_2x1_1024x512.JPG).
From that image I then resized it to 506x253 (keeping the 2:1 aspect ratio) and saved it as a new image (IMG_1172_2x1_506x253.JPG). That image is the one used in the twitter:image tag.
For the final image I just needed to crop the 506x253 image a little bit for Facebook. According to The Ultimate Guide to Ideal Image Sizes for Social Media Posts "Images previews for shared links are scaled to fill a box of 470 pixels wide by 246 pixels tall."
The easiest way to do that was to use the selection tool in GIMP on the image for Twitter and try and select an area approximately that big. I ended up selecting 470x246 pixels but after pasting the image was 470x245 pixels.
Admittedly I could have used the 1024x512 image for both, and let Twitter and Facebook resize and (in Facebook's case) crop the image, but I wanted a little bit more control.
Larger Images
While writing this section I decided to have a little play around and changed the og:image and twitter:image tags to both point at the 1024x512 image. I have decided that this looks fine for Twitter.
Facebook, on the other hand, crops the image to a square on my profile page on my iPad. Facebook says the image should be 1200x630 (or at least 600x315) so I'm going to select an area that is 1200x630 in GIMP.
Using the select tool, there is a checkbox in the Toolbox for Fixed and a dropdown where Aspect ratio is an option. With an aspect ratio of 1.91:1 and my original image opened in GIMP, I dragged a rectangle big enough, let go of the mouse button, and then dragged the selection rectangle to where I wanted it.
I then copied and pasted to a new file, autocropped the image, and then resized it to a width of 1200 (by 629).
The image looks the same and is still cropped on my profile page on my iPad. I give up.
The fixed aspect ratio option for GIMP's selection tool looks like it will be really handy in future.
I can take a source image, set a fixed aspect ratio of 2:1, draw a selection square, move and resize the square, copy and paste it in a new file, and then save that file as the 2:1 source image.
I can then repeat the same thing on the original with a 1.91:1 aspect ratio and save that as the 1.91:1 source image.
I can then, if I wish to, shrink down (resize, same aspect ratio) the images. For Twitter's 2:1 I'd shrink to a width of 1024, and for Facebook's 1.91:1 I'd shrink to a width of 1200.
The Code
The code on my planting strawberries page is pretty simple because my PHP includes transforms it to the relevant tags.
<?php
$article_name = "Growing Strawberries (Part 2)";
$article_name_extended = "Growing Strawberries - Part 2:<br /><span class='subheader'><small>Planting the Plants</small></span>";
$article_description = <<<EOF
<p>The plants have arrived and I have everything I need. Time to plant my new strawberry plants.</p>
EOF;
$shortTitle = $article_name;
$description200 = <<<EOF
The plants have arrived and I have everything I need. Time to plant my new strawberry plants.
EOF;
$cardType = "summary_large_image";
$twitterCreator = "@WatfordJC";
$contentPosted = '2015-10-31';
$contentModified = '';
$image = "https://web.johncook.uk/gallery/strawberry-plant-photos/IMG_1172_1200x629.JPG";
$imageWidth = "1200";
$imageHeight = "629";
$twitterImage = "https://web.johncook.uk/gallery/strawberry-plant-photos/IMG_1172_2x1_1024x512.JPG";
$description155 = $description200;
$NSFW = "SFW";
if (($NSFW == "NSFW") && ($site_name == "John Cook UK")) { if ($file_is_included) { return ""; } else { exit(); } }
?>My backend code transforms the above variables into the following meta tags:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@WatfordJC" />
<meta name="twitter:site" content="@WatfordJC" />
<meta property="og:title" content="Growing Strawberries (Part 2)" />
<meta property="og:description" content="The plants have arrived and I have everything I need. Time to plant my new strawberry plants." />
<meta property="og:image" content="https://web.johncook.uk/gallery/strawberry-plant-photos/IMG_1172_1200x629.JPG" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="629" />
<meta name="twitter:image" content="https://web.johncook.uk/gallery/strawberry-plant-photos/IMG_1172_2x1_1024x512.JPG" />
<meta property="og:site_name" content="John Cook UK" />
<meta property="og:url" content="https://web.johncook.uk/blogs/gardening/growing-strawberries-planting-part-2" />As for Facebook's cropping of images to squares, I'll just have to make sure that the centre of the cropped area at least shows something.