In the end, except for the necessity of specifying a display format, none of the custom Twitter tags are needed. Too much information never hurt anyone except by adding a few extra bytes to the HTML file.īut for our purposes, and for the sake of brevity, we can leverage the fact that Twitter allows us to substitute Open Graph tags for its own. There’s no harm with having multiple tags that appear redundant. Since these proprietary tags are, in the end, referring to the same elements, it would be ideal if there were somehow a way to reconcile the two. This should be the undecorated URL, without session variables, user identifying parameters, or counters. Images for this Card should be at least 280px in width, and at least 150px in height. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Stay close to a 1.91:1 aspect ratio to avoid cropping.Ī URL to a unique image representing the content of the page. It should be at least 600×315 pixels, but 1200×630 or larger is preferred (up to 5MB). You should not re-use the title as the description or use this field to describe the general services provided by the website. Ī description that concisely summarizes the content as appropriate for presentation within a Tweet. Ī short description or summary of the object. The title, headline or name of the object.Ī concise title for the related content.
Note that, for our purposes, Facebook is referring to the shared Web page when using the term “object”: They are quite similar to each other, although they can be somewhat subjective in interpretation.
WEBSITE SOCIAL MEDIA META TAGS HOW TO
The type of display format we’re requesting from Twitter is also specified: īoth Facebook and Twitter offer guidelines on how to use the above tags. As with Facebook, only a few are required. Twitter has its own tags that are similar to the Open Graph protocol, but uses the “twitter” prefix instead of “og”. There are so many from which to choose that it can be somewhat intimidating, but only four are actually required: Ī previous version of this post listed these four A complete list of tags available can be found at the Open Graph Web site.
When a link is shared, both Facebook and Twitter scrape the associated web page and read its tags to display the appropriate information.įacebook uses tags leveraging the Open Graph protocol, a classification system for Web pages that extends beyond those tags already defined in HTML5. How do we specify these attributes? With tags. Twitter, as well, has multiple ways to format shared web pages that appear in its feed, but we’ll look at the one that’s quite similar to the above example from Facebook, which Twitter calls the “Summary Card with Large Image”: Twitter cardĪs we can see, each features multiple attributes of the shared Web page: Let’s say someone has shared the home page of a fictional travel company – Facebook displays it like this: Facebook card Unless otherwise specified, every website defaults to the type called, appropriately, “website”, which is the example we’ll use. Sharing on Facebook and Twitterįacebook offers developers various options on how a shared web page appears in its timeline depending on the website’s content. Facebook and Twitter are, by far, the most popular social media platforms, so let’s focus on those two. When users choose to share these links, it is tasked to the web developer to make sure that the associated web pages are properly prepared, which is what we’ll look at now. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is one of the most effective ways for businesses and individuals to gain awareness. We’ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked.
WEBSITE SOCIAL MEDIA META TAGS FOR FREE
After you have implemented the required tags you should test the implemantation for free with the Open Graph Check.These days, almost every website encourages visitors to share its pages on social media. If you want to learn everything about the Open Graph protocol you should read the documentation. There are tons of optional Open Graph tags - but if you have a valid implementation of the required tags you should be fine and already ahead of your competition. The following example illustrates the basic implementation:
The usage of Open Graph tags is largely self-explanatory. There are four required tags for every page: Which Open Graph Tags should I implement?įor a valid Open Graph implementation, you need to put certain tags to your pages.
0 kommentar(er)
