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.

Back in 2012, Twitter introduced a system called Twitter Cards which allows site owners to display enhanced tweets on their websites using a syntax very similar to that of OpenGraph. Thanks to this new system, Twitter can show nicer looking tweets, including ones containing media such as images, audio and video.

How does it work?

As mentioned in the introduction, Twitter Cards make use of a very similar syntax to that of OpenGraph. Twitter has some properties that are specific for their platform which you can see in the following snippet:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yoast"/>
<meta name="twitter:creator" content="@michielheijmans"/>

The twitter:card property is required and defines the type of card you want to show. You have four flavors here: summary, summary_large_image, app and player. What the difference is between all these different cards can be found in the documentation.

Both twitter:site and twitter:creator are optional and point to the Twitter account of the website publishing the content and the author.

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

Yoast SEO for WordPress pluginBuy now » Info

OpenGraph

When it comes to parsing URLs, images and descriptions, Twitter makes use of existing og: properties. You can overwrite these og: properties with Twitter specific ones, but most of the time this isn’t something you’d want. If your goal is to display completely different information on Twitter, then these tags allow you to override default behavior.

There’s one thing to take into account when using both the Twitter and OpenGraph options. Twitter uses name to specify the attribute whereas OpenGraph makes use of the property attribute. Take this into account if you plan on manually implementing Twitter Cards.

Implementing Twitter Cards

As with other meta tags, you need to add the Twitter tags in the <head> of your website and ensure that the values are set properly on a per-page basis. This can quickly becomes an unwieldy task for a blog, so we built a feature that generates the proper meta tags for you.

Twitter Card settings in Yoast SEO

Twitter Card input field in Yoast SEO

Want to change the look of the Twitter Card for a specific post or page? Just use the form on the Social tab. Here you can tweak specific properties to your liking.

Additionally, our Premium plugin contains Social Previews which display what the Twitter Card will eventually look like based on the current page or post:

twitter cards in yoast seo premium

Twitter Card: Preview your Twitter post with Yoast SEO Premium

Twitter Cards are a great (visual) addition and can help increase traffic to your website!

Read more: ‘SEO basics: how to use social media’ »

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’ »

Setting up your website is step one, promoting it is step two. The basis of that should be great content, and social media is your handy, free platform for this (next to all the great links you have gathered for your site, of course).

Social media, for us, is focused on Facebook, Pinterest, YouTube and Twitter. Over the next couple of weeks, I’ll guide you over the analytics pages of these platforms. Thijs already wrote about setting up a strategy and picking an audience, these next posts will focus on what stats and extra information these platforms themselves provide. Much like the Webmaster Tools series we did last year. This post is about Twitter Analytics.

Tip: open your Twitter Analytics so we can guide you through the most useful stats!

Twitter Analytics dashboard

You can find your Twitter Analytics dashboard at analytics.twitter.com. It starts with a summary of the last 28 days:

Image of Twitter Analytics 28 day summary

How does this help? The large numbers are nice, but what really is helpful is the percentage next to these numbers. How did your numbers change compared to the previous 28 days. Audience (‘tweet impressions’) went up a lot in this case, which might have been triggered by the start of our Yoast Academy’s Basic SEO Training. Looking at profile visits, the drop isn’t that important to analyze, as personally, I could not care less, and more important, the numbers of followers shows a steadily increasing number, also indicated by the small graph below the numbers.

The 28 day summary is a quick overview, and the trend is more important than the numbers.

This month in Twitter Analytics

I like the second section a lot more. Twitter Analytics shows all kind of details about your tweets and following. Here’s what Twitter Analytics tells us about last month:

Twitter Analytics example view Last Month

Now I have to be honest: this dashboard is a nice magazine-style summary of incidences. This tells me just about nothing. It’s what’s beneath all these instances what matters. Every section in that screenshot has a ‘View [something]’ link to all the good stuff.

Tweet activity

The ‘View all Tweet activity’ link in Twitter Analytics brings you to a nice overview per period. You can see the number of tweets per day, and the impressions:

Twitter Analytics - tweet activity graph

Right below that graph, you’ll find details per tweet, like your most engaging tweet:

Twitter Analytics example of top tweet

If you’re goal is to build your audience, ‘Tweets & replies’ gives you a nice overview of what happens in terms of replies and favorites. Clicking the tweet itself gives you some more information as well:

Twitter Analytics: Tweet Details example

I think the ‘Detail expands’ is an interesting number. Probably depending on the Twitter client, right. And should we call that engagement already?

‘Favorites’ is another number that has become fuzzy for me over the past year or so, as I know quite a few people that use the Twitter favorite option to trigger IFTTT scripts to add the tweet to Buffer for sharing it on their own timeline as well. I might just made that number even fuzzier, if I have given you an idea :)

Audience Insights

Although I think ‘Audiences’ is a very interesting section, it has a basis in how much Twitter knows about all of us. You might question the figures here, obviously. But when our Audience insights in Twitter Analytics shows me this overview below, I think they know quite a bit about us all:

Twitter Analytics: Audience Insights graph

Our followers are mostly interested in Technology, communicate in English, are Online buyers and Ethnic explorers. OK, that last one confused me a bit. Apparently, these are people that have a wide range of international foods on their shopping lists. I’m glad Twitter provides handy mouse-overs:

Twitter Analytics: audience insights mouse over example

Not sure I’m glad they used this kind of segmentation, as that tells me little about our business.

You can also see what percentage is male of female, household income, net worth and if people are married. If and what education they have, and if they are home owners or not. Not sure how reliable these figures are, as mentioned.

There is also a list of wireless carriers on this tab – anyone using that list for any purpose? That one seems to be added for the sole reason that this data was available. I think Twitter is a bit off with this one. All the rest on this page is related to the audience, carrier is related to technology, IMHO.

This one seems tricky as well: on the ‘Lifestyle’ tab, Twitter Analytics tells me the political party affiliation. I wouldn’t base my tweets on that graph. I am sure there is a nice complicated algorithm calculating this, but it seems hard to be spot on with this one. Again, it might help you find a trend in this, though.

Twitter ups its game on the ‘Customer behavior’ tab: it shows the number of VISA and MasterCard users, Aftermarket auto buyer types, and even what percentage of your followers buys cheese. Infotainment? It feels like this is it.

However, there is an interesting bit of information hidden on the ‘Mobile footprint’ tab:

Twitter Analytics: device categories overview

If you are linking your site’s articles on your Twitter timeline, this is actually valuable information. And I understand that this information can be obtained easily. If the majority of your Twitter visitors is using Android devices, and these click to your website from Twitter, test your website on Android. A responsive website should take care of this, obviously.

Card Analytics

I saved this one for last. Following my post on optimizing product pages using Open Graph and Twitter Cards, this section is all about that last one.

Twitter actually provides nice insights on how your cards are doing:

Twitter Analytics: Twitter Cards snapshot

That’s just a quick overview. The rest of the page is even more interesting:

  • There is a trend graph to indicate how much Twitter Cards affected impression and clicks. Twitter Cards make all the difference. Just check your own stats and see. To me, it means investing in things like illustrations or great photography for your posts and thus tweets pays off. There is a reason we hired an additional illustrator recently. That also goes for Facebook, by the way. We see a lot more engagement on posts that have illustrations compared to those that don’t.
  • Twitter Analytics also shows what type of card works best for improving clicks. Twitter Analytics compared ‘everyone’s cards’ to ‘your cards’. The Player Card seems to perform best for everyone. Number two and three are summary cards (with or without image). These can both be added to your website using  Yoast SEO for WordPress. Be sure to add these cards.
  • There is a nice overview of the links that performed best:
    Twitter Analytics: twitter cards, best links overview
  • There is an influencers overview. As Twitter puts it: “Find out which accounts are already impacting traffic to your website and start a conversation with them.” Cindy, Neil and Michael, thanks for tweeting / replying / mentioning us. Appreciated.
  • New wine in old bags. If one of your tweets performs above average, you might consider retweeting them. Twitter shows you a nice overview of the tweets that drove the most clicks.
  • Finally, and perhaps oddly, we find an overview of the sources our influencers used to send tweets. Loads of you are using Hootsuite (we are for team collaboration, by the way), and too little are using Tweetbot (which I use personally). Both also come with their own overview of twitter analytics.

Note that all the data that is available for URL clicks, is also available for your retweets. Talking about Twitter Cards, the Photo Card seems to help retweets as well, for instance.

Be sure to check regularly

I think this article covers Twitter Analytics for now. Be sure to check these stats regularly and see what changes. See what tweets perform best and if you are still roughly reaching the audience you are looking for. Social media like Twitter and Facebook are getting more and more intelligent and I expect data to be become more valid and trustworthy in a fast pace.

As always, be sure to drop your two cents in the comments below. Let me know if I missed anything, our readers will thank you for even more insights!

Joost's weekly SEO recapI’m a bit feisty this week. I apologize upfront. We’ve been doing tons of website reviews after last month’s sale and it had me quite busy. But there’s good news this week if you’re looking for a job as an SEO: here’s your chance! Google is hiring one. SEO’s all over the web had fun with that this week, but it shouldn’t be much of a surprise. The only thing Google just did is acknowledge that SEO is worth doing. So much that they hire people to be in charge of it. Luckily, there was more!

Twitter blocking robots? Guess not.

There was quite a bit of fuzz on Twitter the last few days about Twitter blocking robots.txt and how bad this was:

Luckily my buddy Martin MacDonald looked for two more seconds and discovered this wasn’t exactly the case. Why Twitter doesn’t just 301 redirect www.twitter.com to twitter.com is completely beyond me. That would be the only real SEO solution in my (not so) humble opinion.

Penguin is months away

In not so surprising news (as it’s bloody hot here and penguins aren’t known for their love of heat), Google’s Penguin update apparently is months away as they are “working on making it real time”. We’ll see.

Google sends notifications, then wonders why

In another not so surprising move, Google is starting to realize that some messages are not making much sense to each site owner. They send out a ton of hreflang messages this week, only to realize not everyone might be interested. So now they’re asking for your feedback on how you like the messaging coming out of Google Search Console.

Lots of us would probably rather have them fix issues like the current issue with index numbers. And maybe help their colleagues on fixing the referral spam in Google Analytics.

Flash is dead, bye bye!

Firefox is now blocking Flash by default. Flash was always a stupid idea, but in the off chance that you’re still using it on your site, you probably should stop for real now. I mean, we have animated GIFs for annoying content!

Flash is dead

XML Sitemaps are hard

Gary Ilyes from Google tweeted about how to properly format the last modified time in XML sitemaps:

His answer also states “in most of the cases it’s ignored by search engines”. We knew that, but it doesn’t hurt repeating it. The same is true for the priority field, which is the reasons our Yoast SEO plugin doesn’t have a ton of interface to change them. They simply don’t matter that much.

That’s it, see you next week!

joost signature

This post first appeared as Weekly SEO Recap: Newsflash! on Yoast. Whoopity Doo!

3300-featured

3300-featured
Shhh! …

What follows is something you surely haven’t heard before! In order to truly grow your business you need to:

Step #1
Step #2
Step #3
Step #4
Step #5

Okay okay, just kidding. These – and similar ideas – have truly been beaten down to death on the web as it is. Really, how much Facebook marketing advice does the world need?

But I digress, so let’s get back on track!

 
… scroll down for 14 non-obvious marketing tactics that work …
What I have for you here is a set of marketing tactics that are hopefully not that obvious. (Although, it’s very likely that you’ve heard of some of them before.) But what’s more important is that not all of them come from me.

I’ve been kind of fascinated with this topic lately. So I’ve decided to do a bit more research and find some truly inspiring stuff, which I can then expand upon and share here. So, the ideas themselves are something I’ve stolen from the likes of Neil Patel, Forbes magazine, Jeremy Clarkson, John Jantsch, and a bunch of other people.

1. Be a true-blood guy (or gal)

mma

Everyone’s way too nice on the web these days if you ask me!

No, wait. This doesn’t sound right.

Anyway, what I mean is that there’s a general belief circulating around that we should always be nice to all people (no matter what they say about us) and that if we have a critical – yet not fact-based – opinion, we should keep it to ourselves.

Bollocks.

This works against the one thing we probably all want to achieve – getting our personal brand across.

For the life of me, I can’t remember who said it, but it was something to the tune of:


‘People come for information, they stay for personality.’ – Who said this?
Click To Tweet


And the problem is that if you want to be all things to all people, you will probably end up attracting no one.

Jeremy_Clarkson
Jeremy Clarkson (twitter) is a great example here. He’s built the popularity of his show – Top Gear – to a worldwide phenomenon. Do people watch it for the cars? Sure, some of them do. But most of them watch it because it’s incredibly entertaining, and cars just play a supporting role (Oscar worthy role, but still).

For example, here’s what he once said about Sarah Jessica Parker:

