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|
|profile photo||180 x 180||displays at 160, 140, 50; can usually use the twitter photo; has specific margins|
|page cover||851 x 315|
|profile header||1500 x 500|
|profile photo||400 x 400|
Content Image Sizes
|Network||Type||Dimensons (W x H)|
|Large Image - HiRes||1200 x 630|
|Large Image||600 x 315|
|Minimum Size||200 x 200|
|article preview||160 x 90|
|summary_image||120 x 120|
|summary_large_image||280 x 150|
- 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...
- 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.
og:image:heightOpenGraph tags Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
- 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
- Images must be at least 160x90 pixels and at most 1920x1080 pixels
Integrating your content against social networks can be hard because everyone has different best-practices and requirements.
At a bare minimum, you should contain:
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.
The title appears on search engines; several social networks may use it as a default title for social representation as well.
The description appears on search engines; several social networks may use it as a default description for social representation as well.
Search engines may use keywords when indexing your website. Be careful not to "overstuff" or use non-relevant concepts, because you will be penalized.
"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
||The canonical url for the page. You should also duplicate this in a `canonical` tag on metadata.|
||The name of your website or brand.|
||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`|
||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|
||This will enable domain insights.|
||The type of media. A full listing is available at https://developers.facebook.com/docs/reference/opengraph#object-type|
||The locale. Defaults to `en_US`.|
||The URL for a video, or a namespace of video data.|
- URL Debugger / Linter Facebook offers a debugger that will parse a page for Open Graph markup. https://developers.facebook.com/tools/debug/
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
- Follow Button Generator Generate a follow button for your account. https://about.twitter.com/resources/buttons#follow
- URL Debugger / Linter Twitter offers a tool that can parse your page for cards markup. https://cards-dev.twitter.com/validator
If you are purchasing Advertising on these networks, there are some guidelines and best-practices
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.
|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)|
These are some common web-libraries that help developers build pages and sets.
|Library Type||Library Name||Link||Recommended||Notes|
|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.|