Optimizing how your content looks when it’s shared on third-party platforms like Facebook, Twitter or WhatsApp can drive improved visibility, clickthrough, and conversions. But it’s not as simple as just picking a great image…

When you share a URL on Facebook, Twitter, or other platforms, they’ll typically show a preview of the page, with a title, description, and image. These elements are typically taken from Open Graph tags defined in the source code of the page you’re sharing.

How does this work?

The way in which this works is defined by the Open Graph Protocol. This is an open source standard (like WordPress, and even the Yoast SEO plugin), which allows webmasters to tell third-party systems (like Facebook, Twitter, Pinterest, or even WhatsApp, Skype or Hotmail) about their pages.

Star Wars

It defines a set of meta tags which allow you to provide information about the type of content on a page (e.g., “this is a page about a movie”), metadata about that thing (e.g., “it’s called Star Wars – The Last Jedi”), and how it should be presented when shared.

They look like something this:

<meta property="og:title" content="Star Wars - The Last Jedi" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt2527336/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/M/MV5BMjQ1MzcxNjg4N15BMl5BanBnXkFtZTgwNzgwMjY4MzI@._V1_SY1000_CR0,0,675,1000_AL_.jpg" />
<meta property="og:image:width" content="675" />
<meta property="og:image:height" content="1000" />

Most websites (and those running the Yoast SEO plugin) will automatically output elements like these for all pages, posts and archives.

The og:image tags are particularly important because Open Graph tags most commonly play a role in social sharing dialogues. This tag defines the picture which shows up when users share your content across social networks, apps, and other systems. Optimizing the composition, dimensions, and even the file size of the image you use can influence whether somebody clicks and the quality of their experience.

Using images which are too large, too small, or the wrong dimensions can result in errors, or in platforms omitting your images entirely. But optimizing your Open Graph markup isn’t as simple as just picking a good image. There are some complexities around how different platforms use these tags, treat your images, and support different rules.

TL;DR

  • It’s impossible to specify different images/formats/files for different networks, other than for Facebook and Twitter. The Facebook image is used, by default, for all other networks/systems). This is a limitation of how these platforms work. The same goes for titles and descriptions.
  • The Yoast SEO plugin will automatically try and specify the best image for each platform where you share your content, based on the constraints of these platforms.
  • The image size and cropping won’t always be perfect across different platforms, as the way in which they work is inconsistent.
  • Specifically, your images should look great on ‘broadcast’ platforms like Facebook and Twitter, but might sometimes crop awkwardly on platforms designed for 1:1 or small group conversations, like WhatsApp or Telegram.
  • For best results, you should manually specify og:image tags for each post, through the plugin. You should ensure that your primary og:image is between 1200x800px and 2000x1600px, and is less than 2mb in size.
  • We’ll be adding developer support for more advanced customization via theme functions and filters. 

    Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

    Yoast SEO: the #1 WordPress SEO plugin Info

It’s not as simple as just picking a good image

Even though Open Graph tags use an open standard, each platform (Facebook, Twitter, WhatsApp, etc) treats Open Graph tags slightly differently. Some even have their own proprietary ‘versions’ of Open Graph tagging, too. Twitter’s ‘twitter card’ markup, for example, bears a strong resemblance to, and overlaps with, Open Graph tagging.

As an open project, the Open Graph is constantly changing and improving, too. Features and support come and go, the documentation isn’t always up to date, and individual platforms make (and change) their own decisions on how they interpret it, and which bits they’ll implement.

And as the web itself continues to evolve, there are more and more ‘platforms’ where people can share content, and where the Open Graph is used. From Slack, to WeChat, to tomorrow’s productivity and social media apps, they’ll all rely on the Open Graph, but use it in subtly different ways.

So when we’re trying to define a ‘best practice’ approach to support as part of the Yoast SEO plugin, it’s not as simple as just picking the ‘best image’ – we need to make sure that we provide the right tags and image formats for each platform and network.

To make things more complex, these tags and approaches sometimes conflict with or override each other. Twitter’s twitter:image property, for example, overrides an og:image value for images shared via Twitter, when both sets of tags are on the same page.

Lastly, the open graph specification allows us to provide multiple og:image values. This, in theory, allows the platform to make the best decision about which size to use and allows people who are sharing some choice over which image they pick. How different platforms interpret these values, however, varies considerably.

This logic behind which platforms use which images, in which scenarios, gets complex pretty quickly! So more often than not, we’re stuck relying on the og:image value(s) as a general default for all platforms, and adding specific support where we can, whilst trying to minimize conflict. This doesn’t always produce perfect results, so we’re always on the lookout for better ways to ‘get it right’ without requiring end users to spend hours specifying multiple image formats for each post they write.

The challenge of og:image as a default

In a perfect world, there are two different approaches to how platforms handle Open Graph tagging. They look like this:

  1. All platforms only use og:image tags. When multiple images are set, they automatically select (and crop) the best version for their context.
  2. All platforms have specific Open Graph tags (or their own versions). They allow fine-grain control over every scenario, by enabling us to specify the exact image which should be used in each case.

Unfortunately, we’re stuck somewhere in-between. Some platforms allow a degree of control, but the og:image tag functions as a general fallback for all other scenarios.

FB plugin Yoast SEO

This is particularly problematic, as the og:image is also Facebook’s primary image. This is a huge challenge for the Yoast SEO plugin team, and for anybody else trying to define a ‘best practice’ approach to tagging. The image we specify as the main image for Facebook sharing (usually a large, high-res picture) also has to be suitable as a general default for all platforms which don’t have their own specific tags.

For many of these platforms, a large file size optimized for sharing in a Facebook newsfeed won’t be appropriate for their context. For example, Pinterest expects a relatively small, square cropped thumbnail image when sharing from a page – and whilst it has its own tagging mechanisms, the presence of an og:image tag on the page overrides those.

There’s more complexity, too. Different platforms have varying restrictions on image dimensions, ratios, and file size. A high-res og:image optimized for Facebook (with a large file size) will, more often than not, not display at all when someone shares it on Slack, for example.

Frequently, Yoast SEO has to share the same default og:image between multiple platforms – even though they have different expectations and apply different rules and treatments. Trying to work out what the ‘default’ image tag(s) should be, when it has to be the main image for Facebook and a universal default, is tricky. But it’s a problem we need to solve if we’re to provide a best practice ‘default’ setting for WordPress users.

There are lots of unknowns

Because each platform maintains its own rules and documentation on how they treat og:image tags, there are often gaps in our knowledge. Specific restrictions, edge cases, and in particular, information on which rules override other rules, are rarely well-documented. The documentation which does exist is often ambiguous at best. Google+ “snippet” documentation, for example, states that they won’t use images which are “not square enough”. It’s unclear what this means in specific, technical terms. HTML overview

In order to determine the best universal approach to image sharing markup, we had to do some digging and some experimentation.

We were particularly interested in understanding how different platforms react to the presence of multiple og:image tags. If we can specify more than one image, and different platforms handle that differently, perhaps there’s a way in which we can get them to pick the most suitable image for their needs.

What we found

The way in which different platforms handle og:image tags (and in particular, multiple og:image tags) is often inconsistent, and frequently complex. Thankfully, most small platforms and apps simply crop and use the og:image tag (or the first og:image tag, if there are multiple in the set), and apply some reasonable constraints around dimensions, ratio, and file size. Some of the larger and more popular platforms, however, exhibit some particularly challenging behaviors, which complicate matters.

Here are some examples of the undocumented behaviors we’ve discovered (note that we’ve not talked about platforms which simply pick the first og:image tag, and which don’t exhibit any other ‘odd’ behavior). If you find any other undocumented features or behaviors which we haven’t covered or supported (or if we’ve made any mistakes in our research), we’d love to hear from you!

Facebook

When multiple og:image tags are specified, Facebook uses the first tag in the set. This is in line with their documentation, but contrary to popular opinion (which assumes that the largest valid image is chosen). It’s also interesting to note that it uses the first image even if it’s invalid/brokenSelection FB

Additional images are available for selection by the user at the point of sharing (on desktop only). Images are hard-cropped and sized to fit the sharing dialogue window, based on the size of the window.

Instagram

Instagram behaves similarly to Facebook, except that it will only show an image preview for ‘small’ images (if the image file size is smaller than 300KB, and the dimensions are ~256×256 – though we’ve seen up to 400×400 work), and only supports JPG and PNG formats.

Twitter

Twitter uses the last image in an og:image set, unless a twitter:image tag exists. Using the twitter:image tag allows us to control Twitter images independently of all other types, though unfortunately doesn’t allow us to specify multiple values (to accommodate for different tweet contexts/layouts).

National Geographic

To add some complexity, Twitter supports multiple card layouts, which can be defined in a twitter:card tag. The default value is ‘summary’ (1:1 ratio), but it’s also possible to specify ‘summary_large_image’ for a larger, full-width image (2:1) ratio.

Unhelpfully, Twitter’s documentation shows the same layout for both card versions (summary, summary with large image).

Interestingly, Twitter used to support a ‘gallery’ type of card which held multiple images – however, they deprecated this into the ‘summary with large image’ card some time ago.

WhatsApp

WhatsApp also uses the last image in the og:image set, which it hard crops to a small square. Note that, this appears to accept enormous images, both in terms of file size and dimensions; this red square is cropped from a 10000×10000, 1.49mb image. Test page Jono

Skype

Takes the first og:image, but caches it seemingly permanently (both locally and in the cloud), making it impossible to change/update an image thumbnail for a URL (without, e.g., manipulating the og:url value to include cache-busting elements).

Telegram

Takes values from Facebook’s cache (typically the first og:image in a set). Cached images can be updated by messaging https://telegram.me/webpagebot (as a Telegram user) with up to 10 URLs. Note, caches only be updated if a page’s <html> tag contains a prefix=”og: http://ogp.me/ns#” attribute.

Pinterest

Pinterest’s documentation mentions that they “support” up to six og:image tags. However, sharing the page only ever utilizes the first* image the in the set.

They also support marking up inline images through Schema.org markup – however, when an og:image tag is present on the page (which will almost always be the case), it uses this instead.

Article Forbes

There’s also some ambiguity around the difference between how they handle Open Graph data with ‘article pins’ vs ‘rich pins’. The latter is an ‘upgraded’ version which displays more information on the card, but using these requires the site owner to validate their domain.

*There’s an edge-case where, if there are more than six images in the array, the sharing dialogue periodically seems to choose the seventh value (and there’s some other weirdness depending on the total numbers of images in the array).

Google+

Google’s Web Fundamentals documentation implies that Google+ may prefer (and will prioritize) schema markup over Open Graph markup. Theoretically, that might allow us to enable allow users to set a specific image for Google+. They also do some of the smartest intelligent cropping and ratio management (or, at least, the documentation on their approach is more complete and transparent than others).

As an interesting aside, Google+ ignores robots.txt directives, and so may unwittingly expose private/hidden assets.

What we’ve considered, and our decisions

That’s a lot of moving parts. We need to compare all of these rules and decide which og:image tags we output for any given post or page, on any given WordPress site running the Yoast SEO plugin. That means optimizing for the most common and general use-cases, without breaking too many edge-cases. It also means providing tools, hooks, and filters in WordPress to allow users with special requirements to alter the behavior to meet their particular needs.

That’s why we’re choosing to optimize the first image in the og:set for large, high-resolution sharing – the kind which Facebook supports and requires, but which cause issues with networks which expect a smaller image (like Instagram, or Telegram) sharing.

Whilst you could argue that Facebook might not necessarily wield the influence and domination that it used to, it’s undoubtedly still a significant platform in terms of audience size, and a place where page/post sharing is prolific – and where the quality/treatment of the image is critical to click through.

Given that both Facebook, and most platforms’ default is the first og:image tag in a set, we must ensure that this image is a large, high-quality image (with a suitable aspect ratio for Facebook). Unfortunately, this approach has some side-effects. There’ll be many cases where the image used is too large for Instagram (and other platforms which expect small thumbnails) to feature in shared post links.

We’re not completely happy with this as a solution, but it’s the best compromise we can come up with. As an aside, we also believe that, in its current state, Open Graph markup is a bit broken. We think that it feels intuitively right that the first and default og:image in a set should be a high quality, high-resolution image – and that it’s the responsibility of the platform to crop this down appropriately, or to use secondary/smaller og:images, or to provide their own markup/solutions.

Ideally, Open Graph tags would inherit some of the kinds of thinking behind CSS media queries, where you can specify the different screen widths at which different sets of logic apply. We’ll be seeking to lobby and work with the various platforms to improve their support and collaboration in the coming months and years.

User context is an important factor

We also think that this compromise makes more sense than optimizing for smaller images, because the context in which smaller thumbnails are used is different.

Example share link

We believe that individuals sharing URLs in one-to-one chat, or in small groups (e.g., in WhatsApp), are less likely to be negatively affected by a missing (or awkwardly sized/cropped) image. They’re usually chatting, engaged, and know the sender.

In the context of a newsfeed, like on Facebook or Twitter, the quality of the image is much more important – you’re scrolling through lots of noise, you’re less engaged, and a better image is an increased chance of a click/share/like. Structured data FB

In the case of Pinterest, and other systems where your interest is the image itself, we believe that most interaction occurs directly on the image, rather than from the page it’s on or a browser bookmarklet. Given this, we’re less concerned about Pinterest using the first og:image tag (which is a large image, optimized for Facebook) as a small, square thumbnail.

There’s an upper size limit, too

The biggest image you can have (both in terms of file size and dimensions) varies by platform, too. Some platforms support huge images (Facebook allows images to be up to 8mb) – but they chop these down into smaller thumbnails depending on the context. Some have relatively small max sizes, like LinkedIn and Telegram’s 2mb limit.

This makes it even more challenging to determine what the ‘best’ image should be, and which images should feature in the og:image set. We want to show a large, high-resolution image, but not too large.

It’s particularly tricky to pick the best size with WordPress, where we’re not always sure what image sizes we’ll be working with. That’s because, when a user uploads an image to WordPress, their site creates multiple versions of that image with different sizes and cropping. Typically, these are the original ‘full’ size, and ‘large’ (1024x1024px), ‘medium_large’ (768px, cropped), ‘medium’ (300x300px) and ‘thumbnail’ (150x150px) versions. But these default sizes are often altered by WordPress theme or plugin code, and by server configuration – and frequently, some might be too large for general use.

Because we need to make sure that the first og:image is suitable as a general default for as many platforms as possible, the Yoast SEO plugin evaluates post content, spots all of the images, and tries to pick the best size for each post. To get this right, we’ve evaluated the maximum file sizes and dimensions of a number of platforms, and we’ve set some automatic restrictions in the plugin.

Specifically:

  • When the ‘full’ size image is over 2mb file size, and/or over 2000 pixels on either axis, and/or the ratio exceeds 3:1, we’ll try and fall back to a smaller standard WordPress image size.
  • If we can’t find a suitable smaller image, we’ll continue to use the ‘full’ size. Note that this may result in the image not appearing in some sharing contexts.

In conclusion…

We don’t want our users to have to micromanage the details of how all of this works. Of course, when you’re producing great content for your audience, you should consider how that content appears on third party and social platforms. But it should be as simple a matter of picking an appropriate image, and letting the system do the rest – from sizing and file management, to ensuring that the best version shows up when it’s shared in other locations. Because every platform follows its own rules, however, we’ve had to make some decisions which won’t please every user and won’t solve for every scenario.

For most normal use-cases, we’d suggest that you manually set og:image values on your posts via the Yoast SEO plugin, and ensure that their dimensions are between 1200x800px and 2000x1600px (and that they’re less than 2mb in size).

If you disagree with the decisions we’ve made, or want to help us improve our solution; we’d love for you to get in touch. WordPress and Yoast SEO are both open source products – you can help by explaining your use-cases, reporting your bugs, and thinking about how a better solution might work.

We’d love to hear your thoughts; the Open Graph is a mess at the moment, and it’s up to all of us to fix it.

Some additional technical details

We’ve taken some liberty in the og:image markup, and we’re aware that we’re adding quite a lot of weight and markup with this approach. Specifically, we’ll output HTML which looks something like this:

<meta property="og:image" content="https://www.example.com/main-image.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/main-image.jpg" />
<meta property="og:image:height" content="2000" />
<meta property="og:image:width" content="2000" />
<meta property="og:image:alt" content="A description of the image" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image" content="https://www.example.com/second-image.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/second-image.jpg" />
<meta property="og:image:height" content="800" />
<meta property="og:image:width" content="800" />
<meta property="og:image:alt" content="A description of the image" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image" content="https://www.example.com/third-image.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/third-image.jpg" />
<meta property="og:image:height" content="600" />
<meta property="og:image:width" content="400" />
<meta property="og:image:alt" content="A description of the image" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image" content="https://www.example.com/fourth-image.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/fourth-image.jpg" />
<meta property="og:image:height" content="256" />
<meta property="og:image:width" content="256" />
<meta property="og:image:alt" content="A description of the image" />
<meta property="og:image:type" content="image/jpg" />

Note the progression ‘down’ from ‘large, high-quality image’, through different media sizes (depending on the site/theme setup), ending at a universal ‘small’ size.

We’ll also output a twitter:image tag, alongside the other twitter:card requirements (unless you’ve chosen to disable it in the Yoast SEO plugin config).

We’ll likely continue to iterate and improve on the approach, but here’s our rationale behind some of our assumptions:

  • The og:image:type may not be strictly necessary in all cases, but there are many websites and server configurations where the images don’t have clean and recognizable ‘.jpg’ (or similar) file extensions. By making sure that we signpost the type of file, rather than making networks work it out, we reduce the risk of errors.
  • Facebook’s documentation around how it uses secure_url tags is unclear, especially for sites which are fully HTTPS. However, in the case of video tags, it mentions explicitly that both tags are required, even if both feature the same HTTPS URL. As such, we’ll retain the secure_url tags even when your site and image are served over HTTPS.
  • It’s generally considered best practice to label images with descriptive alt attributes, in order to support users who rely on screen readers and assistive technologies. We believe that Open Graph image tags shouldn’t be any different. This tag is only output when your images are labeled, so we’d encourage you to write some descriptive text during your image upload workflow.
  • Our 2mb file size limit aligns, incidentally, to the default upload size set in most WordPress implementations which run on ‘off the shelf’ hosting.
  • Our 2000×2000 pixel size flag should be a suitable maximum for almost all websites and screen sizes. Most browsers on desktop monitors have a width of fewer than 2,000 pixels (4k monitors and upwards often use image scaling to prevent everything from looking tiny). It’s also rare for any sharing ‘thumbnail’ activity (e.g., a Facebook message preview box) to take up the full width of the screen.
  • As Google+ isn’t widely used, we’ve chosen not to add additional complexity to the Yoast SEO plugin by offering the ability to specify dedicated, schema-based image markup for Google+ images. In most cases, we believe that the default og:image should be a suitable option for Google+ sharing – though we’re keen to hear from you if you find that this is not the case.
  • Unlike most other networks, WhatsApp supports SVG file formats. That means that, in theory, you could achieve optimal sharing for both WhatsApp and Facebook by setting your first og:image to be an SVG, and setting your second og:image as your full-res, large image. However. many other networks only read the first image, and won’t use the SVG file. SVG formats also come with a myriad of security risks, and so we’re not comfortable recommending their general use in this context.

Some undocumented Facebook ‘features’

If you’re feeling particularly geeky, you might also enjoy the following discoveries!

  • In addition to specifying the URL of an image, you can specify its height and width. This has some benefits, including encouraging Facebook to pre-cache the image on the first time it’s shared. However, when you specify multiple og:image tags, invalid/malformed height/width in any of those tags may cause problems with all of your images. E.g., an invalid og:image:height or og:image:width value on an image which isn’t chosen, prevents pre-rendering.
  • Specifying an image triggers the pre-caching process, regardless of whether it’s correct or not.
  • Facebook has different ‘share layout’ sizes, depending on the image size. Small images don’t scale up to a large preview very well, so they provide a condensed layout. However, the share layout size sometimes defaults to accommodating the smallest image from a set (e.g., if you have 10 huge og:image tags, and 1 small one, you sometimes get the small share layout).
  • Facebook also sometimes falls back to the ‘small’ layout if you have too many broken images in your set (as Facebook’s broken image file is only 540×300).
    Test page Jono
  • Setting incorrect image sizes lets you upscale small images in the Facebook debugger, but it doesn’t look like this is respected in the share dialogue. You cannot ‘downscale’ images so far as I can tell. There’s a “upscale=1” parameter in the version of the image which Facebook creates, which I suspect controls this.
  • Large images break! The maximum square image size appears to be in the region of 9200×9200. However, some images with unequal dimensions larger than this, but a lower total area (e.g., 10000×3000) work, as long as a 3:1 ratio or higher. Image test page JonoThis suggests that the boundaries might be based, in part, on a maximum square area of ~95,000,000 pixels.
  • As a minor additional note, when sharing a too-large image directly (i.e., linking directly to the file itself), Facebook just shows a blank image – there’s no fallback file/function used in their ‘safe image’ cleaner in this context.
  • Facebook supports a really interesting feature which lets you build relationships between pages featuring partial/linked Open Graph information. This, theoretically, allows you to ‘inherit’ and/or place centralized og markup elsewhere, reducing page weight. This might be useful for mobile/responsive subdomains, and some internationalization/versioning scenarios, perhaps, if other platforms supported it.
  • Additionally, where cloaking is often a risky tactic in SEO (and frowned upon by Google), Facebook actively suggest (see “You can target one of these user agents to serve the crawler a nonpublic version of your page”) cloaking mechanisms as a method of managing scenarios with paywalls, struggling servers, and other scenarios.
  • Despite claiming otherwise on their documentation, like Google+, Facebook’s crawler appears to ignore or disregard robots.txt directives – it’ll happily fetch Open Graph values from pages which are blocked by robots.txt files.

Some potential “hacks”?

Being stuck having to ‘share’ the first og:image tag between multiple networks is, as we’re discovering, limiting, and not ideal. Sticking to the Open Graph standards, as they’re written, lumps us with all sorts of unfortunate compromises and dead-ends.

So what if we think outside the rules a bit?

If we’re creative, there may be some clever tricks or undocumented approaches which we can use to bypass, confuse, or force certain behaviors from some of the trickier platforms.

Here are a few approaches we’ve considered, but ultimately discarded.

Can we use platform detection to create a dynamic solution?

Imagine for a moment, that every time a page is shared, the platform visits that page, reads the og:image tag(s), and grabs the image.

Theoretically, the Yoast SEO plugin could detect which platform is requesting the page or image, and execute some clever code to serve it the perfect image for its requirements.

That’d enable us to ensure that, regardless of what’s being shared, and where, we could intelligently make sure that the first og:image is the best option for the scenario.

However, the platforms don’t visit every time – they visit once, and save a copy of the tags (and the images) they found for a little while. That length of time, and the scenarios which cause them to revisit and/or update their cached version vary wildly by platform.

Still, theoretically, the Yoast SEO plugin could try and serve the right tags to the platform when they do visit, at the moment when they create their cache. But this approach relies heavily on the platforms identifying themselves when they visit (and on us recognizing their identities), on the website in question having a certain type of server configuration, and on our software doing some tricksy logic around deciding which tag(s) to show.

It might also open things up to forms of abuse by users and platforms who falsify their identities, and it won’t work for any website running any form of advanced caching (where the static pages are served to most visitors).

It all gets pretty complicated, and it’s not a robust enough approach to rely on.

Hidden image techniques

Some platforms, like Pinterest, do more than just grab the og:image tag(s) – they scan the page and look for other images too. That means that we can place sharing-optimized images outside of the Open Graph tags, as part of the page content, and hope that users select these when sharing.

In most scenarios, those images don’t necessarily need to be visible, in order to be discovered. We can place hidden images in the source code of a page.

Unfortunately, this technique doesn’t help in most cases, other than increasing the chance of an image showing up in a selection process. e.g., where Facebook allows you to select a thumbnail from an og:image set, or where Pinterest allows you to choose an image to share from a page when using their browser bookmarklet).

In most scenarios, in-page images are ignored when og:image tags are specified. Hiding images can also cause unexpected side-effects, such as accessibility issues, or slower page loads – especially when sharing the kinds of large images which platforms like Pinterest or Facebook look for in cases like this.

Publish-and-switch techniques

For some platforms, like Facebook, we can ‘push’ a specific image to them, by setting the first og:image and sending a request to their cache-busting URL.

We could adapt the Yoast SEO plugin to set a specific image as the first in the set, then ping the relevant platform’s cache-busting system to update the image. Then we could change the og:image ordering and repeat the process, setting the best image for each platform which allows for remote cache updating

Unfortunately, this only allows us to set the initial image. When their caches expire, we’re back to square one – they’ll use the logic we’ve outlined to pick their preferred images.

To repeat the cache-setting process, we’d need to constantly juggle the order of the tags, in line with the specific cache-expiry times of each platform. This adds a wealth of complexity, and simply isn’t feasible in most site setups (especially those running their own caching solutions), and only a few platforms support this kind of cache-busting.

More importantly, we want to avoid tactical hacks

As we’ve explored, we’re not keen on going to these kinds of lengths to try and fix a problem which could be fixed so much more effectively, and comprehensively, by the platforms themselves, and improvements to the Open Graph protocol.

We’re not adverse to implementing clever, technical solutions to help get the image selection process right, but we’d rather work with the platforms to address the problems at the source, rather than tackling the symptoms across the 8 million+ websites running the Yoast SEO plugin.

We’d love to hear your thoughts on how you think WordPress, Yoast SEO, the Open Graph Protocol and big platforms like Facebook and Twitter might be able to work together better!

Read on: ‘Social media optimization with Yoast SEO’ »

The post Advanced Technical SEO: How social image sharing works and how to optimize your og:image tags appeared first on Yoast.

Last week was all about Mark Zuckerberg’s congressional hearing. There’s no point in denying that Facebook gathers lots and lots of data about individual users. That being said, all kinds of companies and governmental organizations are more than willing to use that data to have successful Facebook campaigns. So, is Facebook evil for gathering that data? And if so, aren’t websites willing to give that information to Facebook not equally evil? 

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO: the #1 WordPress SEO plugin Info

Regulation always lags behind

When radio first emerged, companies sponsored most of the programs. Programs were one big advertisement. We call it a soap opera because a large soap factory sponsored it! Gradually, broadcasters sold advertisements in blocks, during commercial breaks. While some countries have laws concerning advertisement and commercials, most countries have councils that provide guidelines on what is allowed in commercials and what not. Advertisers, media people, and audiences talk with each other and figure out what is allowed and what not. And I think that’s what we need to do with Facebook advertising as well. We need to think, talk and set up new rules for this advertising game. Together. 

What is a tracking pixel?
A tracking pixel is an invisible 1×1 pixel on a website that records the activities of visitors. This pixel collects data about the visitor and shares it with, for instance, Facebook or Google. Often, visitors aren’t aware that the pixel is collecting their information and therefore there is quite a bit of criticism on this way of retrieving data.

The responsibility of companies

Facebook does not force a tracking pixel on websites. Nor does Google. And yet, lots of websites have one of each. That’s a choice. I am not saying it’s a wrong choice per se; I’m just saying it is a choice. And I do think that companies should take some time to think about the consequences of that choice. Do you want to use data gathered from people that visit your website to retarget these people on Facebook? You can’t be sure what Facebook does with that data, but you are handing it over to them.

At Yoast, we did have a Facebook tracking pixel on our website for some time. We did little with it. It did not feel right. It felt as like we were following our audience — stalking them. We discussed the use of the tracking pixel in our company and decided to remove it. This was long before the Facebook hearing.

Ignorance is no excuse

I am afraid lots of companies do not even know whether or not they have a tracking pixel. Marketing departments or agencies may have taken care of it without explaining how such a retargeting campaign works. I do think companies have a responsibility to know and to care. We are talking about collecting data on individuals; it’s valuable data of and about your visitors.

We should educate ourselves and our children. We all witness retargeting, so we should explain how it works. This is not rocket science. My 11-year old figured it out himself. He noticed advertising for the Fortnite computer game wasn’t on my Instagram timeline, while it appeared so very frequently on his. He wondered why. We should make a real effort to explain this stuff to children, to companies and governments. If people understand, we can have a meaningful conversation and raise the questions that matter.

Have the conversation

We have to raise ethical questions. What data are we allowed to collect from our audience? And with what purpose? Do we need to tell our audience about the tracking pixel on our website?

I don’t have the answers to these questions. Different people will come up with different answers. That’s the beauty of ethical questions. I am no expert, but you should read Morton Rand-Hendriksen’s’ article on using ethics in web design if you’re interested in this kind of stuff.

The bottom line is, we all need to think about it. We all need to talk about it. And in the end, we need to come to some consensus together. We need to make — and abide by — rules or laws to deal with these kinds of things.

So.. let’s talk!

Read more: ‘Social media for small business owners’ »

The post Is Facebook evil? Aren’t we all? appeared first on Yoast.

Facebook can be a vital source of traffic for your website. Recently, however, Facebook announced that pages of business, brands, and news outlets would become less important in the news feeds of Facebook users. This could lead to a decrease in your views on Facebook and, therefore, in the traffic from Facebook to your website. What should you do if the traffic from your Facebook page is decreasing? Last week, I already mentioned the importance of SEO. But what else could you do? Here, I’ll share another five strategies to deal with decreasing traffic from your Facebook page.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO: the #1 WordPress SEO plugin Info

Why would the traffic decrease?

Facebook argues that users want to see the content of their friends and families, rather than news and the content of brands in their news feeds. That’s why Facebook is rolling out a big update in which the posts of friends, family and groups become more important and the content of businesses, brands and media will become less important.

Read more: ‘Changes in Facebook make SEO more important’ »

5 strategies to deal with decreasing Facebook traffic

If you notice a sudden drop in reach of traffic from Facebook to your website, don’t panic. Your competitors will probably notice a similar drop. I really think search will become more important, if Facebook will send less traffic to website. People still want to find that present for their mom, or that skirt to wear to a party. If Facebook does not show those in their timelines, they’ll start to search for it in Google. So reinforcing your SEO strategy will be very important. But what else should you do?

Engaging content

Facebook wants to show users content they care about. Content their friends care about. If your content gets a lot of engagement, it’ll probably do better in the news feeds. You should try and get people to share or comment on your Facebook post. But you shouldn’t go overboard; Facebook does not like it when people are pushed to share or comment. Writing high-quality content, content that people want to share with their friends is a good strategy.

Personal accounts

Brands and businesses are not always the most inspiring channels to follow. Lots of people do not want to follow a corporate account. They want to follow real people. Instead of focusing on your corporate Facebook page, you could also focus on spreading the word on the personal Facebook pages of colleagues and employees. Of course, they’ll have to be up for that. And, you should make sure that these personal Facebook pages keep their character.

At Yoast, we have lots of colleagues who are enthusiastic about WordPress and SEO. They often share the SEO posts Yoast publishes on the Yoast Facebook page. That’s a great way to increase both engagement and a  bigger audience.

Influencers

Another way of keeping up the traffic on Facebook is through influencers. Influencers are people who have a lot of followers. They usually post about a specific topic (fashion, celebrities, food). You can reach out to them and ask them to post something about your business on Facebook. For some influencers, you’ll need a budget. For others, offering them your product or service could be enough. Reaching out to (influential) people can be a good way of increasing your reach and traffic on Facebook.

Advertising

The changes Facebook is making will affect the organic (that is the non-paid) reach.  Advertising on Facebook is of course also a possibility. Advertising isn’t that expensive, and you can choose which audience you want to reach (people who like your page, people who do not know your business). I think advertising is a great way to stay visible on Facebook. For a few dollars, you can increase your reach. Make sure you spend your budget on well written, high-quality posts.

Other platforms

If Facebook is giving you a hard time, you could also focus your energy on alternative platforms. Instagram is a good alternative, especially if you’re focusing on a young(er) audience. Don’t forget to check out snapchat either.

Twitter and Pinterest also remain popular. And what about Reddit? It’s hard to say which social media will be most suitable for your business. That depends largely on your business and the preferences of your audience.

Facebook traffic decreasing

Businesses and brands will probably all notice differences in organic reach on Facebook. How significant these differences will be is hard to say. To make it even more complicated, Facebook also changed the way they measure organic engagement. It’s a good idea to keep looking for alternatives for your Facebook-marketing. Investing in SEO seems like an excellent idea! But advertising, writing engaging posts, influencer marketing or other platforms could be great options as well.

Keep reading: ‘Social media for small business owners’ »

The post What to do if traffic from Facebook is decreasing? appeared first on Yoast.

If you promote your website on Facebook, perhaps you’ve noticed some changes in the last few weeks. Or maybe you read about it online. Facebook changed its algorithm; messages of businesses and news outlets will become less important. In this post, I want to explain the consequences of the changes in Facebook’s algorithm. On top of that, I want to propose some strategies to cope with these changes and perhaps a sudden drop in traffic. My favorite strategy? Invest heavily in SEO.

Learn how to write awesome and SEO friendly articles in our SEO Copywriting training »

SEO copywriting training Info

The Facebook algorithm changed? Why?

Facebook’s founder and CEO Mark Zuckerberg announced the changes on January 11th of this year. He writes:

“Recently we’ve gotten feedback from our community that public content — posts from businesses, brands and media — is crowding out the personal moments that lead us to connect more with each other.”

Zuckerberg states that Facebook users want to see the content of their friends and families in their news feeds, rather than that of news outlets and the content of brands.

It’s one of the reasons why Facebook is rolling out a big update in which the posts of friends, family and groups become more important and the content of businesses, brands and media will become less important. That would imply that brands, businesses and media will have a harder time reaching their followers. Their posts will have fewer views and less reach.

What do we notice so far?

It’s hard to say precisely to what extent a drop in organic reach for brands and businesses already took place. It seems like a drop in referrals to media-sites did happen. Media sites seem to get more traffic from Google now than from Facebook.

Blog posts from social media experts (e.g., AgoraPulse; Hootsuite) give the impression that a drop in organic Facebook reach is or will also be happening for brands and businesses. That could well be the case. Reading the announcement of Zuckerberg would imply that especially those brands and companies that have little interaction with their audience will be shown less in the news feeds of their followers.

To make matters more complicated, Facebook also changed the way they measure and report organic reach in the newsfeed. That makes it extra hard to assess whether or not the organic reach of your page has changed.

Read on: ‘How to optimize your Facebook reach’ »

What’s next?

For some websites, this could be a big deal. If you get a lot of traffic from Facebook, this algorithm change could decrease the amount of traffic you’ll be able to attract to your website.

But, to reassure you all: don’t panic. Your business is not the only one that’ll encounter this change. We all have to deal with it.

Some coping strategies

Investing in high-quality and engaging content on Facebook is a good strategy. If your followers reply to your posts and tag their friends, Facebook will probably show your post to many more people. And of course, you can always advertise on Facebook. Advertising on Facebook isn’t that expensive and will allow you to reach your audience, even if your content is not that engaging.

Invest heavily in SEO

In my opinion, the best response to a possible change in the Facebook algorithm is to invest in the SEO of your website. If Facebook is no longer the most important source of traffic to your website, other sources will become (relatively) more important. If people do not see the posts of your business or brand in their news feed, they’ll probably start searching for your products somewhere else. And Google (or another search engine) is the number one candidate for where people will search.

Let me explain how this works by introducing Jane:

Jane is a child psychologist. Her clients come from her local community. She has an active Facebook page. She posts little stories about her clients every day. This Facebook page brought her new clients. People started following Jane; they liked her posts, her tips, and her stories.  When their children needed counseling, Jane was the first one to pop into their heads. Her Facebook posts made sure that Jane’s practice was top of mind. 

The change in Facebook’s algorithm changes a lot in the way Jane got her clientele. Perhaps her Facebook posts will be shown less to her audience. People are still in need of a child psychologist, though. But if they do not find one in their news feed, what will they do? 

When in need of a child psychologist, people start to search for one elsewhere. They could turn to Google and search for ‘Child Psychologist.’  Jane, therefore, needs a kick-ass website with a proper SEO strategy to outrank her competitors. 

If businesses and brands get less attention in the news feeds of their users, traffic from Facebook to their websites will decrease, just as it did with the news. Google could become (relatively) more important.

Conclusion

I think it’s a bit too early to understand the changes in the Facebook algorithm fully. We’ll need some time to do some proper testing and research. I do think businesses and brands will get less attention in the news feeds. I just don’t know how significant the changes will be. It’s frustrating too. The only thing you CAN do is to make sure your website is awesome. Invest time in writing excellent content and create things people want to come to your website for. While doing that, don’t forget to make sure people can find you in the search engines. Time to set up that impressive new SEO strategy!

Read more: ‘Social media for small business owners’ »

The post As Facebook’s algorithm changes SEO becomes crucial appeared first on Yoast.

You are a small business owner with a local target audience. Of course, your local audience needs to find your shop or office, and you want to use social media for that. But, in the plethora of platforms, you just have no clue where to start. So you post something on Facebook, try a tweet now and then, but nothing happens. To small business owners, social media can feel like a struggle every time. And perhaps that last word sums it all up: you are probably just putting your extra time into social media. Whereas investing actual, accountable time in social media will probably pay off way more.

Investing that time deliberately means you need to figure out some things first. Let us help you with that.

Get the Local Premium bundle and fully optimize your local site! »

Yoast Local Premium bundleBuy now » Info

What platforms should I use?

