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.
Related
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).
I have a problem with og: type facebook. i already set meta og: type to 'article', but still detected og: type it is 'website'.
However, everytime I try to scrape again, og: type changes to 'article'. So, there's no way I should do manual scrape every time a post.
This is my code:
<meta property="og:url" content="https://jpnn.dev/news/pdip-usung-jenderal-berbadan-besar-jadi-cagub-maluku"/>
<meta property="og:title" content="PDIP Usung Jenderal Berbadan Besar jadi Cagub Maluku"/>
<meta property="og:description" content="Bu Megawati bercanda, menyebut sang jenderal sedang cari kerjaan karena sudah mau pensiun."/>
<meta property="og:image" content="https://photo.jpnn.com/arsip/normal/2017/05/21/25841e2eda0d3bbe198b1f9e6662a8c0.jpg">
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="250" />
<meta property="og:locale" content="id_ID"/>
<meta property="og:type" content="article"/>
<meta property="og:site_name" content="www.jpnn.com"/>
<meta property="og:ttl" content="345600"/>
<meta name="Facebot" content="index,follow" />
<meta name="pubdate" content="2017-12-17T14-22-00Z" itemprop="datePublished" />
<meta content="2017-12-17T14-22-00Z" itemprop="dateCreated" />
<meta property="article:author" content="53788620694"/>
<meta property="article:publisher" content="53788620694"/>
<meta property="article:section" content="politik"/>
<meta property="article:published_time" content="2017-12-17T14-22-00Z"/>
<meta property="article:tag" content="Murad Ismail"/>
<meta property="article:tag" content="Pilgub Maluku 2018"/>
<meta property="article:tag" content="PDIP"/>
And this is the result:
Result
Error
What's wrong with my code ?
Help me please :(
Thx
The type of article:author is profile, not string.
Which, means the value must be a URL to a web page with Open Graph profile markups (like a Facebook profile page, but not necessarily Facebook.).
I used https://developers.facebook.com/tools/debug/og/object/ and it showed me an alert like this:
Object at URL 'http://example.com/post/' of type 'article' is invalid
because the given value 'Your awesome name' for property
'article:author' could not be parsed as type 'profile'.
Then I found this answer on Stack Overflow:
article:publisher is for Facebook pages, article:author is for
individuals.
Whose question points to this Facebook blog post (from 2013/06/19):
Today we're introducing updates to two tags:
article:publisher lets a publisher link an article to their own
Facebook page. When the article is shared in News Feed, a "like"
button is displayed so people can like the publisher page.
<meta property="article:publisher" content="https://www.facebook.com/cnn" />
article:author lets a publisher link an article to the Facebook
profile of the author. When the article is shared in News Feed, a
"follow" button is displayed so people can follow the author. The
author needs to have Follow activated on his or her profile for this
button to appear.
<meta property="article:author" content="https://www.facebook.com/fareedzakaria" />
In your case, I believe you should replace:
<meta property="article:author" content="53788620694"/>
<meta property="article:publisher" content="53788620694"/>
by:
<meta property="article:author" content="https://www.facebook.com/gilang.sonar"/>
<meta property="article:publisher" content="https://www.facebook.com/jpnncom/"/>
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.
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!
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/).