Using Open Graph tags, you can make sure your site will be correctly previewed on Facebook, Twitter, and other social networks.
You can use meta tags to specify your Open Graph settings in the HTML head.
<meta property="og:type" content="website" />
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:title" content="My Website" />
<meta property="og:image" content="http://www.navipedia.net/images/a/a9/Example.jpg" />
These tags are enough to make your site properly came up when sharing the link to it.
Do you want something different than a website as a type? Here are all the Open Graph types.
Do you have a Facebook application for your site? Perfect! Let's add that.
<meta property="fb:app_id" content="0000000000000000" />
You can see how your crawled site looks like on Facebook with this dev tool.
Do you have a Twitter handle for your site? We can add that too!
<meta name="twitter:site" content="@skiilaa">
Note that we are using the name attribute, not the property attribute in the meta tag.
You can see how your crawled site looks like on Twitter with this dev tool.
Do you want some other card style than the default one? We can fix that.
<meta name="twitter:card" content="summary_large_image">
Top comments (0)