You need to find the social platforms your target audience uses. Otherwise, you won’t be able to reach the right people. There are (at least) two ways to find out what these platforms are:

  • Ask your customers what social media they use. That might be Twitter or Snapchat, but can also be Yelp or Meetup.com, depending on your type of business. Simply ask your customers and see what response you get. If you have hundreds of customers a week, this is probably not the best course of action.
  • Simply start using a certain social platform. And see what happens. I prefer this option over the alternatives. Try everything, keep track of the results, and stop doing the things that don’t work for your business after a couple of months. Don’t give up the next day, but set a goal for yourself and see if you can achieve that.

Read more: ‘Social media strategy: where to begin?’ »

Factors that influence social media for small business

There are many things to keep in mind when you’re thinking about social media plans as a small business owner. Your results will depend on the platform you’ve chosen, but the three factors below also definitely play a part.

Give it time

Keep your expectations in check: your social following won’t grow overnight. Don’t expect people to follow you right after creating a profile. You need to invest that time we talked about. And creating a profile isn’t investing time, that should be done in a few minutes. The actual time investment starts right after that.

Create relevant content

You need to make sure your messages/mentions/promotions/articles are worth sharing. In other words, your content, in general, must be relevant and worthwhile. At Yoast, we try to publish five articles a week, but only if we have something that deserves publishing. We’d rather skip a day than publish something that could backfire on (for instance) social media, due to lack of relevance.

The need for relevance can hold back certain businesses from using social media. People often say:

“But I have nothing worth sharing.”

That’s nonsense. If you are good at what you do, you’ll have projects, testimonials, pictures, and quotes worth sharing. No need to write new blog posts every day, simply find something you’re proud of and share it. And if you do want to start a blog, Marieke has some tips to get inspiration for you. For those who want to dive into blogging, there is always our ultimate guide to blogging.

Don’t give up

The third factor that influences social media for small business is determination. To work properly, social media for small businesses has to be a continuous process of publishing and engaging. Saying “I have tried social media and it’s just not my thing” doesn’t show determination. You may have tried Snapchat, and it’s not your cup of tea. That’s fine. But perhaps Facebook is. And maybe posting on Facebook isn’t for you, but engaging in Facebook Groups might be. I call bullsh*t on the statement that “social media isn’t your thing.” You probably just haven’t found the right medium or platform.

Social media usage for small businesses

Let me go over some social platforms and give you some ideas on how to use them. This isn’t a blueprint for your own social media strategy: the actual use will depend on your type of business and the time you are willing to invest in social media. Here are some ideas:

Twitter

Twitter is an excellent way to send messages and interact with your local community. Two things come in handy here:

  • Hashtags. Hashtags allow you to connect your tweet to an individual subject, without having to add an extensive introduction. It’s being used to tweet about television shows like #GoT or cities like #Seattle. Especially adding your town’s name to a tweet will get you local attention. We can confirm this works even for #Wijchen, the small town where we’re located.
  • Advanced Search. If you are looking for a way to get involved in relevant, local conversations, you should try the advanced search option on Twitter. It allows you to search for any subject you like, in the area you want. See screenshot below.

Social media for small business: Twitter Advanced Search

Facebook

First things first: is your company already on Facebook? I recommend adding it as a local business or place. Facebook has 1.94 billion monthly active users and 1.28 billion daily active users on average (Source: Facebook). Facebook is huge. That alone should be reason enough to add your business to Facebook. And adding your company to Facebook isn’t that hard. It’s a relatively small effort when it comes to social media for small business owners.

Promote your page to your personal friends, get likes, and share updates and photos. Note that for sales posts (“Buy our product!”), you have a better chance of success if you ‘boost‘ your post just a little bit. Boosting can be done for a specified audience, with the location being one of the filters.

Another reason Facebook is an attractive choice for your social media efforts is Facebook Groups. Facebook Groups can be about just about everything. A quick search for Facebook groups about Milwaukee shows how much variety there is:

Social media for small business: Facebook Groups Milwaukee

Pokemon Go, Refugee supporters, Saab, ukulele, auto modelers, running – you name the subject, and Facebook has a group for you. Usually, there are also networking groups for local business people. Just search and find the group that fits your need. Introduce yourself and your business, and engage in discussions. That’s an easy, time efficient way to promote yourself and your company to a local audience.

Instagram

Do you have product images or photos worth sharing? In that case, Instagram might be the social platform for you. Instagram works with hashtags, much like Twitter. I use hashtag apps like Hashme or Tag o’Matic to find the right ones matching my content. Hashtags on Instagram work like a charm when adding local content. An example:

#seattle #seattlelife #seattleart #seattleartist #seattlelove #downtownseattle #spaceneedle #spaceneedleview #spaceneedles #washington #spaceneedleseattle #washingtonstate #seattlewa #seattleskyline #seattlecenter

It took me 30 seconds to find 15 relevant local hashtags using that last app. Instagram allows you to use up to 30 hashtags a post, by the way. Use these to your advantage!

Of course, there are many more social media platforms for small businesses. But I don’t want to overwhelm you with options right now. One thing I would like to mention is that review sites like Yelp and TripAdvisor are also social sites. They shouldn’t be forgotten if your business is mentioned on these sites. Be sure to monitor your mentions there and act on them if needed. That’s also being social!

Make sure your customers find your shop! Optimize your site with our Local SEO plugin and show your opening hours, locations, map and much more! »

Local SEO for WordPress pluginBuy now » Info

Measure your social media efforts

We have written some articles on the various analytics tools for social media networks, and I’d like to point you to these as well. Keeping track of followers and reach gives you an indication of how well your strategy is working. Focus on the numbers that tell you something about engagement, to see what social networks do indeed help you build your community. Here we go:

  • Facebook Insights: Get 30 likes, and Insights will be available. After 100 likes on your page, you can even compare your numbers to the competition.
  • Twitter Analytics: See who your influencers are: the people that like your tweets and have a nice following of their own. Find local influencers and get acquainted with them: ask them to tweet about you now and then.
  • Iconosquare for Instagram: As there still is no proper analytics for Instagram from Instagram, I rely on Iconosquare for that. Use it to find the best time to post, and see what kind of content works best for your business.

Please check out these tools yourself. Keep a keen eye on trends and engagement, as that is the most important thing in my opinion.

The obvious social media strategy works best

I want to leave you with two final thoughts here:

  • Post engaging content, because that is the best way to build an audience. Sounds simple, but it is pretty hard. Don’t be afraid to experiment here. Usually, personal stories lead to the most and best engagement. Having said that, Yoast office life pictures on social media often lead to questions about the awesome features of Yoast SEO Premium (for instance). Keep an open mind and help any customer with whatever question they have, related or not. The engagement counts, not the subject of your post.
  • Your employees are your brand ambassadors on social media. They love your company, enjoy working there and are most likely to share a lot of your social content if not all. Your employees create that local snowball effect. After all, most of their connections on Facebook are probably/usually living in the same geographical area as you. Acknowledge this, and stay aware of the value of these ‘in-house’ shares.

That’s it for now! I’m sure I’ve convinced you that even as a small business, investing some time and effort into your social media strategy will pay off. So go for it! And feel free to drop any questions or thoughts about social media for small business in the comments!

Keep reading: ‘Ultimate guide to small business SEO’ »

Social media endeavors should be a part of your SEO strategy. As social media usage increased in popularity, Google and other search engines couldn’t ignore them any longer. This means that your site’s popularity on social media ties in with your SEO more and more. The reason for this is simple: if people talk about you, online or offline, you’re relevant to the topic at hand. In addition to that, you’ll want to know about these conversations. In this post, I’ll give you some fundamental tips on how to use social media.

How to use social media

Below are some tips you can use in order to set up or to improve your social media strategy:

1. Keep your account alive

The most crucial advice in the use of social media is that you need to keep your account ‘alive’. Make sure you post on a regular basis. Sharing your new blog posts is a good start, but also let people know what you’re working on or what interests you. If you go on vacation, schedule posts for the time you are away, or at least let people know when you’ll be back. And, after a while, you could repost older content to draw people to your website with existing content.

2. Write captivating excerpts

When you decide to share your blog post on social media, make sure to select or write a short and appealing excerpt in order to draw people in. You could, for instance, choose the most important sentence or the main point of your post. Or you could simply choose to share the introduction of the blog post, if you feel that is captivating enough. You want this piece of text to get people to click on the link and read the whole post. And do ensure that people can easily navigate to other pages on your website, once they are there.

Our SEO for WordPress eBook guides you through every aspect of Search Engine Optimization »

SEO for WordPress$ 25 - Buy now » Info

3. Diversify

You can share different types of posts on your social media account. As mentioned in point 1, you could share your blog posts, but you could also share short news items, videos or simply some (behind-the-scenes) pictures. These kind of posts can make our brand more fun and personal.

In order to decide which posts do well on social media, you should analyze the number of views, shares and likes. Of course, we’d advise to share types of posts that receive a lot of views and likes more often.

4. Handle comments

If you share your posts on social media, you could also receive comments. Don’t forget to monitor this. You should handle these comments swiftly.

Read more: ‘How to handle comments on your blog’ »

5. Use awesome illustrations

For some social media (Pinterest and Instagram) it is all about the illustrations. But also on Facebook visual content is really important. They make your post stand out from all of the other posts in someone’s timeline, and can boost clickthrough.

When you use Yoast SEO Premium you can check what your blog post or product page will look like, before sharing it on Facebook and Twitter. See how easy that is!

6. Be part of the community

If you’re active in a certain community or niche, you’ll soon discover other interesting people in that area that your audience follows. Follow them too and interact with them, this could help your and their audiences grow.

7. Add metadata

Smart use of (hash)tags can also help your growth immensely. For instance if you are at an event, include the hashtag for that event in your post, so everyone searching for that event will come across it. There are also hashtags for certain interests or technology. Some people might even retweet everything that is posted in a certain hashtag, which is a great way to boost your post. But don’t go overboard! Nobody likes a post that is filled with all kinds of random hashtags.

Conclusion

Social media is a key aspect of every SEO strategy. Setting up a decent social media strategy can be hard and will ask for a bit of creativity. And, it’ll definitely consume much of your time. But, it’ll be worth it! And if you think about it, social media and blogging are very similar in many aspects.

Keep reading: ‘Social media strategy: where to begin’ »

To help your blog gain more readers, you can make use of social buttons which allow your current readers to share interesting posts on their social media accounts. But how should you go about implementing them? In this post we’ll explain how we’ve done this at Yoast and will give you some pointers on how to get started.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

What are social buttons?

For those who don’t know what social buttons are: They’re the buttons that you’ve seen around the internet that are usually placed somewhere below a blog post that allow readers to share articles on various social media platforms. This is great for gaining extra exposure and thus also getting more traffic to your website.

At Yoast, our social buttons look as follow:

Social Buttons

How did you implement these social buttons in WordPress?

Now you might be wondering about how these buttons were implemented. Your initial thought might be that this was added with some kind of plugin. However, at Yoast we decided to add it to our theme. This gives us extra control in how we style and display things. Of course we could have decided to add these buttons to a plugin, but the added benefit would be minimal for us.

We’ve decided to place the code for the social buttons in a template partial. This way we can easily embed it throughout the website without having to drastically edit template files or having to embed the buttons manually per post.

Here’s a basic example of how we implemented a social button for Facebook. Note that not all the code is actual production code and has been replaced with psuedo-code to make implementation easier to understand.

<?php
// File: <theme_folder>/html_includes/partials/social-share.php
function facebook_social_button() {
$article_url = get_article_url(); // Psuedo-code method to retrieve the article's URL.
$article_url .= '#utm_source=facebook&utm_medium=social&utm_campaign=social_buttons';

$title = html_entity_decode( get_og_title() ); // Psuedo-code method to retrieve the og_title.
$description = html_entity_decode( get_og_description() ); // Psuedo-code method to retrieve the og_description.
$og_image = get_og_image(); // Psuedo-code method to retrieve the og_image assigned to a post.

$images   = $og_image->get_images();
$url = 'http://www.facebook.com/sharer/sharer.php?s=100';
$url .= '&p[url]=' . urlencode( $article_url );
$url .= '&p[title]=' . urlencode( $title );
$url .= '&p[images][0]=' . urlencode( $images[0] );
$url .= '&p[summary]=' . urlencode( $description );
$url .= '&u=' . urlencode( $article_url );
$url .= '&t=' . urlencode( $title );
echo esc_attr( $url );
}
?>
<div id="social-share">
<div class="socialbox">
<a rel="nofollow" target="_blank" data-name="facebook" aria-label="Share on Facebook" data-action="share" href="<?php facebook_social_button(); ?>">
<i class="fa fa-facebook-square text-icon--facebook"></i>
</a>
</div>
</div>

The above code could be used in a similar fashion for other social media platforms, but it can vary greatly in terms of URL structure. We advise you look at the documentation of your desired platforms to ensure compatibility.

To include these social buttons in your blog posts, open up single.php in your theme’s folder and paste the following snippet where you want the buttons to appear:

<?php get_template_part( 'html_includes/partials/social-share' ); ?>

That’s it! If you don’t want to collect interaction data from these buttons, then this is all you need. If you want interactions to be tracked, then read on.

Tracking Interaction with Social Buttons

Having nicely styled social buttons in your website is one thing, but tracking the actual interactions with them would be even better.
At Yoast, we use JavaScript to ensure the tracking of the social media sharing is done correctly so we can easily see what social media platforms are popular among our readers.

The code for this is relatively simple and depends on the Google Analytics Tracker being properly implemented into your website. Assuming this is the case, the following code will be of great help:

jQuery( document ).ready( function( $ ) {
	$( '.socialbox a' ).click( function( e ) {
		e.preventDefault();
		
		if ( typeof __gaTracker !== "undefined" ) {
			__gaTracker( 'send', 'social', $( this ).data( 'name' ), $( this ).data( 'action' ), document.querySelector( "link[rel='canonical']" ).getAttribute( "href" ) );
		}
	});	
});

Get the most out of Yoast SEO, learn every feature and best practice in our Yoast SEO for WordPress training! »

Yoast SEO for WordPress training$ 99 - Buy now » Info

The above JavaScript snippet passes in some of the extra information we passed along to the anchor tag. This extra information can be identified by the data- prefix and is retrieved by calling $( this ).data( [...] ). This method allows us to easily extend the social-share div and add more buttons.

If you want more information on how Google tracks this information, you can read about it here.

Conclusion

As you can see, it’s not very difficult to add social buttons to your blog. Even tracking them in Google Analytics has become a breeze compared to past implementations.

All that’s left is to go and implement the buttons and allow your readers help promote your posts. Good luck!

Read more: ‘Social media optimization with Yoast SEO’ »

Literally, metadata is data that says something about other data. You can use particular metadata to send information about a webpage to a search engine or a social media channel, and thereby improve your SEO. In the first two posts of this metadata series, we discussed meta tags in headof your site and link rel metadata. In this last episode, we’ll scrutinize on metadata that can improve the sharing experience on social media. And last, but definitely not least, we’ll describe why metadata likehreflang declarations are a necessity if your business serves multiple languages and/or countries.

Posts in this series

Metadata #1: meta tags in the head

Metadata #2: link rel metadata

Metadata #3: Social and international

Social metadata

