![]() ![]() Refer to the Twitter Cards and Open Graph documentation for more detailed information.Metadata is the abstract of the website's content and is used to attach a title, a description, and an image to the site. You now know how to set up a minimal set of metadata to show rich link formatting on various social sites. ![]() If a site or community is important to you or your business, look for their developer documentation to see if they provide a similar service to test with. The following official validators all require you to log into their service before using: The Open Graph Debugger is an unofficial simulator that shows both Twitter Card and Open Graph information, and doesn’t require an account to use. There are a few tools you can use to preview how your meta tags would display on a website. More information on the Open Graph protocol is available on the official Open Graph protocol website. og:image: an image to associate with the page.og:url: the permanent ( canonical) URL of the page.There is no specified character limit, but Twitter’s limit of 200 characters for this purpose is a good guideline. og:description: a short description of the page.This could be the of your page, or you could tailor it specifically for link sharing. See the official og:type documentation for more. Some type examples are article, book, and profile. og:type: the “type” of the content being described.Place these tags in the of your HTML document, updating the highlighted portions as needed. A minimal set of Open Graph tags is shown below: The markup for Open Graph is similar to Twitter Cards: some tags in the of your HTML document. Sites like Facebook, LinkedIn, and Pinterest use Open Graph to display links. The Open Graph protocol is an open standard for metadata that many websites use to display rich link previews to their users. This metadata should result in a Twitter Card that looks like the following:įor more information on other Twitter Card tags and options, visit the official Twitter Cards documentation. The image may be automatically cropped to display in differently sized cards, so it is a good idea to have the main focal point in the center. Most standard image formats (JPG, PNG, GIF) are acceptable, but it must be less than 5MB in size. This should be a maximum of 200 characters, and may be truncated even further when displayed. twitter:description: a brief description of the page that will be displayed under the title.This could match what you’ve put in your tags, but it doesn’t have to. twitter:title: the title you’d like used in the card.twitter:site: your Twitter username, or your site or company’s username.The summary_large_image type displays a short summary with a large image preview. twitter:card: this tag specifies the type of Twitter Card that should be displayed.Let’s walk through each tag we just added: To add basic Twitter Card metadata to your site, place the following tags in between your existing and tags: īe sure to update the highlighted portions with your own information. The full Twitter Card markup specification has many options, but you can start with the most basic information and expand from there. Twitter Cards are a metadata specification used by Twitter to display rich text, imagery, and video when links are shared on the service. Adding Twitter Card Metadata to a Webpage In this tutorial you will learn how to add both Twitter Card and Open Graph metadata to your webpage. There are two main standards that determine how to format this metadata: Twitter Cards, and the Open Graph protocol. You can add these rich media social sharing capabilities to your site by including certain tags in the of your HTML document. For instance, here is how Twitter would display a link to this tutorial series: When you share links on social media platforms, they’ll often be presented with rich imagery and a nicely formatted title, summary, and link, instead of plain text.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |