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:
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.
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 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 Card: Preview your Twitter post with Yoast SEO Premium
Twitter Cards are a great (visual) addition and can help increase traffic to your website!
Besides optimizing your product pages for user experience, you want to make sure these pages are as good as possible for SEO as well. Obviously, you might think. In this post, we’ll show you a couple less obvious — at least for most website owners — elements of product page SEO and tell you why it’s so important to take these things into account.
1. The basics of product page SEO
A product page on an e-commerce site or online store is a page as well, so all the SEO things that matter for your content page, go for product pages as well. We could go even more into detail when discussing product page SEO, but for now, this will be your basic optimization. If you offer less than exciting products on your site, you may also want to read our post on SEO for boring products. But first:
Add a great title, focusing on the product name — including a manufacturer name, if applicable. If your product is, for instance, a small part of a larger machine (screw, tube), include the SKU as well. People might search that specific.
Add a proper, unique description of the product. Most of the times, that isn’t the description the manufacturer shipped with the product. That description might be used on hundreds of websites, only to be duplicate content and a sign of low quality for your website (to Google). Prevent duplicate content due to manufacturer descriptions at all times. If all your content (content pages, category pages, blog) is unique, and the content used on thousands of product pages isn’t, most of your site isn’t. Think about that and don’t take that lightly. Google’s collection of black and white animals is waiting for you. Create unique content.
Add an inviting meta description. Usually, a product page contains a lot of general information as well, varying from dimensions to terms of service. To avoid Google using that unrelated text in a meta description, you want to add a meta description to your product pages, even more than to content pages. We often see that meta descriptions are added in some kind of templated way, where just the product name is changed per product. That’s ok to start with, but ideally, all meta descriptions are unique.
Pick a great, easy to remember URL for your product pages.
Add high-quality, well-optimized images with proper ALT text. Include the product name in at least the main product image. This will help you do better in visual search. Also, don’t forget video — if applicable.
2. Add structured data for your products and get rich results
Structured data is an essential part of a modern SEO strategy and this also goes for product pages. There is specific Product Schema that helps you get highlighted search results, so-called rich results. In addition, you’d better mark up the reviews of your customers with Review structured data. All of this will make your product page stand out and increase the chance a potential customers clicks on your link in the search results.
The importance of this for your product page SEO is that the major search engines came up with this markup, not the W3C consortium. Google, Bing, Yahoo and Yandex agreed upon this markup, so they could identify product pages and all the product elements and characteristics more easily. Why would they want that? So they could a) index these pages a lot better and b) show you rich snippets like this:
That’s a lot of info in the search results, right?
The Product schema tells the search engine more about the product. It could include characteristics like product description, manufacturer, brand, name, dimensions, and color, but also the SKU we mentioned earlier. The Offer schema includes more information on price and availability, like currency and stock. It can even include something called priceValidUntil to let search engines know that the price offer is for a limited time only.
Schema.org has a lot of options, but only a limited set of properties are supported by search engines. For instance, see Google’s page on product page structured data to see what that search engines expects in your code and what it can do with it.
So this is why you want to add Schema.org data for product page SEO: easier to recognize for Google, and it makes sure to include important extra’s in Google already. If you have a WooCommerce shop, our WooCommerce SEO plugin takes care of a lot of this stuff behind the scenes.
Another reason to add it is to manage expectations from customers. Your visitor knows your price up front and knows that the product is in stock. Your potential client can even see how well-regarded your product or service is by looking at those beautiful stars in search. How’s that for user experience! And that brings us to number three.
3. Add real reviews
According to Pew Research, more than 80% of US consumers check reviews before buying anything online. Although not everyone trusts online reviews – research says they are probably right -, they can be very helpful. And if you are a local company online reviews are even more important. Most reviews tend to be extremely positive, but it might just be the negative reviews that give a better sense of what is going on with a company or product.
Leading Dutch online store Coolblue gives consumers a lot of options to make relevant and useful reviews of the products they buy
Try to get your customers to leave reviews and show them on your product page. Do you get negative reviews? Contact the writer, find out what’s wrong and try to mitigate the situation. Maybe they can turn their negative reviews into a positive one. And you’ve gained a great new insight into your work. Here’s how to grow your business with ratings and reviews. In addition, getting awesome testimonials is another way of showing your business means business.
Be sure to mark up your reviews and ratings with Review and Rating schema so search engines can pick them up and show rich results in the search results pages.
4. Make your product page lightning fast
People don’t like to wait. Waiting for a page to load costs money. In today’s mobile-focused world, every second counts. Even more so if you spent a lot of time and energy trying to get that potential customer to your product page in the first place. People expect a fast page and Google does so too. Of course, there’s a lot you can do. Here’s a small collection of posts that’ll you get started:
Looking at numbers in Google Analytics, Search Console or other analytical tools can give you a lot of insights into how people find and interact with your page. These insights might help you make changes to improve the performance of the page even more. While it’s essential to keep an eye on your product pages, there’s another way of ensuring the page is as awesome as it can be: user testing.
In their 2018 Product Page UX research project, the Baymard Institute found that “the average site has 24 structural UX issues on its product pages, and only 18% of the 60 top-grossing US and European e-commerce sites have a “good” or “acceptable” product page UX performance. The vast majority of benchmarked sites — 82% — have a “poor” or “mediocre” performance. And no sites have a “state of the art” product page UX performance.” You can read that fascinating study on their Product Page UX site.
The Baymard report has loads of insights into the most commons errors seen on product pages
There are loads of issues to check out, from terrible use of images, including non—functioning galleries to bad handling of out of stock products. It also seems that many sites fail to provide accurate shipping information and return information, which leads to trust issues – see the bonus item next in this article.
While you compare your product pages to external user research, don’t forget to do your own user testing! Doing proper research will give you eye-opening results that you probably wouldn’t have found yourself.
Bonus: Build trust and show people you are for real
Getting a stranger to buy something on your site revolves a lot about trust. Someone needs to know you are for real before handing you their hard-earned money, right? Google puts a lot of emphasis on the element of trust — it’s all over their famous Search Quality Raters Guidelines. The search engine tries to evaluate trust and expertise by looking at stuff like online reviews, the accolade a site or its authors receive, et cetera.
One of the most important things to come out of that is that you should really have your About us and Customer service pages in order. So be sure that people can easily find your contact information, plus information about returns and shipping, payment, privacy et cetera. Don’t forget!
TL;DR: Product page SEO
If you’re serious about optimizing your product page, you shouldn’t focus on the regular SEO and user experience alone. You’ll have to dig a little deeper into the other aspects of the product page on your online store. For instance, add Product and Offer Schema, so Google can easily index all the details about your product and show these as rich results in search result pages. Make your product pages load super fast, add user reviews and try to enhance the trustworthiness. Don’t forget to test everything you do!
Our Yoast SEO plugin handles optimization of your WordPress site for search engines, and we dare say it does that pretty well! Most of that is technical optimization, like our XML sitemap functionality, and content optimization, like your content and readability analysis. But there’s more to SEO than that. You need links pointing to your website and for that to happen, people need to talk about you and your website. That is the essence of social media, so our plugin helps you optimize for that as well!
Before we dive in, if you want to learn more about social media and other essential SEO skills, you should check out our All-Around SEO training! It doesn’t just tell you about SEO: it makes sure you know how to put these skills into actual practice!
In our SEO plugin, you’ll find a Social menu. In this post, we’ll explain what it does and what you should do when you’ve installed the plugin. We’ll focus on Facebook and Twitter, as these are the biggest networks out there. Of course, there’s a note about Pinterest too.
Facebook
Facebook’s OpenGraph is used by quite a few different social networks and search engines, but obviously, the main reason for adding it is for Facebook itself. Facebook’s OpenGraph support is continuously evolving but the basics are simple: in a few pieces of metadata you declare:
What’s the name of the site and the title of the page?
What’s the page about?
Which image/images should be shown when this post or page is shared on Facebook?
Most of the values above are filled out by the plugin by default based on your post’s data. It uses the locale of your site, the site’s name, your SEO title, the canonical, the meta description value etc to fill out most of the required OpenGraph tags.
If you fill out the data mentioned above and share the URL of this post or page on Facebook, your Facebook post could look like this:
So what do you need to do?
First of all, go to SEO → Social, the Facebook tab and make sure OpenGraph is enabled. Then decide to use either a person or an application as the “admin” of your site, as this will allow you to use Facebook Insights. Just click the appropriate button and follow the on-screen guidance which will take you to facebook.com. Next, make sure you’ve entered the Facebook Page URL for your site or brand on the Accounts tab, as that will be connected to each post as the publisher.
The settings below that are for the Frontpage: which image should it use and what description should be used. Take some time and craft these, making sure the image is large enough (at least 200px x 200px).
Then, set a good default image. This will be used when you have a post or page that does not contain an image, so it can still be shared with maximal visibility. This image should also be at least 200px x 200px.
Lastly, go to your personal WordPress profile (just click on your name, top right in the settings) and add a link to your Facebook profile, if you want to associate your Facebook profile with your content. If you do, be sure to also enable the “Follow” functionality on Facebook.
As you can see, this is a few minutes of work. After that, Yoast SEO takes all of the work out of your hands. Sometimes Facebook doesn’t pick up changes right away. So if you want to “debug” how Facebook perceives your page, open up a URL in the Facebook Debugger, this one, for instance, is for the Yoast.com homepage.
OpenGraph for Video Content
If you have video content, you would need to do more work, unless you’re using our Video SEO plugin. Our Video SEO will take care of all the needed metadata, and by doing so it will allow you to properly share your videos on Facebook.
Twitter
For Twitter, the functionality is quite similar to Facebook. The functionality is called Twitter Cards. For several of these values Twitter “falls back” to Facebook OpenGraph, so we don’t have to include everything, but it still is quite a bit. We’re talking about:
the type of content/type of card
an image
a description
the twitter account of the site/publisher
the twitter account of the author
the “name” for the domain to show in a Twitter card
If we share the same post as above on Twitter, with all the required metadata, this card would look like this:
The title is taken from the SEO title you enter in the Yoast metabox, the description is taken from the meta description unless a specific description for Twitter is provided in the Social tab of the metabox. The image is the featured image of the post unless a specific Twitter image has been specified. This leaves two values for you to fill out in the settings:
The site Twitter account, which you can fill out on the SEO → Social page under the Twitter tab;
The author Twitter account, which he/she can enter on their individual WordPress profile page.
Want to check what your post or page will look like on Facebook or Twitter? Then you should get Yoast SEO Premium. It lets you check, without even leaving the post editor, the layout of your post on Facebook and Twitter. Saving you lots of time switching between tabs! Joost explains how it works in this video:
Checklist for new authors
To get the most of all of the settings you’ve just set up, make sure each (new) author on your site fills out the following on their WordPress profile:
Pinterest’s Rich Pins allow for OpenGraph markup as well. To create a rich pin you should add variables like product name, availability, price and currency to your page. As this is mainly interesting for products, we decided to add functionalities to create rich pins to our Yoast WooCommerce SEO plugin.
Conclusion
So go ahead and use Yoast SEO to optimize for social media! This isn’t very hard to do, it just takes a few minutes of your time and you will “reap the benefits”. As these social networks keep on adding new features, we’ll keep our plugin and this article up-to-date, so be sure to update the plugin regularly.
