RealFaviconGenerator brings the best Facebook meta editor to Yoast SEO

You know Yoast. This is one of the first plugins you installed in your WordPress blog. This module comes with a stunning set of options to make your site SEO-friendly.

Yoast gives your the ability to setup the way your posts will look like once shared via Facebook.

Share on Facebook

In its free version, Yoast SEO offer a simple form where you can type the post title and description, and submit an image. It is basic but straightforward.

Yoast (Free) - Facebook editor

In its Premium version, Yoast let you see in real time how your post will look like in the Facebook newsfeed. Until a few months ago, that was the best solution in the market.

Social by RealFaviconGenerator replaces Yoast’s Social editor.

RealFaviconGenerator integrated into Yoast SEO

What does it add?

  • Preview for desktop, Android and iPhone – Your post will likely appear on Facebook native mobile apps, so better know how your post will be displayed on these platforms.
  • Pixel precise preview – The editor is using the same fonts and styles as Facebook clients. It also replicates their policy regarding title/description cropping. So you know what your visitors friends will see (or not).
  • Edit the image – You can zoom in/out and move the image. So you are in control of the post appearance.
  • Choose between the various formats – Did you know Facebook can display you posts with a square image? A tall image?

Now Yoast and Social by RealFaviconGenerator form the perfect duo for SEO and social optimization for WordPress.

Major sites that think they have their Facebook image right but don’t

The Facebook Open Graph image is the image linked to a web page and displayed by Facebook in the news feed when the said page is shared:

Open Graph image example

This image has special requirements, in particular its dimensions. We already saw that many web sites did it wrong. What about the biggest web sites, the ones everyone know? This article focuses on the Alexa’s 500 worldwide top sites.

The results

65% of the top sites have no Open Graph image. As simple as this. You could expect such sites to be at the bottom of the list, but actually even the first ones lack of it:

Wikipedia - No Facebook Open Graph image
Wikipedia – No Facebook Open Graph image
LinkedIn - No Facebook Open Graph image
LinkedIn – No Facebook Open Graph image
Reddit - No Facebook Open Graph image
Reddit – No Facebook Open Graph image

What about the remaining 35%? Well, 8% don’t match Facebook ratio requirements. For example, Vimeo is using an image which is roughly 5:3.

Vimeo Open Graph image
Vimeo Open Graph image

Facebook expects 19.1:10, so it crops 13% of it to make it fit its news feed:

Vimeo Open Graph image cropped by Facebook
Vimeo Open Graph image cropped by Facebook
Vimeo on Facebook
Vimeo on Facebook

Some other sites have the ratio right, but the images are too big. This is not documented anywhere, but when Facebook gets a small square picture, it displays it as is in the news feed. But when the image is big, Facebook processes it as a wide image. 7% of the top sites fall in this trap. Among them, YouTube (the 2nd most visited web site in the world) and Amazon:

YouTube Open Graph image

Amazon Open Graph image and on Facebook

Conclusion

That leaves us with only 20% of sites that:

  • Have an Open Graph image for Facebook
  • Have a ratio Facebook knows
  • Have the image displayed as is and not cropped by Facebook

Results

Suffice it to say that this result is rather poor.

In one hand, one could think that YouTube homepage sharing is not that important. After all, what is heavily shared across Facebook are YouTube videos (and this part is done right). In the other hand, we need to consider that someone at YouTube created an image for the second most visited website in the world, and this image is not that great. And 80% of the top sites are more or less in this situation.

Thank’s to Meta Chart for the neat online tool!

Facebook Open Graph image: You’re (probably) doing it wrong

If you use Facebook, you must be used to this kind of thing in your news feed:

Facebook Open Graph Image example

Someone (a friend maybe) shared some content and here you are with a title, a description, a link to click. And an image. This image is important because it has the power to grab the attention and generate visits.

This image is usually provided by the shared page, via specific HTML markups. Facebook sticks to the Open Graph specifications and adds a few more requirements, for example regarding the image dimensions.

For many sites, like blogs, the Open Graph image should be a classic, along with the page title and description. Facebook is often of critical importance to generate traffic. Is the Open Graph image correctly created?

An issue (among others)

To answer this question, let’s focus on a particular point. Facebook displays 19.1:10 images in its news feed (eg. 1200×630, because 1200/630=1.905; close enough). When it finds an image of another ratio, it automatically crops it to turn it to 19.1:10.

For example, let’s consider this 540×619 image:

crop_example_1

When the related page is posted to Facebook, the image becomes:

crop_example_2

