This is a comprehensive guide for making links from your website look good when shared on Facebook, Twitter, or Google+.
All of these features are free to implement. You’ll need to either register for an account on each platform and in some cases create a “Page” for the entity (organization, brand, etc) for the website you’re developing. Most of the platforms share the same if not similar settings. We’ll walk through all of the options in a combined view and how you can optionally customize to a particular platform.
The HTML Head
All of the information we need to define is in the <head> of the HTML. The order of the tags don’t matter so long as they are within the <head> tags of the document. When any user of these services posts a status with a new URL, that platform will look at the HTML <head>.
Note: The tags must be readable within the HTML source itself. Adding tags in via JavaScript will not work.
The Complete Set
Here’s the complete set of tags using my production company Space Between Studios as an example.
<meta property=”og:url” content=”http://spacebetweenstudios.com/”>
<meta property=”og:title ” content=”Space Between Studios”>
<meta property=”og:description” content=”An independent game studio of non-fiction games.”>
<meta property=”og:image” content=”http://www.spacebetweenstudios.com/dist/img/sbs_logo_512.jpg”>
<meta property=”og:type” content=”website”>
<meta property=”og:site_name” content=”Space Between Studios”>
<meta name=”twitter:site” content=”@SpaceBtwStudios”>
<meta name=”twitter:card” content=”summary_large_image”>
<meta property=”fb:app_id” content=”xxxxxxxxxxxxxxx”>
<link rel=”publisher” href=”https://plus.google.com/105806783098119777725″>
With the above, this is how Facebook presents the link:
How Twitter presents the link as a Twitter Card:
Assuming you haven’t simply copy/pasted the above, let’s talk about each element and how to extend each element for specific platforms.
OG:URL
This is the canonical url of the content and the trickiest parameter in the set. It must be the absolute location of the URL, including the domain, in order for the social media platforms to display content unique to the page.
To prove the point, let’s say you define og:url to this for all pages:
By doing that, any links shared in Facebook will resolve to https://www.apple.com/ when a user attempts to share http://www.apple.com/iphone/.
Why is this the case? Declaring a canonical URL will resolve any link shortener or URL parameters used to the same URL. That way a URL shared like this:
… will resolve and shared as …
This is important both for the media information and the analytics in sharing your URL.
OG:TITLE & OG:DESCRIPTION
The two most important tags: Title & Description. These strings fill in the title and description blocks on a rich media display. The two below will work for all social media platforms.
There are character limits to each of these fields. Up to 70 characters for title and 200 characters for description is safe on all platforms. If you do go over, all of the platforms will truncate these fields gracefully if you go over this limit.
Twitter Cards
If you want a different title and/or description for Twitter Cards, use the following tags. The OG tags will continue to work for Facebook, Google+, but Twitter will use these when either are defined.
OG:IMAGE
The absolute URL of an image you want to display.
By defining the image, Facebook & Google+ will use only this image when the link is shared. No user-selected rotation of images! When the image’s resolution matches specifications, the display will become richer as well.
The image itself should be at least 1200px x 630px with an aspect ratio of 1.91:1. It’s the Facebook specification that the other platforms take cue from. The platforms will resize and resample the image, so make sure to keep the compression lite on the image. The size of the file won’t effect page loads on your site.
Twitter Cards
Twitter will use the same image defined in og:image unless you define a different twitter:image.
This image should be at least 560px by 300px for the summary_large_image type, or 300px square for summary card type. Regardless, go as large as you can without going over the 1MB file size limit.
og:type
og:type defines the type of object the website represents. The value website is the default and should fit most of your needs.
There are other types including video, music, book, profile and article. Each of these types contains additional fields to further define these items, but these things are not required for Rich Media social links. If you want to expand on these, look at the Open Graph docs for more info.
twitter:card
Unlike og:type, twitter:card defines the style of Twitter Card to use. At the time of this writing, there are three types available:
Summary with Large Image
Displays a wide square image, title, description, and Twitter accounts you include in your tags. This is your ideal presentation. Use the value summary_large_image to invoke this card type.
Summary
Similar to the summary with large image, but with a smaller, square image display. Use the value summary to invoke this card type.
Other Types
There are other Twitter Card types including App, and Player cards. The player card is for music or video clips and must be pre-approved by Twitter to be enabled. The App card type allows for linking directly to an App Store for your app, or direct linking if the user has the app installed.
Site Name
og:site_name allows you to display the name of the website. This allows your website to have a real name in addition to the domain name.
Twitter Cards
Unlike the other fields, the Site name display for Twitter Cards doesn’t fall back to OpenGraph. Instead, you will need to define twitter:site using the Twitter account of the organization of the website.
If the page you’re viewing is authored by someone other than the account defined in twitter:site, you can additionally define the Twitter account of that user using this tag:
This displays the creator of the content’s Twitter handle in Large Summary cards.
Facebook AppID
Putting in the optional fb:app_id tag allows you to view Insights data for shares from your website. You will need to create a Facebook Application for this to work. Replace the x’s with the Application ID number.
This WILL NOT force users to install a Facebook app! It’s used to attach statistics to a specific Facebook App. From there, you can assign permissions to view the Insights analytics data from Facebook.
Google: “Publisher” tag
While not exclusively for Social Media, the publisher tag opens up a number of features on Google services including Google+ and Knowledge Graph on search.
If this is your personal website, use your personal Google+ URL. If it’s a company or product, use or create a Google+ URL for that product or origination.
Registrations
Each platform has a different setup requirements in order to either enable rich media or to extend with certain features.
Facebook doesn’t require anything to enable rich display of links. Just make the tags.
If you want to have Facebook Insights, you are required to register a Facebook app. Don’t panic! Users don’t “install” a Facebook app! The app allows you to claim ownership to view Facebook’s analytics data within the domain.
Setup is pretty simple with your personal Facebook account.
- Go to the Facebook App Dashboard.
- Note: If this is your first time making a Facebook App, you may need be asked for some additional information.
- Click the “Create New App” button.
- Create the app!
- Fill out the form with the name of your website and something similar for the namespace.
- Make note of the App ID.
- Make sure to add the domain of the website to the “App Domains” under the Settings section.
- Add the following tag to all pages on your site, replacing the x’s to the App ID.
You must register with Twitter after all your tags are publicly accessible on your website. Once approved, links to your site from all users will have Twitter Cards enabled.
You’ll need your Twitter account credentials to gain access. It’s OK to use your personal one or your organization’s Twitter account.
Enter one URL for each card type used on your domain. After previewing the card, you will need to submit the card for approval, filling out additional contact information. Approvals take between 5 minutes to 48 hours.
Once done, the entire domain will be enabled for each type of card you’ve submitted. There’s no need to resubmit for every URL, unless you incorporate a new card type.
Google+
Besides defining the Publisher tag, there are no other registration steps required for Google+. However, it’s good to make sure your site is registered with Google Webmaster Tools.
Documentation & Tools
- Facebook:
- Twitter:
- Google+: