We’ve already covered the General Tab, the Advanced Tab, and the Schema Markup Tab in Rank Math’s Meta Box, all of which helped you optimized your post for search engines. This article is about the Social Tab, which you might have guessed already, helps you optimize your post for Social Media.
SEO is a great source of traffic, but it can take a long time before you start seeing any results from it—especially if your website is brand new. On the other Social Media is a great way to get initial traction, while it may not be the greatest source of traffic once you have a large enough audience.
Social Media also allows you to communicate with your audience in a more friendly, lighthearted manner, which is not possible on any other communication channel.
There is also some evidence that “social signals” co-relate with higher rankings—social signals meaning likes, shares, and comments—overall engagement on social media. Now, correlation does not mean causation. That means that social signals and rankings might appear together, but one is not caused by the other. Keeping that aside, a good social media presence will be beneficial to your business anyways, so you can’t ignore that anyways. Social media also gives the users the wonderful option of sharing, which helps your website’s visibility and credibility.
Every Social media prime platform’s focus is engagement; which happens when the right kind of content meets the right kind of people and provides them with the right kind of experience. But, to do that, you first have to compel the user to click through your content and reach your website.
That is where the power of Rank Math’s social box comes in. It equips you with the right tools to create engaging, enticing, and high-performing social media content for Facebook and Twitter. In addition, WooCommerce product SKU is now added in the OpenGraph data and the data is grabbed from the Product’s SKU.
Here are all the options that you will find in the Social Tab in Rank Math’s Meta Box
As you can see, the number of options isn’t huge, but the options are effective nevertheless. Let us discuss all the options.
As you can see, Rank Math currently supports Facebook and Twitter only. That is because not only are these the most popular social media, but they are the ones that use OpenGraph. For example, Instagram is very popular, but you can’t share links on it, and therefore, not only does it not use OpenGraph, but it also needs no optimization.
In This Article, We’ll Cover How To
We already showed all the Facebook options above, but here they are again.
Apart from the preview, there are 3 options in the Facebook section. Let us understand each of them.
When any link is shared on Facebook, Facebook tries to find a thumbnail image to attach to it as images grab more attention. Facebook tries to find all the images embedded in the post and selects the image that it thinks is the best. But, when you’re writing the post, you’re not thinking about how the images will look on Facebook, but rather trying to make the images fit the context of the post and your website. The colors, the aspect ratio, and even the image itself might not be a great choice when sharing the image on Facebook.
That is why we recommend that you choose an image specifically for Facebook with this option. Click the Add Image button to open up the media gallery.
The WordPress media gallery will open. Drag and drop an image in the empty area to upload the image here.
And the image will be uploaded and selected in the media manager. Click the “Select” option to choose the file.
The image will now replace the default image in the Facebook sharing preview.
If you want to change the image, click the Replace Image option, and from the WordPress media gallery, you can either upload a new image or choose an existing one.
Click the Remove Image to delete the image (it will not be deleted from your website, just from this option).
Important Things to Know About Facebook Images
There are a couple of things you should know about images that you use for Facebook sharing. First, Facebook heavily compresses any image you upload to the website. This happens to pictures you upload to Facebook directly and will also happen to thumbnails that are fetched from the website. So, if the quality of the picture you see on Facebook isn’t quite as good, Facebook’s compression is to blame.
Second, you should use the appropriate aspect ratio when choosing an image. The recommended size for upload is 1200 pixels wide and 630 pixels tall. You can get away with uploading smaller images, but keep the aspect ratio the same to make the best use of the space.
The Title is where you set the title of the shared post. The title is displayed just below the image and is very important to achieve a good click-through rate, as users typically first notice the image, then check the title to see if what they are seeing is relevant to them.
You might have noticed that the title field has a placeholder, and it is not any default text.
This text is actually imported from the SEO title that you’ve set for your post in the General Tab of Rank Math.
Now you might think that the same title can work for SEO and social, but you’d be wrong. On Google search, people specifically search for certain keywords to find some information. That helps define their intent, which you can use to create a compelling title.
On social media, content is mostly discovered, which means your viewers might come across your post even if they had no intention of doing so. This difference is very important to understand. That is why you need to craft a different headline for your social media instead of re-using the title that you created for search.
The description is usually present just below the title of the shared post, and it helps drive more relevance to your post.
A thing not discussed usually is the importance of the description. On search, the title and description (also the URL) help the user make the decision to click through. But on social, users primarily look at the image and the title to decide if they would want to click, and the description is largely ignored. But, that doesn’t mean that you should ignore the description, as it can benefit you in many ways. Facebook’s algorithm also keeps evolving, and you might never know what data they use to match the user’s intent with content.
As was with the title, the placeholder is also picked from your meta-description that you’ve set in the General Tab.
But, as we explained, the SEO meta-description and the social description have different intents, and therefore, should be treated differently.
Checking the Facebook Preview
If you remember, we have built a preview option in the General Tab of the Meta Box which helps you preview how your website will appear in the search results. It helps visualize your title, URL, and description and make changes to make it more appealing to the users. Wouldn’t it be nice to have a similar option for social media?
Actually, we have built the same feature for social media as well, and you can check the Facebook preview right below the Facebook button. Rank Math generates a realistic-looking preview of a Facebook post using your configuration. Here’s how it looks like.
Add Icon Overlay to Thumbnails
This is a pretty powerful feature inside Rank Math that can skyrocket your click-through rate on Facebook if used correctly. What this option does is add an overlay to your image, making it look like a video or a playable GIF. Once you enable it, another option will appear below it.
The options are:
- Play Icon
- GIF Icon
The Play icon simply overlays a play button on the video, while the GIF icon overlays a GIF file’s icon. Here is how the Play Button looks when enabled.
And here is how the GIF icon looks.
Important Note About the Icon Overlay Feature
Although the Icon overlay is quite powerful and is likely to get you higher clicks, you should use it responsibly and not as a simple click-bait trick. Facebook is hard on pages that give people an unsatisfactory experience and reduces their reach frequently. To avoid this, use the overlay only on pages where you do have videos or animated gifs related to the topic on the page. Also, make sure to have the video or gif at the beginning of the page rather than the end. This way, the user will immediately notice it and is unlikely to bounce back to Facebook.
That’s all of the options in the Social tab for Facebook. Let us now discuss the Twitter options.
You can switch to the Twitter options by clicking the Twitter button at the top of the tab.
Once clicked, all the Twitter options should become visible, and your screen should look something like this:
As you see, the options in the Twitter tab are quite similar to the Facebook options, but there are a couple of additional options as well. Let us discuss all the options.
Use Data from Facebook Tab
This the first option in the Twitter Tab, and it can save you a bunch of time. This option is enabled by default, it simply copies all the relevant settings from the Facebook Tab and uses them for configuring your Twitter settings as well, saving you a bunch of time. When you disable this, all the settings that are taken from the Facebook Tab are also disabled and you’ll see options to add Image, Title, Description, and Icon Overlay. Here is how your settings will look if you disable this option.
Whether you should use this option or not depends a lot on the type of content you produce, your audience, and the availability of your time. People on Facebook and Twitter behave quite differently, and we would strongly advise you to craft a headline and description exclusive for your Twitter audience. But, we also understand that doing so requires time and effort, and you might not want to invest that—especially if your following is small or not very active on Twitter. Instead of not optimizing your Twitter at all, we would recommend that you at least use the Facebook options that you’ve configured. All it takes is a click of a button.
This is the only setting that is not available in the Facebook section, as this feature is exclusive to Twitter. Unlike Facebook, Twitter allows many different types of content sharing, each of which is suitable for specific types of content. Twitter calls them cards, and here are all the card types supported in Rank Math.
Here are the individual card types and some basic information about them.
- Summary Card with Large Image: This is a card that features a large image on top, and the headline below it, similar to Facebook
- Summary Card: This card type features a small thumbnail placed to the left of the title and other information.
- App Card: This card type is specifically designed for mobile apps, and you have to configure a decent amount of information about your app to use it.
- Player Card: This is the card type to use if you want to embed videos on Twitter. This one also requires some setup, and you also have to be approved before you can use this card type.
Here are some images that show how the Summary Card with Large image and the Summary Card look. Unfortunately, we can’t show a demo of the App Card and Player Card. Here is the Summary Card with Large Image.
And here is the Summary Card.
Let us now explain the rest of the settings.
The image is self-explanatory. It represents the image that will be used when your post is shared on Twitter. Depending on the type of card you configure, the image will appear different in the final result, and we’ve already shared examples of how the Summary Card and the Summary Card with Large Image looks.
The only difference between the Facebook image and the Twitter image is the supported aspect ratio. Twitter expects an image with an aspect ratio of 2:1 with minimum dimensions of 300 pixels wide by 157 pixels tall and maximum dimensions of 4096 pixels wide and 4096 pixels tall. The image must also be less than 5 MB in size.
Similar to the Facebook Title, the Title is the headline that appears next to the image. From a user’s perspective, the Title reads out like the headline of the link that they see, so make sure to create an eye-catching title, but also make it relevant to the actual content.
The Description is the supporting text that appears just below the title of the card, and its job is to give a sneak peek of the content to the user. Similar to the title, the description should be crafted to entice the user to click, but it should also be an accurate representation of the content.
Default Title and Description
You might have noticed that the Title and Description fields have placeholders, and even the preview uses the placeholder. That text is not a default placeholder text, but it is taken from your SEO Title and SEO Description that you’ve set in the General Tab.
We, of course, recommend that you create customized titles and descriptions not only for your search results but the individual social media channels as well. We also understand that it is not always feasible to do this; that is why the default behavior is set to use the Title and Description set in the General Tab.
Just pay attention to one thing, though. Search engines and social media channels have different recommended lengths for their titles and descriptions and clipping may occur if the title or description is too large. Here is an example.
In the General Tab, you can see that the title and the description are of the appropriate length.
But, when the same title and description are used for Twitter, the description is trimmed as it exceeds the maximum length by a large margin.
Only when you type in a smaller description the complete description will show up in the preview.
Now that we’ve covered all the options applicable to Twitter, we should discuss the App Card and the Player Card in detail as they both have plenty of options to configure which you need to understand before you can start using them.
If you’re promoting a mobile app, the Twitter App Card was made for you. Its goal is simple – get people on Twitter to install your app.
When you release an app, it’s natural to blog about it—you want to get the word out to get users on board. If people like what you have to say, they’ll install the app. If they really like it, they’ll share your blog post on Twitter and other social networks.
That’s a good thing. When people Tweet about your app, your message reaches their friends and followers. Some of them will be intrigued, and a percentage of them will install the app too.
That’s the essence of viral marketing. But, success in viral marketing is rarely predictable. All you can do is experiment, optimize, and pray to have the odds in your favor.
That’s where App Cards come in. They not only help attract the right people to the app, but they also help increase your download conversion rate.
They do that by reducing the number of steps it takes to discover an app and install it. Usually, the process of discovering apps in the Twitter timeline requires a lot of steps. Users have to first notice the app-related content in their timeline, then click a link to open a page, then click another link to go to the app store.
The App card gets rid of all of that by enabling direct links within the card itself. Users just have to click a link, and they will reach the app store, where they can download the app.
Now that you understand the power of App Cards, let us look at all the options in it. Here is an image that shows all the options in the App Card.
Let us understand all the options.
- App Description: Here, you will need to enter a description of the app. This field has a limit of 200 characters, so make sure to keep the description precise.
- iPhone App Name: Enter the name of the app as it appears on the Apple App Store.
- iPhone App ID: Each App in the App Store has a unique ID, and you need to enter that ID here.
- iPhone App URL: Here you need to enter your App’s custom URL scheme, including the “://”
- iPad App Name: If you also have an iPad variant of the app, enter the name of the App here.
- iPad Add ID: Enter the iPad App’s unique App ID here
- iPad App URL: Enter the app’s Custom URL scheme, including the “://”.
- Google Play App Name: Enter the name of the App as it appears on the Google Play Store.
- Google Play App ID: Enter the unique Google Play App ID for the App here.
- Google Play App URL: Enter the app’s Custom URL scheme, including the “://”.
- App Country: If your app isn’t available in the US App Store, then enter the two-letter country code for the App Store where your app is available.
Even with many options to configure, setting up the App Card is pretty easy and quick as you just have to paste in a bunch of information. The benefits, however, are enormous. With every re-tweet, your app will be visible to a whole new set of people, and they will all be able to install the app in a single click.
If you’d like to learn more about the App Card, you can refer to Twitter’s official documentation.
The Player card is used when you’re embedding audio or video content right inside the Twitter timeline. Technically, you can embed anything within an iFrame, but Twitter has strict rules on what you can embed using the Player Card.
The Player card is one of the most complicated to set up, but most of the time, you won’t need to use those features. You will understand it better when we explain the Player Card in detail. Here are all the options that you would see in the Player Card.
Although you can embed a lot of things on Twitter using the Player Card, its most popular use is embedding videos. In the options above, you can see that the Player Card needs an image, title, and description—which mean the same thing as they do in the other cards. The fields unique to the player card are:
- Player URL
- Player Size
- Stream URL
- Stream Content Type (the MIME type)
Let us understand what these options are and how to configure them.
The player URL is loaded into an iframe on the standard web version of Twitter (not the mobile app) – it should scale to fill the full size of the frame, and it should provide standard player controls.
The player must have a secure HTTPS URL.
Since Twitter is a cross-platform service, you aren’t allowed to use any plugins, including the once-universal Macromedia Flash. Fortunately, HTML5 provides standard video elements that are supported on all popular platforms.
In the Player Size field, you need to enter the width and height of the iframe player that you’ve added in the previous field. The iframe size should be entered in pixels, for eg:600×400.
In addition to a player URL, you have to provide a separate URL for the video stream. The reason why you have to provide a raw stream is that Twitter’s mobile App uses it directly. It doesn’t load the player – instead, it uses a built-in video client to play the stream.
Twitter’s mobile app currently only supports MP4 video formats.
Stream Content Type
In addition to the stream URL, you have to provide a detailed MIME type for the video, using the format outlined in RFC 6381 – Codecs and Profiles parameter for bucket media types and RFC 4337 – MIME type registration for MPEG-4 (these are web standards).
MP4 videos are not all the same – MP4 is just a container file. Just like a zip file can contain many different file types, an MP4 can contain many different varieties of video and audio.
MIME types are a way to describe the file type so that software can handle it properly – in this case, we need to tell Twitter’s Mobile App how to play your video. As a WordPress user, you don’t usually have to worry about MIME types – the webserver handles that for you.
If the above sounds like gibberish to you, then you may need the help of a developer to set it up the first time. As long as your videos are all in the same format (same video codec and audio type), then you can copy-paste the values in the future.
So, this is certainly the most technical card type. It’s important to get the settings right, or else the card won’t work. What’s more, the card won’t become active until it’s been reviewed by Twitter’s team.
You can read more about the process here.
The standards documents in the link are pretty dense reading, even for experienced tech-heads who understand how video files work. If you aren’t familiar with this type of thing, we don’t recommend you try to tackle it yourself. It’s better to get a professional to do it for you–it will spare you a lot of headaches and trial and error.
The bottom line is, is it worth it? Well, if your ideal customer is on Twitter, then it is definitely worth it. Also, you have to remember that you have to configure the Player Card with all the technical details if you’re hosting the content yourself. If it doesn’t affect your business goals, you can always use a video streaming service like YouTube or Vimeo to upload your content and embed it on Twitter without the hassle.
That covers everything that you can do inside the Social Tab of Rank Math’s Meta Box. As you’ve seen, the social options may be tricky to understand and configure, but the results that they can get you are massive. If you have any questions or doubts regarding the Social Tab, or Rank Math in general, we encourage you to open a support ticket on our forum or ask your question on the Facebook Group.