“People think ‘oh she must be pretty, she’s on television’. She isn’t – she looks like a boiled horse.

Did he offend some people? Probably so. Did he make thousands of people around the world laugh? For sure.

So what I’m trying to convey is this: Be real. If you want to say something, say it. It’s easier to ask for forgiveness than to ask for permission.

More cool resources just like this in your inbox.
Let’s grow our businesses together!

2. Create products and give them away for free

salesman

I should clarify. If you’re in the physical products business then it’s probably more difficult to give those away for free. Like, for example, giving away shoes or refrigerators. But in the digital market, there’s no reason why you shouldn’t.

Let’s take a look at what happened with Quick Sprout a while ago. Previously, the site’s homepage was the blog (I think). Now, there’s an online SEO tool.

Neil – the founder of the site – said that the tool cost him $100,000, yet he decided to make it available for free.

Wow!

And yes, he did make it profitable eventually. Neil has a great funnel set up in the background. In short, everyone who visits the tool is also exposed to Neil’s Pro membership.

qs

Although Neil is clearly far ahead, I can mention a small success of my own too. It’s my Social Share Starter plugin. Since its release, it has generated hundreds of new subscribers and opened a couple of doors for me in terms of WordPress software projects.

“Free is the most powerful word in the English language.”

3. Break the pattern by publishing unusual content

pattern

At one point, virtually all websites hit a plateau and become predictable.

And don’t get me wrong, in a way, predictability is a good thing, especially if your content is predictably exceptional.

However, introducing something new every once in a while and breaking the pattern, so to speak, can work even better.

Here are some ideas:

  • If you’re known for publishing ultra-long content, publish an image post with a quote on it and no additional text whatsoever. See how it goes, how many shares it gets, and so on. Like this one:
you are right
  • If you’re mainly publishing text-only posts, try investing in an infographic.
  • If you’re publishing just your own perspective on things, try inviting someone who has a reputation in your niche and do an interview.
  • Need more ideas? Try either of these 52.

The idea behind this is to check if what you’re currently doing really is the best use of your publishing calendar, and if maybe your audience would actually resonate with something else even more.

This knowledge is something you can only get through experimentation. No case study on the web will give you reliable data whether you should or shouldn’t try Technique X in your content game.

4. Focus on just the essential info and invoke curiosity

curious

We often feel the urge to go into incredible detail when describing our services, products, or the thing we do for a living in general.

As it turns out, this doesn’t always work. Actually scratch that; it rarely works. The thing is that people don’t really need all that information when making a purchase decision.

For example, consider the following. Do you know what components your iPhone was built with? Do you know what’s the processor, who’s the RAM manufacturer, how many mAh does the battery have, and so on?

Most likely, unless you’re an iPhone freak, you have no clue, yet you still wanted to buy it when it came out.

Your clients only need to know the essentials – how your product is going to enrich their lives.
It’s a similar story with all kinds of products. Your clients only need to know the essentials – how your product is going to enrich their lives.

And it’s not just me talking here. Neil Patel reports this to be the case as well. At one point, he shared that changing the landing page on his private site from long-form, in-depth content, to just the essential short form has given him 318 percent more leads.

It’s kind of sad, but people really don’t care about us or our stories. The only thing they want to know is how your content can benefit them. (Or maybe that’s not sad at all?)

5. Dedicate just as much time to writing your headlines as you do to writing your content

headlines

Okay, I’m exaggerating a bit. But please bear with me.

It’s a known fact in the world of publishing that headlines account for around 80 percent of a given publication’s success.

What this means in plain English is that headlines are more important than content. And it makes sense when you look at it.

At the end of the day, if your headline isn’t a success, no one will even get to your actual content.

So here’s what I encourage you to do:

Write 25 different headlines for every piece of content you create.

Sounds crazy, doesn’t it?

This is not my idea, and to tell you the truth I was also shocked when I first saw it.

The reasoning behind it is that writing the first 5 headlines is ultra-easy. Writing the next 10 gets difficult, but you can still get through it. However, writing that final 10 will get you bleed through your fingertips.

It’s those final 10 headlines that can give you some gems – things that are not obvious at all. Things that you’d have never come up with if you hadn’t used all the common ideas on the first 15 headlines.

The secret is that people tend to resonate with things that break certain patterns.

6. Steal ideas from Reddit

reddit

Reddit isn’t called the front page of the internet for no reason. It’s also the best way to waste a Saturday afternoon, but that’s another story.

