Social media meta tag6/11/2023 NOTE: all meta tags should be placed at the head of your web page. This allows for both to be defined on the page independently and minimizes the amount of duplicate markup required to describe content and experience. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. NOTE: Images for Twitter Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or a maximum of 4096x4096 pixels. twitter:description - the description of your web page.twitter:title - represents the web page title.Just like the Open Graph, the Twitter meta tags have a property attribute with the twitter: prefix. It is called a Twitter Card and it looks very similar to the Open Graph cards. Open graph meta tags, also called OG:meta or OG tags, give you control over how your web pages are previewed on social networks. Unlike other social media platforms, Twitter has its own unique meta tags for displaying cards. NOTE: Recommended image size for the Facebook card is 1080 pixels in width and the minimum is 600px in width. og:description - the description of your web page.og:title - represents the web page title.There are quite a few properties you can use for the Open Graph meta tags, but the four required ones are: These meta tags have a property attribute that contains a value with the og: prefix and the content attribute. The Open Graph meta tags are used by most of the social media platforms, most known are Facebook and LinkedIn. Open Graph meta tags (Facebook, LinkedIn) If no social media meta tags are specified then the shared webpage will be represented as a regular link. When a link is shared on a social media platform it scans the page for specific meta tags, and then it takes the data from these meta tags and displays it in a form of a card. Like page title, description, and an image. Facebook social media card Twitter social media card LinkedIn social media cardĪ social media card acts as a teaser to a webpage, by providing users with some information on what kind of content it has. You most probably have already seen these on Twitter, Facebook, and LinkedIn. What is a social media card?Ī social media card is a visual representation of the content of a specific web page on a social media platform that it is being shared on. To do so you’ll need to add HTML meta tags for social media. Twitter will use these tags to enhance the display of your page when shared on their platform.Your website can have a social media card so that when you share it online it looks more appealing and provide additional information for people. Twitter cards work in a similar way to Open Graph, except you add these special Meta tags only for Twitter. Here is a sample of how Open Graph tags look like in standard HTML: Open Graph Meta tags are designed to promote integration between Facebook, LinkedIn, Google and the website URLs that you shared on these platforms. Social Media Meta Tags (Open Graph and Twitter Cards) You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places.Facebook requires you to provide the unique ID and Twitter calls it their Twitter Card tool Both Facebook and Twitter have an analytics tool. Twitter twitter:image Add a unique not a generic image representing the content at least 280x150 pixels Facebook og:url The canonical URL for your page without session variables, user id parameters or counters Do not re-use the title as the description Facebook og:image The URL of the image, at least 600x315 pixels, preferable 1200圆30 pixels Twitter twitter:description A brief description of the tweet max. 70 characters Facebook og:description A short description of min. If you don’t define your card, Twitter will default to summary. You have three options with Twitter: photo (for images), player (for videos), and summary (for everything else). Twitter twitter:title A brief but comprehensive title of max. This meta tag describes the type of content you are sharing. Facebook og:title The title, name or headline When a link is shared, Facebook and Twitter spider the page for specific tags to display the information. There is a whole list of items you can add but there are four that are actually required. Key Points on how to add Social Media tagsįacebook and Twitter use the open graph protocol.
0 Comments
Leave a Reply. |