We have written about Open Graph and Twitter Cards before. These tags, or this information, is definitely metadata. It will help you tell social networks like Facebook and Twitter what the page at hand is about in an orderly, summarized way. It will allow you to control the way your articles or pages are shared.

OpenGraph

OpenGraph is a standard used by a number of social networks like Facebook and Pinterest. If you’re using our Yoast SEO plugin, these tags are added to your page automatically, and of course, you can control the contents of these OpenGraph tags (in the social section in our meta box below on edit pages).

Twitter Cards

The same goes for Twitter Cards. They add metadata to your pages that are convenient for Twitter to read and understand. Our plugin adds Twitter Card metadata as well. If there is no Twitter Card data, Twitter will fallback to OpenGraph data, but you obviously want to make things as simple as possible for that Twitter.

If you’d like a preview of how your page, shared on either Twitter or Facebook would look like, please check our Yoast SEO premium plugin, as that one adds these social previews right in your WordPress backend.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

But wait, there is more important metadata!

If you thought that all the things previously mentioned are all the SEO related metadata for your website, think again.

hreflang tags to indicate other languages

For those of you that have multilingual sites, this one is really, really important. If you have a site or page that is served in more than one language, be sure to add hreflang tags to your page.

With hreflang tags, you can indicate the language variations of the page at hand. That looks like this:

<link rel="alternate" href="http://example.com/" 
      hreflang="en" />
<link rel="alternate" href="http://example.com/en-gb/" 
      hreflang="en-gb" />
<link rel="alternate" href="http://example.com/de/" 
      hreflang="de" />

As you can see, these can be used for variations of the ‘same’ language as well, like the British English in the second line. Note that hreflang isn’t a substitute for the rel=canonical we discussed. Be safe, implement both. More information on how to implement hreflang can be found here.

Alt tags

If you think about it, any extra attribute you assign to an image, like the alt or title tag, is metadata. Google uses it to scan the page and see what’s on there, so be sure to add these alt and title tags and optimize ’em.

Microdata for breadcrumbs

For a better understanding of your site’s structure, you should add some kind of microdata to your breadcrumbs. That can be done by adding schema.org data for breadcrumbs, for instance by JSON-LDRDFa is another option to add this type of metadata to your website. Again, install Yoast SEO for WordPress and this is taken care of.

Language declaration for the page at hand

Let’s wrap this long list of metadata up with another language related metadata element. At the very top of your HTML, we find the, indeed, html tag. This one wraps all the code of your <head> and <body> and can contain the language of the page at hand. That is done like this:

<html lang="en">

Makes sense, right. Some might say that adding a meta tag for Content-Language is also an option, but following the W3C guidelines, that meta tag should not be used anymore. Use the lang declaration in the html tag instead.

That concludes this series with a lengthy list of metadata you can use to tweak your SEO. I am confident you can come up with even more metadata, as there is plenty. Feel free to leave your additions in the comments!

Read more: ‘Metadata and SEO part 1: the head section’ »

In Yoast SEO Premium 3.2, we introduced social previews. It works much like the snippet preview people have come so used to. As the snippet preview does for search rankings, we think social previews will improve your social workflow.

Social previews in Yoast SEO Premium

Which picture will Facebook pick?

When you publish a post and you haven’t specifically selected a Facebook image in our plugin, you don’t know which picture Facebook will use. Yoast SEO has a big hand in this process: it determines which images it “gives” Facebook with its metadata. When you specify a Facebook image, it specifies just that image. When you set a featured image for your post, that’s the image it will feed to Facebook. If you have no featured image either, it will grab the images from your post. Our social previews take the guesswork away and show you what Facebook will use.

It looks like this for this post (because I haven’t specified a specific Facebook image yet):

Facebook preview of this social previews article, showing the featured image and the meta description being used

As you can see this allows me to preview what my post will look like when shared on Facebook. We have a similar preview for Twitter. Both previews also have edit fields below them, allowing you to change the individual Facebook and Twitter metadata. That looks like this:

Twitter social preview with edit fields

Social metadata fallbacks in social previews

As you can see in the image above, you can upload a specific Twitter image. The one you’re seeing in the preview is the Facebook image I uploaded. If you only specify a Facebook image, Twitter will use that image too, which often works just fine. The description underneath that actually comes from the meta description.

Social networks all need similar data. All of them seem to fall back to Facebook OpenGraph data when no specific data was specified. Twitter, Pinterest and Google+ all use Facebook OpenGraph metadata. WhatsApp uses OpenGraph too, when sharing URLs in the messaging app. This is why Facebook OpenGraph is such an important part of our plugin. The previews will show you exactly what’s being used and what your post will look like.

Read more: ‘Social media optimization with Yoast SEO’ »

Social media like Facebook allow you to reach people that might be interested in your stuff. You’ll reach people who like your Facebook page, and you might even reach the friends of people who like your Facebook page. Some posts, however, seem to be much more successful than others. Why do some of your posts on Facebook get many likes, shares and comments, while others are largely ignored by your audience? In this post, I’ll help you optimize your Facebook reach.

How to optimize your Facebook reach

Best practices for increasing Facebook reach

If you want tips to be successful on Facebook make sure to read this blog post by Neil Patel. Neil analyzed 1 billion Facebook posts and his tips are really helpful to start optimizing your own Facebook page. Although we can learn a lot from his best practices, it’s very important to remember that your Facebook page and your audience are unique.

As you are trying out his tips, I would strongly advise you to analyze the reach and the engagement of your own Facebook posts. What posts does your audience like? Which posts reached a lot of people? And which posts were hardly noticed? What seems to work on your own Facebook page? And what can you learn from that?

Start analyzing regularly

If you want to be able to predict which posts will increase your reach and engagement on Facebook, you should start by checking out the Insights tabs on your Facebook page. And make sure to check out these stats regularly.

Look into the reach of each post (the number of people the post was served to) and the number of likes, shares and comments. If you do this on a regular basis, you’ll begin to notice patterns.

Read more about Facebook Insights in Michiel’s post!

Important aspects to consider

Whether or not a post is successful on Facebook could be caused by countless things: the length of the post, the topic of the post, the day of the week. But it could also be caused by world events, the weather or by pure chance. You won’t be able to fully control or predict your success. However, analyzing aspects of previous posts should give you some clues about what works for your audience (and what doesn’t).

Time and day of your post

The timing of your post matters. For some time slots (like at night) competition is low, for other time slots your audience will be more available and engaged. It’s a matter of testing which day and time will be most effective. For Yoast, weekdays are much better than the weekend. This will definitely depend on your audience.

Topic of the post

You’re most likely blogging about various topics and your audience will like some of them more than others. Check what posts do well with your audience; what topics are the most successful? Try writing more posts about those topics. Additionally, you could try to make your other posts look a bit more like the ones that are successful.

Purpose of the post

Closely analyze the purpose of your post. Did you write this post to inform your readers, or to entertain them? Or, were you trying to sell your stuff?  For Yoast, more “salesy” posts seem to get far less reach and engagements. Posts in which we announce a sale or introduce a new product seem to be the least successful ones in our timeline. 

Illustrations or videos?

Make sure to study the reach and engagements of posts with different kinds of illustrations, photos and videos too. Do posts with illustrations differ in their reach compared to posts without illustrations? Do posts with video get more likes or shares compared to the ones without?

Conclusion

To really understand what a successful Facebook post looks like, you really have to dive into your Facebook Insights. We’re currently taking our analysis a step further by doing an extensive research on what works on the Facebook page of Yoast.

For all of you, the ability to predict which posts are going to be successful on Facebook will also be very valuable. So go ahead and check out your Facebook Insights and start analyzing your posts!

Read more: ‘Facebook Page Insights explained’ »