Reddit is an extraordinary source of content ideas that are interesting to people at this very moment. Now, I don’t encourage you to steal content in any shape or form. But I do encourage you to steal ideas. So if something works on Reddit, maybe it can work in some other form on your site as well.

Here’s how you can implement this:

  1. Look for things that are fast growing in popularity.
  2. Try identifying something about them that you would be able to do or present better.
  3. Release your own version.

I know that such a description is a bit generic, but I leave it up to you to find exact applications.

I will give you an example though. Here’s a popular entry from Reddit’s DIY section: http://imgur.com/a/fD4e4. It’s a guitar-shaped cat playground. The idea is great. The execution is okay-ish. But for someone in the carpentry business, building something that’s of better quality shouldn’t be a problem.

7. Invest in relationships with potential clients by doing free work

free hugs

First off, I like getting paid for what I do just as much as the next guy. That being said, it’s kind of impossible to make every hour of your work billable, especially if you’re just starting out.

The big problem here is trust, or lack thereof.

In other words, people don’t really trust your expertise enough to pay you for your services if you’re new to the market. To overcome this, you can do either of two things:

(a) Offer your services really cheap – so your clients don’t have to trust you all that much because the investment is small.
Not recommended.
(b) Offer your services for free.
Recommended.
The trick here is that if you start by offering your services cheaply, you will find it very hard to increase your rates later on – the clients will resent it.

On the other hand, if you start offering your services for free, people will understand that it’s not a permanent thing, and that you are likely to ask for money pretty soon.

However, what’s different now is that you’ve already built trust with them and proven that you can deliver results. This entitles you to ask for higher rates.

Speaking from my personal experience, offering free advice is what got me most of my initial freelance writing gigs. I talked about it in one of my guest posts at Be a Freelance Blogger.

8. Be a show off

ferrari

Note. Showing off isn’t in all people’s nature. And there’s nothing worse than a pretender who wants to show off but doesn’t really know how or why, so they just end up looking cheesy. So in short, if you don’t feel confident showing off, please skip this point.

Showing off is a very interesting marketing and promotion method. On one hand, it’s very easy to appear like a jack ass who’s just bragging about a new watch or some other gizmo. But on the other hand, it can reinforce your message and present a specific persona that resonates with your audience’s wants.

This can work especially well if you’re in the coaching business, or in consulting. The idea is to make people think, even subconsciously, “Hey, this guy has what I want to have. Maybe if I listen to what he has to say, I’ll get there too!”

Whether it’s a valid thought or not is another thing.

9. Reuse your existing results

recycle

During the course of your online career, you will naturally have better and worse days, better and worse content, that’s only natural.

But there’s always a small set of posts or articles that did exceptionally well and gave you big recognition. Maybe they even continue bringing consistent traffic through Google today.

So first of all, by all means, go out and find those articles. And then reuse them as a marketing tool.

A man much wiser than me once said that it’s easier to improve something that already works, than it is to build up something that doesn’t.

I couldn’t agree more!

Here’s what you can do exactly to reuse some of your best content:

Step #0

Well, you need to identify this content first. So go to your Google Analytics or Clicky (my preferred tool) and see which posts are the most visited ones on your site. Also, check for your most commented posts (you can sort posts in WordPress by the number of comments) and the ones that have brought in the most social media shares (you can do this via the Social Metrics plugin).
Make sure that there’s a specific call to action under each of these posts/pages. Either invite people to join your newsletter, download your thing, or buy your product (whatever it is you do).
Step #1

Step #2

Erase all distractions from the page. I encourage you to focus on convincing the visitor to do one specific thing. For example, if that thing is newsletter subscription then try making the subscription form the only possible route out of the page. Get rid of sidebars, and if it’s possible, get rid of the top menu as well.
Build additional internal links from other posts on your site to those that bring the most results. This way, you should be able to improve those results even more. After all, your popular stuff is popular for a reason, so if you manage to get more eyeballs on it, people are likely to start sharing and resonating with it more than with your average post.
Step #3

10. Guest post with a purpose

writing

Guest blogging is a very popular promotion method these days, I give you that. However, not many people use it as an actual element of their business.

Here’s what I mean. Every day, I see tens of guest posts where people link to their generic websites (from the bio boxes) or social media profiles. I’m sure this gets them some traffic and recognition. But at the same time, they’re leaving a lot on the table.

