fokicollector.blogg.se

HTML SOCIAL MEDIA META TAGS HOW TO
HTML SOCIAL MEDIA META TAGS MOVIE

og:description, a description of the content of that page.

Five tags are required to generate a sharable preview: Sharing previews have very similar, but crucially slightly different, requirements. Īs an example, the following is the Open Graph protocol markup for The Rock on IMDB:

og:url is the canonical URL of your object that will be used as its permanent ID in the graph - e.g., “.

og:image is an image URL that should represent your object within the graph.

og:type is the type of your object - e.g., “video.movie.” Depending on the type you specify, other properties may also be required.

og:title is the title of your object as it should appear within the graph - e.g., “The Rock”.

The Open Graph website has a great walkthrough of the minimum requirement for Open Graph: Now that we understand what sharing previews give us, let’s demonstrate how they work. There are many purposes for this, but for this tutorial, we’ll focus solely on sharing. Open Graph is all about meta tags - specifically, adding meta tags to an HTML page to explicitly define pieces of standardized information. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. The Open Graph protocol enables any web page to become a rich object in a social graph.

The Open Graph protocol, introduced by Facebook, describes itself as follows: Twitter made this card using a combination of Open Graph meta tags and some custom tags that my blog surfaces. Conversely, it increases the likelihood that the reader will click if it does seem intriguing. It potentially saves them a click if it’s obvious that the post isn’t particularly interesting to them. It contains an image, the title of the blog, and a description of the post as well.Īside from looking pretty fabulous, this preview gives the reader of the tweet some fairly rich information about what might be in that post. Sharing a link automagically generates a preview card at the bottom of the tweet.

Here’s an example of what happens when I share a link to a blog on Twitter: You may have noticed that when you share a URL, the platform on which you’re sharing displays a preview of the link.

In this guide, we’ll show you how to implement Open Graph tags for sharable previews (often called social media previews), introduce you to the tools you can use, and also examine the different platform rendering issue. The Open Graph protocol has become the standard mechanism for sharing rich content on the web.

John Reilly Follow MacGyver turned Dev 🌻❤️ TypeScript / ts-loader / fork-ts-checker-webpack-plugin / DefinitelyTyped: The Movie Open Graph: How to create sharable social media previews

HTML SOCIAL MEDIA META TAGS HOW TO

HTML SOCIAL MEDIA META TAGS MOVIE