While you can do everything possible to ensure that your content looks great, you have no control over how your posts look when someone else shares them from your site to their own profile. This is where social meta tags come in.
There are a number of different social meta-references that can be used for integration with social networks. Some of these tags can be used by more than one social network (for example, Open Graph or og tags), while others, like Twitter Card, can only be used on just one.
Social meta tags help you control how your content looks when shared on social media which in turn can help you drive huge amounts of social media traffic to your site.
Three Important Social Media References:
1. Open Graphs
2. Twitter Cards
3. Schema Microdata
What is Open Graph?
Open Graph is Facebook’s protocol that allows 3rd party sites and web apps to integrate user activity on the social network with user activity on their websites. These Open Graph tags have become recognized by other social platforms including LinkedIn, Google My Business, and Twitter. They may be the most important tags that you can implement on your website.
They enhance any content that is shared, meaning that even just a few tags added to your site could help you in controlling social shares and ultimately your branding and presence on these social networks. With these tags, you’re basically telling the social networks what information you want to be displayed whenever you or anyone else share a link from your website.
Social networks work in a way that is similar to how search engines look around your website for the data they need to display your site in the search results. They look for their own tags for the “social graph” (whether it’s Open Graph, Twitter Cards, or Schema.org).
What is the Social Graph?
The social graph is a means of defining “stuff” in a digital space. It can be made up of media such as movies and videos, or places like shops and cinemas. It could even be people like movie stars, politicians, singers, or properties such as websites, articles, and so on.
Open Graph data sends these details about what the object is and how it should be represented onto the social graph. For example, you can specify which video or image should appear, the description and title that should show, and even the language and location.
Does Open Graph Boost Search Engine Rankings?
These tags were created especially for social networks and so the search engines know not to consider them. But, social media content gets pulled into search results frequently so your Open Graph tags and your SEO meta tags shouldn’t be miles apart. Even though there aren’t currently any direct SEO benefits to using og tags on your site, there is still a ton of other benefits.
Why Bother With Open Graphs?
Some people may wonder if it’s even worth taking the time to implement Open Graph tags after all. If a link to your site is already being shared, what’s the point of ensuring that social networks are presenting your information the right way?
Well, every time you share posts from your website to social media the crawler scrapes the shared URL’s HTML and if there isn’t any Open Graph data available there, the scraper has to guess which content is significant, and oftentimes, they are pretty off.
When content is shared without og tags you may end up with a title that is way too long, a default description, and an image that is badly cropped. That isn’t the kind of post that attracts views, clicks, and shares.
Benefits of Open Graph Tags
There are a lot of benefits to optimizing your presence on social media. Open Graph makes your information easier to find. When your content is more eye-catching and attractive, it stands to reason that more people who see it in their social media news feeds will click and share it.
Because of the increased amount of engagement, you may convert more of your visitors into new followers on social media or email leads. This means that you’ll have even more people to share your content with in the future.
In addition to that, the increase in shared content also means that your posts are more likely to reach new webmasters and ultimately attract backlinks which will naturally boost your rankings.
How to Implement Open Graph Tags and Twitter Card Tags
You can add Open Graph and Twitter Card meta tags to your site in two ways:
– You can either add the meta tags to the <head> part of your site’s code manually
– Or you can use a plugin through your CMS systems such as WordPress or Joomla
First, we’re going to take a look at how to do it manually:
Adding Social Meta Tags to the <head> of your Website
When adding social media tags to your site, you need to add meta tags containing the information that you want social networks to display to the <head> part of your site’s code.
Open Graph: Critical Tags
1. Open Graph Title
2. Open Graph Description
3. Open Graph Image
4. Open Graph Site Name
5. Open Graph URL
6. Open Graph Type
7. Facebook App ID
1. Open Graph Title
These tags are among the three most important tags that you can use for Facebook, LinkedIn, and Google My Business sharing. The title for all social posts that are created for the URL is determined by the Open Graph Title tag.
Social Networks: Facebook, LinkedIn, Google My Business
Significance: Required
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta property=”og:title” content=”Enter Article Title Here” />
Most social networks use the standard HTML title for the page but it’s best to always set the Open Graph title for your page. This is because the meta title on your page may be targeted more toward the tab name in browsers and the results from search engines whereas the Open Graph title is specifically meant for social media networks and social shares.
The title should be customized for your audience. Search engines and browser tabs typically use only a small part of the title. Using an Open Graph title means that you can customize the title up to 100 characters. This gives you a whole lot more to work with.
2. Open Graph Description
Also in the top three most important tags is the Open Graph Description tag. It’s directly used by Facebook, LinkedIn, and Google+ to represent your content on their social networks.
Social Networks: Facebook, LinkedIn, Google My Business
Significance: Required
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta property=”og:description” content=”Enter Page Description Here” />
Adding this tag to the <head> section of your page ensures that social networks don’t have to base the description of your page on the meta description for the page or choose a ‘snippet’ to use as the description from scanning the content on the page.
Either of these choices wouldn’t work out well for you because whatever description the social networks choose to go with may not be the correct one for your content (for example, the social network might choose your sidebar or menu information that isn’t directly related to the post).
In order to get the best results from your content, the meta description should be targeted toward search engines while the og description is targeted toward social shares. There should be no duplicate descriptions on your site.
3. Open Graph Image
These tags are also in the top three when it comes to importance. All major social media networks use Open Graph Image tags whenever your content is shared.
Social Networks: Facebook, LinkedIn, Google My Business
Significance: Required
Multiple uses on one page: Yes
Placement of Tag: <Head>
Example: <meta property=”og:image” content=”http://domainname.com/image-path.jpg” />
Image Recommendations for og:image tag
You can add more than one og:image tag to each of the pages on your website. The first Open Graph Image tag in your <head> code is usually the one used as a default image for shared content. But, it’s beneficial to add more image tags because for the Facebook ‘share’ button, using more than one og:image tag will allow the user to select the image that they want to share.
Because some social networks have restrictions in place about the size of the shared image, when you provide extra options you increase the chances that the best image is available to be displayed by the networks. Always set at least one image tag on your page, otherwise, you run the risk of having the social network choose some generic image or even something totally unrelated to your content, like an RSS icon!
Selecting an image for the og:image tag
Set an image that is at least 200 x 200 pixels
Whenever possible, use an image that is over 1000 x 1000 pixels
Images with a 1.9:1 aspect ratio are recommended by Facebook
A ratio of 1:1 (square) with the primary content centered is best if you’re targeting other social networks in addition to Facebook as it gives each one the option of cropping the image as needed.
4. Open Graph Site Name
These use of the Open Graph Site Name tags can help to increase your branding as the name of your site may be included in posts.
Social Networks: Facebook, LinkedIn, Google My Business
Significance: Not required, but useful
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta property=”og:site_name” content=”EnterYourSiteNameHere” />
Setting the Site Name:
Rather than using your URL here, use the actual name of your website. For instances where your object is a part of a bigger website then you should use whichever name should be shown for the overall site.
5. Open Graph URL
These tags are a unique identifier for your content. On some social media networks, it’s important to set these if you’re going to aggregate shares and likes for that URL.
Social Networks: Facebook, LinkedIn, Google My Business
Significance: Not required, but useful
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta property=”og:url” content=”http://www.YourSiteHere.com” />
Setting the URL:
The URL set will be the one used for the classification of all comments and shares. If you make any changes to it, future shares will be attributed to another URL which means that you will lose the shares, likes, and comments that you’ve received up to that point.
6. Open Graph Type
The Open Graph Type tags are great for indicating the type of content being shared. Various social networks may display your content differently depending on the type of media. In addition to that, different types of content may come with extra fields for describing your content in more detail.
Social Networks: Facebook, LinkedIn, Google My Business
Significance: Not required, but useful
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta property=”og:type” content=”article” />
List of Common Open Graph Types:
book
article
website
profile
music.playlist
music.album
music.song
music.radio_station
video.tv_show
video.episode
video.movie
video.other
7. Facebook App ID
These tags tell Facebook the identity of your site and this provides extra benefits such as authentication capabilities, comments moderation, and social analytics to your site.
Social Networks: Facebook
Significance: Not required, but useful
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta property=”fb:app_id” content=”0123456789″ />
A Facebook App ID tag is not a requirement for comments, likes, or other widgets to function but if you create a Facebook Application this allows you to enable additional features on your websites such as Open Graph Actions, Invitations, and Facebook authentication.
Twitter Cards: Critical Tags
Basically, these do exactly what Open Graph tags do. The only real difference is that they are only relevant to Twitter. Twitter Card tags create ‘cards’ that are then shown next to the tweets that your site is included.
You can use Twitter Cards to attach videos and images to your tweets with just a few lines of code. There are a few different types of Twitter Cards, but only two are most commonly used for standard blog posts and articles: Summary Cards and Photo Summary Cards.
Important Note: If you want Twitter to include a ‘card’ for your site, you first have to get approved. Luckily, this is easy to do and doesn’t take any time at all.
The basic tags for Twitter are:
1. Twitter Title
2. Twitter Description
3. Twitter Image
4. Twitter Card
5. Twitter Site
6. Twitter Creator
1. Twitter Title
There are three very important tags to use on your website for your Twitter social sharing and this is one of them. The Twitter Title tag determines the title for all the URL’s social posts.
Social Networks: Twitter
Significance: Required
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta name=”twitter:title” content=”Enter Article Title Here” />
Instead of using the standard HTML title for your page, it’s a good idea to set the Twitter title because you can customize it for your audience and it will always be targeted toward social media networks and shared views.
The meta title, on the other hand, is meant for search engines and browser tab names. Also, search engines and browser tabs typically only use a small part of the title. Using a Twitter title gives you more to work with because you can use up to 70 characters.
2. Twitter Description
This tag is also in the top three tags to use for your Twitter social sharing because Twitter uses it directly to represent your content on the social network.
Social Networks: Twitter
Significance: Required
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta name=”twitter:description” content=”Enter Twitter Description For Page Here” />
Setting the Twitter description for your page:
Don’t reuse the meta description for the page. Your meta description should be totally targeted toward the search engines and descriptions shouldn’t be duplicated across your site.
Don’t use the same title text as the description
Customize the Twitter description by summarizing your page content using up to 200 characters. When you set a specific Twitter Description this way you ensure that your content will be represented exactly as you want it to when it is shared.
3. Twitter Image
Image tags for Twitter are also among the three most important tags to use on your site. When content is shared, Twitter uses these to represent the content of that particular page.
Social Networks: Twitter
Significance: Not required, but useful
Multiple uses on one page: Yes
Placement of Tag: <head>
Example: <meta name=”twitter:image” content=”http://domainname.com/path-to-image.jpg” />
Recommendations for Twitter Image
You can add multiple twitter:image tags to the pages of your website. The first image tag in your <head> section is typically the one used as the default image for all social shares. But, there are advantages to adding more Twitter Image tags.
There are restrictions on the dimensions of images that you share on Twitter and when you add more image tag options you help to ensure that the best possible image will be available for display on the network. When you don’t set any twitter:image tag there is a chance that the social network will choose an image that they feel represents your content best. The image they choose will most likely not be relevant to the content.
Selecting an image for the twitter:image tag
Choose an image that is at least 120 x 120 pixels
The maximum image size on Twitter is 1MB
1:1 (square) ratio with centered primary content works best.
Twitter resizes images that are larger than 120 x120 pixels, images will also be cropped down to square shapes based on their longest dimensions.
4. Twitter Card
These tags are also important to use on your site for your social shares on Twitter. They tell Twitter what type of card you’re defining for your page.
Social Networks: Twitter
Significance: Required
Multiple uses on one page: No
Placement of Tag: <head>
Example: <meta name=”twitter:card” content=”Product”/>
The Following Types of Cards are Supported on Twitter:
– Summary Card: This is a default card that includes the title, description, and thumbnail as well as Twitter account attribution
– Photo Summary Card: This is just like a Summary Card except it allows you to feature an image that is larger and more prominent
– Photo Card: This is a Tweet-sized card
– Gallery Card: This card is meant for highlighting photo collections
– App Card: This card provides the profile for an application
– Player Card: This is a Tweet-sized video, audio, or media player card
– Product Card: This Tweet Card is a better way of representing product content
5. Twitter Site
These tags show the Twitter account for the particular site or platform where the content was published for. The Twitter Site tag allows users to follow and view your website’s profile.
Social Networks: Twitter
Significance: Not required, but useful
Multiple uses on one page: No
Placement of Tag: <Head>
Example: <meta name=”twitter:site” content=”@username” />
Setting the twitter:site tag for your website:
The twitter:site tag is the ‘@username’ for your site that is used in the footer of the Twitter Card. Some companies may have more than one Twitter account for different sections of their website. In such a case, choose the account which is the most appropriate.
6. Twitter Creator
The Twitter Creator tags show the Twitter account of the person responsible for the creation of the card content. Users can follow and view that person’s profile via the site tag.
Social Networks: Twitter
Significance: Not required, but useful
Multiple Uses on one page: No
Placement of Tag: <Head>
Example: <meta name=”twitter:creator” content=”@yourhandle” />
Setting the twitter:creator tag for your profile:
When you set the tag for Twitter Creator, use the content author’s “@username”.
How to Implement Open Graph the Easy Way: Plugins
If accessing the <head> section of your site each time you want to write a new post isn’t an option, you can install a plugin that can neatly do all the work for you. Facebook has an official plugin, but there are other options. Whichever CMS you use, WordPress, Drupal, Joomla, Zen Cart, or Magento – there are loads of Open Graph plugins and extensions to choose from.
Some options include:
– WordPress SEO by Yoast (Open Graph tags and Twitter Cards)
– WPSSO (Social markup for all major social networks)
– JM Twitter Cards (Full range of Twitter Cards)
If you’re using WordPress, you can easily install a plugin like WordPress SEO by Yoast. This plugin makes it super easy to add Open Graph tags. It’s a quick way to associate each post with its own custom titles, descriptions, and images without ever writing a line of code.
How to Implement Yoast SEO Plugin on WordPress
– Log in to your WordPress Website
– Go to the menu on the left side of your dashboard
– There you’ll see ‘SEO’, click it and more settings will show
– Next, locate and click ‘Social’ and then click ‘Facebook’
– Now toggle “Add Open Graph metadata” and enable wpseo_social_facebook
To customize your og tags, add an image to be used as the default for all pages that don’t have images. You can also set the homepage Open Graph here if you don’t have a static homepage.
Now click ‘Save Changes’ and you’re done!
Simple, right?
Editing og tags on your page/post:
To edit the Open Graph tags, find the Yoast SEO Metabox. Click on the share icon and then enter your custom Meta and Facebook Descriptions. This is also where you can upload your unique image for Facebook.
Conclusion
While these social meta tags aren’t a requirement on your site, having them will certainly give you a whole lot more control over the appearance of your content shared on social networks. The way your content is represented on these social media sites could have a significant impact on your engagement levels. Now that you know all the basics, it’s time to get started optimizing your site for social media.