(I need to be honest with you and admit that I was just as guilty of doing this as anyone else.)

To give you a good example of things done right, consider this post by Milica Pantic. She explains how she makes money from guest posts directly.

In short, it’s all about these four main elements (in that order):

mitz
  • Picking what you want to promote with your guest post.
  • Deciding what you can write about to pre-qualify the people that are your target group.
  • Figuring out how you can point them to what you want to promote.
  • Finding the best place where to publish your post to reach the exact target group you’re looking for.

The main reason why guest posts are great for this sort of promotion is because you get to position yourself in front of any audience you wish. You just need to find the right website. There aren’t many advertising methods that give you this opportunity.

11. Try local offline marketing

mainstreet

Everybody’s hot about promoting their businesses on the web these days, and rightfully so. However, we shouldn’t forget about all the offline possibilities that are still there and can work exceptionally well.

What’s even better, oftentimes, they are really cheap to execute too. Literally, all you need is some creativity and a bit of time on Saturday.

Here are some of the cleverer things I heard people doing:

Leaving stickers in random places like bars, cafes, public spaces, basically anywhere where other people hang out.
Using chalk to advertise on sidewalks.
Donating branded bookmarks to libraries.
Leaving branded pens at places like banks, post offices, or any other place where people sign their names on pieces of paper. The idea is that the staff won’t notice everyone’s using the wrong pen…
Using sticky notes wherever it makes sense around town.
Printing out beer coasters and leaving them in your local bar.
Leaving your business cards everywhere. Trying places like public bulletin boards, restaurants (along with your tip), inside books at the library, and of course, when you meet a new person.

12. Find, and get on board with existing giveaways

giveaway

The web is chock full of various giveaways these days. And this is especially valid for all kinds of digital products. Be it plugins, WordPress themes, short e-courses or memberships, e-books, icon packs, you name it. People are ready to give them away left and right.
find giveaways that are related to your niche, then add one of your products to the giveaway
What you can do to capitalize on this trend is find giveaways that are in some way related to your niche and website. The best case scenario is finding something that’s directly in your niche, but if that’s not possible, then go one step up.
For example, if you’re in dog training, there might not be a specific dog training giveaway going on, but there probably are some giveaways or even contests focusing on dog owners in general. Maybe someone’s giving away leashes, treats, or some other dog-related stuff.

There’s nothing holding you back from picking one product from your own offer, and adding it to the giveaway. That way, you’re piggybacking off the giveaway’s popularity by itself. It requires almost no marketing on your part whatsoever.

Of course, the difficult part is contacting the giveaway’s managers and convincing them to include your stuff.

13. Supervise everything

supervise

Granted, this is a very counterintuitive piece of advice.

In today’s world, countless experts preach the idea of outsourcing and finding other people to do some of your tasks for you. (By the way, I’m generally preaching it too.)

But the thing we need to keep in mind is that we shouldn’t ever let anyone take over a whole department of our business for us.

For instance, let’s use content as an example. When you first started out, you likely created all of the content yourself. But as you grow, you might get tempted to invite other people on board – to hire help. This is all great and it’s actually the direction you should aim for. However, you should still be the person who’s making the top-level decisions.
be the person who’s making the top-level decisions
The thing is that as you build up your site’s presence, people come and identify with your content. They come to read “you” primarily.

This is a relationship very easy to lose if you disconnect yourself from the publishing process later on. Whoever you hire, will always have their own ideas and ways of handling things. And while you do want to get the most out of their expertise and skill, you need to be very careful not to lose that unique touch that only you can provide.

And this goes for all kinds of tasks you’re doing in your business.

So all of my rambling boils down to this:

Be the decision maker. Don’t assume that others will be better at it than you.

14. Be persistent

persistent

Let’s end this list with the simplest advice possible, yet at the same time, something that makes all the difference in our marketing efforts, and basically in anything we do in life.
Being persistent is what makes you successful.

Not talent.

Not hard work.
(If hard work paid off, slaves would be the richest people on the planet.)

Not connections.

It’s persistence.

You maybe know this story, but let me tell you about Michael Jordan.

Jordan was not accepted on his high school basketball team. This may not sound like a big deal, but what it actually means is that he was not a talented kid. I mean, clearly, no trainer in the world would say no to a talented young player who wants to be on their team.

Yet despite not being talented he became the biggest star in basketball history.

He did it because he was persistent.

Michael Jordan at Boston Garden
He even summarized this in one of his famous quotes:

I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times, I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.

Let me end this post with this. If you don’t believe me, believe Michael Jordan.


Be persistent. Fail forward. Fail to succeed.
Click To Tweet


More cool resources just like this in your inbox.
Let’s grow our businesses together!

Photo credits: superwebdeveloper / CC BY 2.0, Steve Sutherland / CC BY 2.0, wwarby / CC BY 2.0, ankakay / CC BY 2.0, stevenritzer / CC BY 2.0, mhauri / CC BY 2.0, gfreeman23 / CC BY 2.0, lydiashiningbrightly / CC BY 2.0, alisonchristine / CC BY 2.0, Hedgehog Fibres / CC BY 2.0, mario-mancuso / CC BY 2.0, jdhancock / CC BY 2.0, http://www.freevintageposters.com/2013/01/the-adam-forepaugh-sells-brothers_15.html

3300+ Words Worth of Non-Obvious Marketing Tactics That Work | NewInternetOrder.com

To-Do List Tools

To-Do List Tools

Remember The Milk (RTM) // Trello // Asana // Any.do // Evernote.

Since I’m really serious about following the main idea for this site – which is making normal people’s lives easier by providing structured and actually useful info – I’m starting with something that’s an important part of every internet person’s existence.

The fact is that if you’re doing any sort of business on the web then you have tens of projects to deal with, tens of tasks, tens of people to contact, and tens of goals to achieve…and probably other tens of things as well.

A productivity tool does come handy. That’s for sure. But which one to use? This is the question we’ll answer today.

Important

This isn’t a fake review. I did actually spend a considerable amount of time testing all these tools. And this was real testing, meaning that I made those tools part of my daily work. In short, I’ve become a user. Heck, here’s a proof of my RTM usage:

rtm-proof

So I guess what should follow now is a handful of blocks of text talking about various features and then giving you my verdict on the best to-do list tool out there, right? But that would be: (1) boring, and (2) wouldn’t be a usable resource.

That’s why I’m going to do the following instead…

Below, there’s a simple table that presents all 5 tools, their strong and weak sides, their purpose, their level of simplicity, their ease of use, their feature-richness, their GTD-friendliness, and their (assumed) target group of users.

Top 5 productivity tools compared

Remember The Milk

Remember The Milk
BASIC DETAILS

PRICE
Free.

PURPOSE
To-do list management for a single person.

FEATURES
Tags, multiple lists (projects), deadlines, priorities, keyboard shortcuts.

MULTIPLE USERS
Not as far as I know.

APPS
Android, iPhone, iPad (Siri integration), BlackBerry, Gmail plugin, Outlook plugin, Twitter integration, Google Calendar integration, plus a number of third-party apps.

INTERFACE

SIMPLICITY
9/10
(just a single list of tasks/things; no place to get lost).

EASE OF USE
9/10
(setting your lists and your tasks should only take a couple of minutes).

GOOD/BAD

GTD SUPPORT
Easy to implement (it isn’t built in from the get go).

STRONGEST POINT
The ease of use, the speed of use, the ultra-functional keyboard shortcuts and the number of additional apps available.

WEAKEST POINT
Their iOS apps. The sync is done only once a day (you have to pay for real-time sync).

PREFERRED USER GROUP
I’ve been using this tool (on and off) for more than 2 years. It’s very optimized for heavy desktop users. It’s fast and reliable. However, it doesn’t support any teamwork, and like I said, the iOS apps are weak. So this tool is for heavy desktop users that work alone.

Any.do

Any.do
BASIC DETAILS

PRICE
Free.

PURPOSE
Very simple task management.

FEATURES
Only simple task management, and basic project functionality.

MULTIPLE USERS
Not really.

APPS
Android, iPhone, iPad.

INTERFACE

SIMPLICITY
10/10
(there’s just one main list-style layout with some buttons on the top).

EASE OF USE
10/10
(it takes no time to learn it; you can get started right away).

GOOD/BAD

GTD SUPPORT
Kind of. You can use Any.do as one of your GTD elements, not as a manager to handle a whole GTD setup.

STRONGEST POINT
Its simplicity. There’s literally no learning curve

WEAKEST POINT
If you want to use it on desktop, you only get the Chrome plugin. There’s no official web interface.

PREFERRED USER GROUP
People who just need the simplest task manager possible.

Trello

Trello
BASIC DETAILS

PRICE
Free (the basic plan).

PURPOSE
Task management and overall “things” management (snippets of notes, etc.).

FEATURES
Boards (projects), lists, tasks, sub-lists, drag and drop, labels, deadlines.

MULTIPLE USERS
Yes.

APPS
Android, iPhone, iPad, Window’s 8 Tablet.

INTERFACE

SIMPLICITY
9/10
(there’s just the main workspace with lists and cards, nothing fancy).

EASE OF USE
10/10
(the interface is highly intuitive and it takes no time to master).

GOOD/BAD

GTD SUPPORT
Easy to implement (it isn’t built in from the get go).

STRONGEST POINT
Ultra-easy to use. Setting it up and getting started takes no time. Strong focus on teamwork.

WEAKEST POINT
A design that’s a bit too simple. No clear way to mark tasks as completed.

PREFERRED USER GROUP
People who need a powerful task manager, but most of all want to be able to get started with it right away with no hiccups.

Asana

Asana
BASIC DETAILS

PRICE
Free (the basic plan).

PURPOSE
Project management and task management in a group setup or on your own.

FEATURES
Projects, deadlines, collaboration, subtasks, tasks, hearts (whatever that is).

MULTIPLE USERS
Yes. Up to 15 users in your team for free.

APPS
Android, iPhone, iPad, Chrome plugin, Google Calendar integration, and more.

INTERFACE

SIMPLICITY
8/10
(the tool uses a classic list layout; there are sections for projects and tasks; in short, kind of simple, but you need a while to get a grasp on everything).

EASE OF USE
8/10
(creating tasks and projects is very simple, but you need a while to learn how to make the tasks actually appear on your dashboard and how to speed up the process of creating and editing the tasks).

GOOD/BAD

GTD SUPPORT
Easy to implement (it isn’t built in from the get go).

STRONGEST POINT
High focus on teamwork. Plus, the design is very nice to look at.

WEAKEST POINT
There’s a centralized place for tasks. What this means is that you need to create a task first, and only then assign it to yourself so you can see it on your dashboard. This isn’t the most optimized solution if you’re working on your own. But at the same time, it’s a huge advantage if you’re a project manager.

PREFERRED USER GROUP
Project managers and people who like to be able to expand their operations above some standard task management. For single user, this might be an overkill though.

Evernote

Evernote
BASIC DETAILS

PRICE
Free (the basic plan).

PURPOSE
Advanced note management system.

FEATURES
A ton of them: real-time cloud sync, multiple notebooks, support for various types of content, tags, reminders, sharing, and a lot more.

MULTIPLE USERS
Yes, in Evernote for Business.

APPS
Android, iPhone, iPad. Plus, a range of other side apps and third-party apps.

INTERFACE

SIMPLICITY
5/10
(Evernote is advanced, and because of this, the interface isn’t simple).

EASE OF USE
4/10
(We’re talking about using Evernote for to-do list management, and Evernote is simply not optimized for this; it requires a lot of setup before you can use it for this purpose).

GOOD/BAD

GTD SUPPORT
Possible to implement. The fact that Evernote can be used for GTD is actually the only reason why I’m including it on this list. (There’s a great guide called The Secret Weapon on how to configure your Evernote for GTD-enabled task management.)

STRONGEST POINT
The possibility to make it your cloud-based central for all kinds of notes. It goes a lot further than a simple task management.

WEAKEST POINT
The amount of work you have to do before you can start managing your tasks and projects with it.

PREFERRED USER GROUP
People who are taking various types of notes heavily and like to have everything in one place. People who like to have complete control over their tasks and projects. Also, people who for some reason, don’t like any of the other task management tools presented here.

good-job

And the best to-do list manager is…

The best tools for me personally are Any.do and RTM. But that’s only because of the way I’ve built my personal productivity system – taking my current setup into consideration, the kind of work I do and the kind of tasks I usually take care of.

Let me emphasize this again, those two are the best for me.

Will they be the best for you? I don’t know.

That’s why I’ve created this comparison so you can take a glance at each tool’s basic features and make an educated guess based on this data.

I am curious to hear your opinion about these tools, by the way, so don’t hesitate to contact me.

 Looking for some online business advice for normal people
and more resources just like this one? Jump in.
 

Which Is the Best To-Do List Manager / Task Manager? Top 5 Tools Compared | NewInternetOrder.com