It is easy to understand how Facebook proceeds. It simply crops the image as much as necessary to make it 19.1:10. To do so, it normally removes the same amount of border on each side to keep the center of the image:

crop_example_3

Now the deal is clear: if you don’t provide a 19.1:10 image to Facebook, it will be cropped automatically. Which can be okay or plain wrong, depending on the image. Take this NCB News article about Macy’s. Its Open Graph image is:

share_planned_3

We can clearly see the name “Macy’s” and the showcase, so this is probably a good photo to illustrate the article. However, when shared on Facebook, the outcome is rather poor:

share_actual_3

“Macy’s” was entirely stripped and the photo is now quite dark.

Open Graph image in the wild

To investigate how the Open Graph images are prepared, 40 sites were selected, 10 in each of the following categories:

  • News sites (Yahoo News, CNN, etc.): They are high traffic sites everyone know. Facebook can be a major source of traffic for these sites, so they are likely to pay attention to the Open Graph images.
  • Tech blogs (TechCrunch, Mashable…): Same as news sites, plus they are tech-related. Can’t be wrong!
  • Blogs about WordPress (WPTavern, wplift…): As WordPress-related blogs, they must know about the right tools to have everything right, including Open Graph images.
  • Social Media blogs (Buffer blog…): Because social media is their core business, they must be especially careful with Facebook-related material.

Results (**drum roll**)

And now, the shocking truth: out of these 40 sites, only 3 are doing it right. Hat off to TechCrunch, Mashable and the New York Times. The later must have a dedicated tool or process for this, because its Open Graph images not only have the right dimensions, they are also cropped manually. I have no strong opinion about TechCrunch and Mashable but I suspect them to auto-crop the images, making the process less relevant: the goal is to do it manually in order to achieve the best result. Not to leave this to an automated tool.

What about the other sites?

Out of 40 sites, only one does not have any image (ITBusinessEdge). All the others come with an og:image markup. This is the sign that web site editors have plans for the Facebook metadata.

However, things are not that crisp when going into the details: 36 sites do not follow Facebook requirements and are exposed to auto-crop.

The next question is “how much?”. After all, removing a single row of pixels cannot hurt. On average, 13% of the surface of the analyzed images is cropped. This is significant, especially from high traffic and/or specialized sites.

Some sites seem to have no particular policy regarding Open Graph image dimensions. For example, on WPTavern, out of 10 posts, the average cropped surface is 18%, with a standard deviation of 14% (and a maximum of 41%). I suspect this is because the featured image (a term WordPress users should be familiar with) is used as the Open Graph image as is. This pattern must be encountered very often.

Some other sites apparently have a “fixed dimensions” policy, but ones that are not accurate. Both CNN and NBC News always expose the same image size. CNN has a systematic 7% of cropped surface, 21% for NBC News. The sad winner is HowToGeek with 43%. The Open Graph images are actually so small that Facebook ignores them and rather picks images right from the shared pages.

Conclusion

This small study shows how sites handle Facebook sharing: they support Facebook, but they do not support it well. This is the purpose of the new RealFaviconGenerator Facebook metadata editor: do it, and do it perfectly.

And for those who know what RealFaviconGenerator is in the first place, you probably recognize the pattern: a few years ago, favicon generation was very poorly addressed. But folks were used to it. Once RealFaviconGenerator came in with the favicon editor the community deserved, the expectations started to change and nowadays everybody want “all the icons”. And the smarter among them use RealFaviconGenerator 🙂

Methodology

The tested sites were obtained by googling something like “most popular news sites” and picking the first sensible list. In the end, the tested sites are not guaranteed to be the most relevant, but the outcome should be good enough.

Then, for each tested site, a sample post was randomly picked (eg. a news site headline article, a WordPress blog latest post, etc.).

News Sites

Tech Sites

Blogs about WordPress

Social Media Sites

MacBook Pro Touch Bar icon preview, and why it matters

The new MacBook Pro comes with a Touch Bar. This touch-screen-as-a-keyboard element is programmable and all macOS applications are expected to provide some contextual content. Safari is no exception. What does it display and how is your web site impacted?

example

Long story short: Safari is reusing the mask icon, specified a year ago by Apple while releasing macOS X El Capitan. Basically, if you have created your favicon with RealFaviconGenerator less than a year ago, your web site already has an icon to fit the Touch Bar.

The new Touch Bar preview

From day one, RealFaviconGenerator has aimed at providing a preview for all platforms, so you know in a blink how your favicon looks like everywhere. This is the update for the Touch Bar:

Touch Bar preview

Why it matters

