About

SocialMediaStandards.org collects all the different standard sizes, libraries and best-practices for building and maintaining websites that are promoted on Social Media.

Have you ever wondered "What is the correct size for Twitter Images?" or "What should the Like button on my website point to?" We publish this info.


Profile Image Sizes

Profile Images are the images hosted by a Social Network and used to visually identify your account.

Network Type Dimensons (W x H) notes
Facebook profile photo 180 x 180 displays at 160, 140, 50; can usually use the twitter photo; has specific margins
Facebook page cover 851 x 315
Twitter profile header 1500 x 500
Twitter profile photo 400 x 400

Content Image Sizes

Network Type Dimensons (W x H)
Facebook Large Image - HiRes 1200 x 630
Facebook Large Image 600 x 315
Facebook Minimum Size 200 x 200
Google article preview 160 x 90
Twitter summary_image 120 x 120
Twitter summary_large_image 280 x 150

Notes:

  • Facebook
    • Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping
    • Images must be pre-cached on the first-share so either...
      1. Pre-cache the image with the URL Debugger Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
      2. Use og:image:width and og:image:height OpenGraph tags Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
  • Twitter
    • 120x120 is the minimum size
    • Images for this summary_large_image should be at least 280px in width, and at least 150px in height. Image must be less than 1MB in size
  • Google
    • Images must be at least 160x90 pixels and at most 1920x1080 pixels

References:


Promotion

Integrating your content against social networks can be hard because everyone has different best-practices and requirements.

Standard Metadata

At a bare minimum, you should contain:

canonical url <link rel="canonical" href="http://example.com/blog" />
The canonical url is used to represent a "unique" "master version" of a web page to filter out duplicate content. This allows you to transfer the search engine equity and object graph placement of one URL onto another. Examples: your `mobile` specialized item page will list the normal item page as the canonical; a URL with lots of querystrings like timestamps and session ids will omit them.
title <link name="title" content="My title" />
The title appears on search engines; several social networks may use it as a default title for social representation as well.
description <link name="description" content="My Description" />
The description appears on search engines; several social networks may use it as a default description for social representation as well.
keywords <link name="keywords" content="Example Keywords, Best-Practices" />
Search engines may use keywords when indexing your website. Be careful not to "overstuff" or use non-relevant concepts, because you will be penalized.

Facebook

"Like" buttons for your brand should point to the URL of your Facebook profile, not your web page. This will ensure you have more "likes", because they won't be split between your website and the Facebook page representing it (the facebook page is promoted within Facebook via the newsfeed and other social sharing). Facebook "Like Button" documentation - https://developers.facebook.com/docs/plugins/like-button

Facebook uses an extension of the OpenGraph protocol to markup pages. There is more info on their "Sharing Guide for Webmasters" https://developers.facebook.com/docs/sharing/webmasters#markup

required og:url The canonical url for the page. You should also duplicate this in a `canonical` tag on metadata.
required og:site_name The name of your website or brand.
required og:title The title of the article or web page for Facebook. This should not contain your brand name, which should be placed in `og:site_name`
required og:image The url for the image. The image should be in line with the Facebook Content Sizes above. `og:image` can also be a namespace that specifies the width, height, https url and image type. See Facebook's developer docs for more info https://developers.facebook.com/docs/sharing/webmasters#images
recommended fb:app_id This will enable domain insights.
optional og:type The type of media. A full listing is available at https://developers.facebook.com/docs/reference/opengraph#object-type
optional og:locale The locale. Defaults to `en_US`.
optional og:video The URL for a video, or a namespace of video data.
Tools
Twitter

Twitter "Follow" button documentation - https://dev.twitter.com/web/follow-button

Twitter uses their own 'cards' extension to metadata. You can learn more about cards here: https://dev.twitter.com/cards/types

Tools

Advertising

If you are purchasing Advertising on these networks, there are some guidelines and best-practices

Facebook

Facebook maintains a list of Ad Guidelines here: https://www.facebook.com/policies/ads/

Here are the (current) highlights:

  • Ads may not include images with text that covers more than 20% of the image's area.
  • Ads have restrictions on how you use the term "Facebook".
  • There are policies for Age-Restricted materials and prohibited content.

When running a Facebook ad, you can choose targeting. It is often a good idea to remove your own network of friends from the audience, as they will see your promotions through organic reach of your posts.

Standards

Type Standard Info
Authorization oAuth oAuth provides for secure authorization. "The OAuth 2.0 authorization framework enables a third-party application to obtain limited access to an HTTP service." Twitter and Facebook APIs are both based on oauth. There are clients and servers available for nearly every language and platform.
Authorization JSON Web Token (JWT) "JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed." (from their docs)
Page Metadata The Open Graph Protocol "The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook." (from their docs)
Page Metadata DublinCore "The Dublin Core Metadata Initiative, or "DCMI", is an open organization supporting innovation in metadata design and best practices across the metadata ecology." (from their docs)

Web Libraries

These are some common web-libraries that help developers build pages and sets.

Library Type Library Name Link Recommended Notes
Javascript jquery jquery.org high
HTML/CSS Bootstrap getbootstrap.com high
HTML/CSS - Icons FontAwesome https://fortawesome.github.io/Font-Awesome/ mixed FontAwesome has been adding "brand icons" at an alarming rate, and the package is quite bloated. Customization with 3rd party tools is highly recommended.
HTML/CSS html5boilerplate https://html5boilerplate.com html5boilerplate integrates nomalize.css, jquery, modernizr browser detection, and some other libraries into a useful toolkit.
HTML/CSS/JS React https://facebook.github.io/react/ high react is a javascript library from facebook that is used for building user interfaces
HTML/CSS/JS Dust.js http://www.dustjs.com/ high dust is a low-logic templating language that was first implemented in javascript and is now maintained by linkedin. it has been ported to several other languages, including python's ashes. dust allows for templates to be rendered by a browser (or on a server)
HTML/CSS/JS Mustache https://mustache.github.io/ mixed mustache is a logic-less tempalting language first implemented in javascript. it is very fast, but also limited in use because it is logic-less. many people may prefer dust.js above. twitter maintained/maintains the hogan project that is a faster compiler for Mustache.