I am using a CNN article page as an example:
http://money.cnn.com/2015/01/14/technology/innovationnation/inside-tracker-blood-test/index.html
In the webpage html head there is this tag:
<meta name="twitter:image" content="http://i2.cdn.turner.com/money/dam/assets/150114084151-inside-tracker-120x90.png">
But when I click on twitter share button to share the page, all i see is:
"The best blood test you'll ever take http://cnnmon.ie/17HrCSL via #CNNMoney"
Even if I log into twitter and shared the page, I still don't see that image! What is wrong? I am trying to do this for my website.
The feature you're describing is known as "Twitter Cards". A number of conditions must be fulfilled for it to work on a site; in particular, the site must be manually approved by Twitter staff. It will not work on sites that have not been approved.
For more information on Twitter Cards, please refer to:
https://dev.twitter.com/cards/getting-started
Related
How does one control what image and title appear when posting a URL to LinkedIn?
I manage my company's website efficienty and write all the HTML, CSS, jS and PHP when necessary. One nut I cannot crack however is getting LinkedIn to pull the correct image and title when I make a post.
LinkedIn published the following to allow og tags to solve this problem:
I am having difficulty making this work
This is key for me and my team for we frequently post stories, case studies and advertisements which we can't share on LinkdIn because LinkedIn logic usually (not always) doesn't pick up any of the images in our HTML.
Is there a meta tag or something I need to embed in the HTML line?
You can use this tool to test https://www.linkedin.com/post-inspector/inspect/ your page.
Linkedin seems to be using the open graph protocol from Facebook https://ogp.me/
<meta name="image" property="og:image" content="[Image URL here]">
When you send a link via text, facebook message, or any mainstream messaging client you'll notice it generates a "rich preview". This is basically an image that pops up of the website you are linking.
I understand how to set this property, for example
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
but I want to know how to use it.
What I'm trying to do is setup a website with a table of links and I want each link to not be just a text link, but a square image. I want those images to be generated based on the links as rich previews just like in messaging clients.
(If it helps I'm trying to pull from google photos albums, so I'm hoping the rich preview will be the album cover and the title will be the name of the album)
Ex: I want to obtain, album title, and cover image from
https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1
I would also like to use the title and description but I'm sure the process is the same.
The big companies like Facebook and Twitter all have their own spiders that periodically crawl the web looking at the DOM of websites. If they see the relevant tags, they'll generate their respective 'preview' automatically.
Literally all you need to do is have the right <meta> tags in your head section. You've demonstrated the OpenGraph protocol in your sample above, which is used by most sites.
The basic tags, according to OpenGraph are:
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
There's a number of others, though those are the main ones that you need.
Sites often define their own prefixes though. Twitter, for example, additionally uses a custom twitter: prefix to allow for some extended functionality.
Facebook has a debug tool through which you can submit your URL to have them forcibly update their preview, and Twitter has their own card validator which will also forcibly crawl the site.
Simply wait for the site in question to crawl your own website, or submit your site manually through a respective tool, and your preview will be crafted. This preview will apply to anyone who attempts to hotlink to your website, not just you as the person who used the tool.
Hope this helps!
I need to implement a facebook share button on a website I am currently developing. The theory is simple and works with a simple link, e.g. https://www.facebook.com/share.php?u=https%3A%2F%2Freddit.com%2Fr%2Fall%2F. This works for me for random pages and my home page.
However, this does not work for all pages of that web site except the home page (/).
Example:
Page http://www.youmatch.global/approach/
Share link https://www.facebook.com/share.php?u=http%3A%2F%2Fwww.youmatch.global%2Fapproach%2F
The sharing dialog states "Object not found". I am already trying for two days but I have no clue what might be the problem.
Any ideas?
You may take look at this page to see what's wrong in your sharer : https://developers.facebook.com/tools/debug/sharing/
Recently Google has added a new interface when users click the star icon in the address bar to add a website to their bookmarks.
The UI displays the page title as well as anything from the meta description element if present, but I was wondering if there's a way to set the image that's displayed, or whether this is just purely decorative on Chrome's part:
It seems to be some datas included in the head part of the pages.
You probably know that you can use meta tags to set some favicon, gps coordinates, and many other things.
Some new tags, the Opengraph meta tags, are now used to define some informations to best describe the content of the website you're browsing. For example, on facebook, when you share a link, these opengraph datas are used to create a small block which summarize and show a picture of the linked website.
So, to be clear and to speak about code, just try with this line in your head section:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Tried it while writing this post on a little static website I'm working on, seems to work prefect !
It's looks like Google collect all images on the webpage et allow you to choose which one you want for your bookmark.
I have a quick question, hopefully someone can help me. I recently took a microsite live for a client and everything went smoothly except for a facebook integration piece. When a user attempts to Share the site, the thumbnail pulled for the share reflects the logo from the main site, not the microsite. I am baffled because this logo can be found nowhere on the page. Additionally, I have included the requisite meta information in the header of the document
<meta property="og:image" content="http://www.rethinkyourdrinknow.com/images/ryd/logo2.png" />
but for some reason it still pulls the other image. Does anyone have more experience with Facebook share that could possibly lend a hand?
Thanks,
Jamey
Try using the Facebook Linting tool (now the debugger)
http://developers.facebook.com/tools/debug
Enter the URL of your microsite, the tool should tell you whats going on.
It seems that OGP only likes thumbnails which dimensions are the same or more than 200px. If you upload an image and set it as thumbnail (which dimensions are, by WP default, 150x150 pixels) you're going to get an error message if you run your post's link into the FB debugger like this:
Open Graph Warnings That Should Be Fixed
Small og:image: All the images referenced by og:image should be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.
So I manually enlarged an image into one of my previous posts to the actual 200x200 pixel size and tadadah!!! Facebook shares the proper link and proper image also from WP homepage or single post.
Expanding on #Andy's answer, you can certainly use the Debugger tool to see how facebook views your URL. It will tell you exactly what og:tags are missing/malformed.
One thing to note is that facebook does some caching on og:tags of URL's that have been shared; but using the Debugger tool will refresh facebooks caching of your URL.
I had the same problem with LinkedIn. I added <meta property="og:image" content="https: and so on to my index.html, but LinkedIn kept pulling the wrong picture because it had already cached my site.
Here's the trick to force the embedding app (LinkedIn, Facebook, etc.) to treat your website as never cached before and therefore read it completely from scratch, including your new og:image.
When you input your full link to the social media site, add ?01 at the very end of it. E.g. https://example.com?01 or https://example.com/my_project/?01
Just tried it and it worked like magic!