One could say the Touch Bar preview is no more than a nice to have. After all, as soon as you know how the icon is rendered as a pinned tab site, you get a good idea of how it should fit the Touch Bar. Well, this is not that simple.

The pinned tabs area background is light grey and Safari uses the color provided with the icon to fill the icon itself. The Touch Bar behaves differently, with dark contours, white icon and the color used as the icon background. Consequence: a dark color, which would have been a sensible choice a few months ago, is now doubtful when applied to the Touch Bar. In the example below, the Touch Bar icon is too dark and will not fit along with the more colorful icons:

Touch Bar - Too dark

Once again, the safest path is to keep your favicon up-to-date in minutes by using the WYSIWYG editor of favicon.

Alpha feature

Oh, this is an alpha feature. The MacBook Pro with Touch Bar is not available yet even for a demo, as confirmed yesterday when I visited the Apple Store of Opera, Paris, France.

So how do you implement this kind of feature when you can’t even know for sure how it looks like on the final device? Clues and guesswork. For example, take this unboxing video on YouTube:

Touch Bar in action

We can clearly see how icons are displayed. Plus they reflect their Pinned Tabs counterparts. Except for one icon: eBay. The icon is not monochromatic in the Touch Bar, which is normally not possible with the mask icon (the monochromatic SVG icon specified by Apple and used for pinned tabs). At this point, it is hard to know how Safari behaves. Apparently, it embeds predefined icons for well known sites such as Facebook and YouTube (a browser’s classic to introduce a proprietary web site presentation, in bookmarks for example). This make the underlying mechanism biased and less reverse-engineerable.

The feature will be updated as soon as possible to reflect the real appearance of the icon in the Touch Bar. Hopefully, that will only mean removing the “(alpha feature)” caption.

XSS vulnerability fixed in the WordPress plugin

Five days ago, Kacper Szurek sent me an email to warn me about a security issue in the WordPress plugin. It was fixed a few minutes ago. Please update to v1.2.13.

How dangerous this breach was? It would allow an attacker to trick the authenticated administrator of a WordPress site to download and install a faked favicon package. Because the package contains HTML code to be added to the header of each page, this attack could basically lead to code injection. Such attack would be quite sophisticated: the attacker needs to target a blog, contact its administrator and trick him to make him click on a forged URL.

Thank you very much Kacper for having reported this one!

SSL Support

Alright. Favicon is not the most sensible topic around. Plus this icon is expected to be published and viewed by as much visitors as possible.

Or not. Maybe you’re doing some experiments with RealFaviconGenerator. Maybe you work on a secret project and you don’t want anyone to know before the D day. In any case, you need privacy. Now RealFaviconGenerator supports SSL.

SSL Support

The story of this new feature is a bit particular. It all started with a support request for the WordPress plugin. Apparently some plugins, such as the CloudFlare Flexible SSL plugin, rewrite the URLs to always keep the WordPress admin in the safe SSL world, even when he leaves his dashboard. And since RealFaviconGenerator didn’t support SSL until now, it was either CloudFlare or RFG.

Adding SSL support way the best way to fix this. Plus everybody expect SSL nowadays, including me. So here it is.

But something else happened. A few days ago, the press revealed that the NSA has stolen thousands of SIM keys in order to spy mobile phone conversations. To do this, the NSA hacked Gemalto, a company where I used to work (strictly speaking I was part of Trusted Logic, acquired by Gemalto a few years ago). I was working on SIM cards and even if I didn’t see a single real life SIM key, this event has a special meaning to me.

So now SSL is on and the timing is perfect. Your favicons are safe. This won’t make you sleep better, but at least this small issue is fixed.

iOS startup image now available via the API

iOS lets you define a startup image. When your visitors add your web site to their home screen, this image is displayed for a short time when the home screen link is clicked.

Now you can create this image with the help of the non-interactive API. Well, “this image” actually means “these 7 images”. And the HTML code is not trivial. Definitely not something you want to deal with a few hours before the release of your next web project.

Special thanks to Taylor Fausak for his great iOS startup image reference! The official Apple docs are clearly outdated.

Oh, and if you think the photo used to illustrate this post is below standards: just try to take a screenshot of an actual startup image. The image appears for a second, at most. It is awfully hard! 😉

Say hello to the iPhone 6 Plus and its 180×180 icon!

The iPhone 6 was released a few hours ago. Guess what? The iPhone 6 Plus and its large screen comes with a new Apple Touch icon: a 180×180 picture.

RealFaviconGenerator was just updated to provide you the latest set of icons to support all iOS devices. Sure, unless the iPhone 6 Plus becomes an instant hit, there is no hurry to update…

