On the open graph home page it shows the following :
As an example, the following is the Open Graph protocol markup for The Rock
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
Now certain services, like twitter and facebook, can use this information within their own site when linking to the url? Trying to get the terminology correct as well. Any links to open servces (edu) of og markup in web page and its use on another site appreciated.
OG Protocol is useful for Facebook only, not Twitter, which needs it's own tags for Twitter Cards.
For Facebook, your tags must be complete, like this block:
<meta property="fb:app_id" content="ENTER YOUR APP ID"/>
<meta property="fb:admins" content="ENTER YOUR PERSONAL ID"/>
<meta property="og:site_name" content="ENTER SITE NAME" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ENTER SITE TITLE"/>
<meta property="og:description" content="ENTER SITE DESCRIPTION"/>
<meta property="og:url" content="ENTER SITE URL" />
<meta property="og:image" content="ENTER IMG URL" />
<meta property="og:image:type" content="image/png" /> <!-- enter IMG extension -->
<meta property="og:image:width" content="1200" /> <!-- enter IMG width, in px -->
<meta property="og:image:height" content="630" /> <!-- enter IMG height, in px -->
Images for big facebook cards should be 1200px x 630px and to small, 600 x 315 px, so they will fit perfectly on the screen. You can check it here.
For facebook, it's also recommended that you add this to the <head>:
<head prefix="og: http://ogp.me/ns#>
Here you'll find a guide for best practices when sharing website content on Facebook. Here you'll find a full guide for OG Protocol and here you can find the Facebook Debugger Tool for OG Protocol.
Now, for Twitter, you will have to add its own tags, like that:
<meta name="twitter:card" content="summary_large_image"> <!-- there are other card types you can choose -->
<meta name="twitter:site" content="#YOUR_USERNAME">
<meta name="twitter:creator" content="#YOUR_USERNAME"> <!-- or author's name, if that is the case -->
<meta name="twitter:title" content="ENTER THE WEBSITE TITLE">
<meta name="twitter:description" content="ENTER THE WEBSITE DESCRIPTION">
<meta name="twitter:image" content="ENTER THE IMG URL">
You can find all Twitter Cards documentation here and the testing tool here
You can see working examples in this blog (Facebook & Twitter) and in this site (Facebook only).
Finally, to understand what those things do exactly, share these sites I provided you the links and you will see how the sharing posts look like on Facebook. If you don't want to share them publicly, restrict the post for yourself only, so you don't need to explain to your friends why are you sharing these contents! For Twitter, you can give a look at my own feed so you'll see some cards there.
Hope to have helped!
Related
Facebook fetches all pictures from my site.
I want to share only one picture which is on that page.
I heard about the og meta tag, but I don't know how to put it.
Use:
<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
Fill the content =" ... " according to the content of your page.
For more information, visit 18 Meta Tags Every Webpage Should Have in 2013.
Facebook uses what's called the Open Graph Protocol to decide what things to display when you share a link. The OGP looks at your page and tries to decide what content to show. We can lend a hand and actually tell Facebook what to take from our page.
The way we do that is with og:meta tags.
The tags look something like this -
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
You'll need to place these or similar meta tags in the <head> of your HTML file. Don't forget to substitute the values for your own!
For more information you can read all about how Facebook uses these meta tags in their documentation. Here is one of the tutorials from there - https://developers.facebook.com/docs/opengraph/tutorial/
Facebook gives us a great little tool to help us when dealing with these meta tags - you can use the Debugger to see how Facebook sees your URL, and it'll even tell you if there are problems with it.
One thing to note here is that every time you make a change to the meta tags, you'll need to feed the URL through the Debugger again so that Facebook will clear all the data that is cached on their servers about your URL.
I built a tool for meta generation. It pre-configures entries for Facebook, Google+ and Twitter, and you can use it free here: http://www.groovymeta.com
To answer the question a bit more, OG tags (Open Graph) tags work similarly to meta tags, and should be placed in the HEAD section of your HTML file. See Facebook's best practises for more information on how to use OG tags effectively.
I am using the facebook share plugin for the first time and I can't see that I'm doing wrong.
I am using their Like/Share buttons but can not get the share button to share the link that is placed in the OG:url tag, it shares the link that is also linked to the Like button.
I added
<meta property="og:url" content="https:///" />
<meta property="og:type" content="website" />
<meta property="og:title" content=" | „" />
<meta property="og:description" content="....." />
<meta property="og:image" content="/img/BG.png" />
and it still doesn't work.
The Like/Share div looks like this:
<div class="fb-like" data-href="https:/" data-width="" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
data-href is not supposed to be your Facebook page. data-href should be the current page the widget is on, and according to the documentation, should be the same as the open graph <meta property="og:url" /> content attribute:
og:url and data-href should use the same URL.
The open graph meta tags are really just meant for sites that need meta information about the page for generating previews - they are not even strictly necessary for the like button (but you should still keep/use them).
If you want to encourage page likes, you might want the Page Plugin.
Check the code href-data and og:url should contain same url of your site
check out this example of share/like button from Facebook developers site itself.
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />
<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
I have seen that when we put a url of a website, an image appears for that URL. Examples include social media sites Like Google+, Facebook, Instagram. I need to know how to add such an image to my website. Is there a certain tag Or script that should be applied to show that image?
When I share my website link I don't get such a one. I need to know why and how to do it.
OG tags are used by these social sites as below:
Site info OG tags Start
<meta property="og:site_name" content="$site_name" />
<meta property="og:url" content="$site_url" />
<meta property="og:type" content="website" />
<meta name="title" property="og:title" content="$the_title" />
<meta name="image" property="og:image" content="$site_logo"/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta name="description" property="og:description" content="$site_description" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" description="#username" />
<meta name="twitter:title" content="$the_title" />
<meta name="twitter:description" content="$site_description" />
<meta name="twitter:image:src" content="$site_logo">
<meta name="twitter:domain" content="$site_url">
Site info OG tags End
Add the following tags to the <head> section of the HTML code of the page you need to share:
<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />
And replace {image} with the URL of the page image.
When you add the tags, Social Media sites can still share the page without an image. It happens because sites cache pages data. You need to wait the cache to be cleaned or clean it manually (some sites, e.g. Facebook, provide this possibility; it is a topic for another question).
here is the image
anyone know? what's the problem
here are the tags i m using in html.
<meta property="og:type" content="product" />
<meta property="og:title" content="Deft Multi-concept Coming Soon Template" />
<meta property="og:description" content=" build you online presense righ now with a beautiful coming soon tempalte." />
<meta property="og:url" content="http://www.coderare.com/deft-coming-soon-template.html"/>
<meta property="og:site_name" content="Coderare" />
<meta property="og:price:amount" content="12.00" />
<meta property="og:price:currency" content="USD" />
<meta property="og:availability" content="instock" />
<meta property="og:image" content="http://www.coderare.com/img/5.png" />
and when ever i'm tring to validate my page it shows "Something went wrong on our end" what's that?
According to the pinterest documentation the product tags you have used are not the ones pinterest supports. Instead use product:price:amount product:price:currency
You might also want to include structured data from http://schema.org for information not included in the pinterest product tags, eg In Stock.
Stackoverflow's help section has further information on debugging steps that will help you narrow down problems to the exact lines that cause the errors.
I've got problem with the facebook image. My image is not being displayed on sharing, while on google+ is working fine. The facebook debugger is giving me the following message:
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'https://marketsrally.com/images/video/text-banner.png' will be used instead.
My og tags:
<meta property="fb:app_id" content="388490671332868" />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta property="og:title" content="Markets Rally" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://marketsrally.com" />
<meta property="og:image" content="https://marketsrally.com/images/socialLogo.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="313" />
<meta property="og:site_name" content="Markets Rally" />
<meta property="og:description" content="Join us and get a pole position on the Markets Rally" />
<meta name="description" content="The World Leaders in online Binary Options, for trading on indices, commodities, currencies and stocks." />
<meta name="keywords" content="https://marketsally.com binary options, digital options, trade options, options trading, options, binary trading, easy profit, quick profit, easy trading, simple trading, forex, forex trading, online trading, nasdaq, dow jones, dax, crude oil, gold" />
The link to the site:
https://marketsrally.com/
My image is around 300 pixels width and height, and the link is valid. It is jpg format, although I tried with PNG. What could be the problem?
Have a look at http://beta.beantin.se/clearing-linkedin-link-sharing-preview-cache/ Apparantly you need to set the caching directrives in your page's header for Google+, and add an additional parameter for LinkedIn.
You can either use meta tags in the page's html code (see http://www.i18nguy.com/markup/metatags.html), or in the http response headers in your webserver (see http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/).