Android Chrome and its favicon

Favicon is more or less complex from a platform to another. I think Chrome for Android is the trickiest.

With iOS, things are not that easy but clear: Apple defined the Apple Touch icon, a proprietary mechanism. This approach makes sense. After all, when iOS was introduced, it required new, high resolution icons that did not exist anywhere else. As a result, we have a somehow proprietary markup with a specific apple-touch-icon relation attribute. The Apple Touch icon comes with an advantage: because it is specified for iOS, Apple can enforce design guidelines. Solid background, rounded corners, etc.

Unlike iOS Safari, Android Chrome (Chrome for short) does not define any proprietary mechanism. That surely sounds good. No one likes vendor-specific stuff. But this approach comes with a cost. More of this below.

As indicated in the specs, Chrome relies on two sets of icons:

  • Apple Touch icon. Yep, the primary choice for Chrome is (… was) the icon defined for its competitor. This is a sensible behavior: with so few support for high resolution icon, supporting the famous Apple Touch icon gives Chrome the best chance to find a suitable icon.
  • Two 192×192 and 128×128 PNG icons, with a preference for the 192×192 icon. These icons are based on standard HTML5 markups.

It is easy to figure out Google’s strategy: introduce a dedicated 192×192 high resolution icon and fallback to the Apple Touch icon when not available. Pragmatic, as it should be. But the devil is in the details, and when you try to create the ideal favicon, things become quite tough.

192×192 or 196×196

A small detail as a starter. I started to study Chrome’s icon for almost a year. In the beginning, it was a 196×196 icon. When I started this article, I re-read the specs, something I had not done for a while. I realize there was a change: 196×196 became 192×192.

As we will see below, this is a major change because today’s Chrome (version 37) does not use the 196×196 PNG icons that were designed especially for it.

Apple Touch icon or PNG icon

Since Chrome supports two kind of icons, which one does it use? Looking at the compatibility page of RealFaviconGenerator:

Android Chrome version Favicon Bookmark icon Home screen icon
31 16×16 PNG icon 152×152 Apple Touch icon 152×152 Apple Touch icon
32 196×196 PNG icon 152×152 Apple Touch icon 196×196 PNG icon
35 32×32 PNG icon 152×152 Apple Touch icon 152×152 Apple Touch icon
36 160×160 PNG icon 160×160 PNG icon 160×160 PNG icon
37 (latest version at time of writing) 160×160 PNG icon 160×160 PNG icon 160×160 PNG icon

Apparently, Google finally set its preference to the PNG icon, if it can find one.

This brings consistency: let’s design a PNG icon and Chrome will not pick anything from Apple. But now comes the trick. Sure we can design an icon for Chrome. But as the PNG icons are declared with standard HTML5, other browsers can use it, too. This is what happens with the current pictures and code generated with RealFaviconGenerator (version 0.7). Because the Chrome PNG icon is quite large, some browsers, such as IE11, consider it as a good choice. This is no good news when the author of RealFaviconGenerator decides that the Chrome icon must be designed after the iOS icon.

Which PNG icon?

According to the specs, Chrome picks the 192×192 icon if it finds it, the 128×128 icon otherwise. Is that the case? To demonstrate this, I generated all PNG icons from 16×16 to 256×256 and declared them:


<link rel="icon" type="image/png" href="/16.png" sizes=16x16>
<link rel="icon" type="image/png" href="/17.png" sizes=17x17>
<link rel="icon" type="image/png" href="/18.png" sizes=18x18>
...
<link rel="icon" type="image/png" href="/255.png" sizes=255x255>
<link rel="icon" type="image/png" href="/256.png" sizes=256x256>

With this code, Android Chrome uses the 192×192 icon, as expected. Good.

What if it is not present? Chrome selects the icon just below: 191×191. This make sense, although the specs say nothing about this. And it goes on and on. Delete everything from 129×129 to 192×192 and Chrome uses the “low resolution” 128×128 icon. Delete it and Chromes takes the 127×127 icon. In the end, if you offer Chrome a 16×16 icon and icons larger than 192×192 (eg. 193×193, 194×194, etc.), it uses the 16×16 icon.

Thus, this general rule about Android Chrome 37: Chrome uses the same icon as the favicon, bookmark icon and “Add to home screen” icon. It picks the widest PNG icon it can find which is no larger than 192×192.

The goal of this post is to prepare a fix for issue #26. In the next version of RealFaviconGenerator, Chrome’s icon and classic PNG icons will be correctly dispatched.