When I shared a link on the Facebook, Facebook only show the last or previous of my Website.
New title: Kirk Niverba | Official Website
Old Title: W3Schools Web Development
Picture Titles | Facebook
Note that in the "New Title" is scriptly edited on Facebook (Inspect Element edit)
Thanks for someone will notice this =)
I think i understand. In order for you to do this, look specifically at this link
https://developers.facebook.com/docs/plugins/like-button
Which gives you some ideas about how to specify the content shown on Facebook once someone shares your web page, on their FB page.
Also for some added reference, check this links as well.
https://developers.facebook.com/docs/sharing/web
It will give you what you need.
EDIT*** specifically, when you add it properly, these lines will give you exactly what you need alongside an image for your post/share.
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://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="http://www.your-domain.com/path/image.jpg" />
</head>
Otherwise, FB uses old/current page data at random i believe. Or based on a percentage of the top 1/3 of the page(if i remember correctly).
Related
I've added meta tags to show summary_large_image box for twitter share. Once the twitter share window pops up, it looks like this:
Once I clicked Tweet, the summary_large_image can be displayed correctly with no problem. Here is the meta code:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="patch-package is like a bandage. It saved my life!!!" />
<meta name="twitter:image" content="https://image.mux.com/d4OkE5whZfyg1VJogOTf8AAHcMG00ak24h6JQYWNo/thumbnail.png?width=700&height=400" />
<meta name="twitter:site" content="#lonelydotdev" />
<meta name="twitter:title" content="react-video-recorder works in firefox now!!!" />
But what I really want to see in the share window is something like following, where it not only has the url link, but has some text description, as well as via #username in the end:
How can I automatically inject the description and site owner to the share textarea? Thanks!
I am using react-share npm package. It has via, related, title such parameters that I can use to inject those text.
https://www.npmjs.com/package/react-share
I saw a lot or request about rich link preview in Telegram, but this is specifically about "how to get a BIG/LARGE image" in the preview.
Let's take this article on my site as example. It already has all of the OGs:
<meta property="og:title" content="Questa settimana su TLI (08 dicembre 2018)" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://turbolab.it/immagini/12483/max" />
<meta property="og:url" content="https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812" />
<meta property="og:description" content="Non hai tempo di leggerci tutti i giorni? nessun problema! ecco a te il riepilogo di quanto proposto da TurboLab.it nel corso della settimana in conclusione." />
<meta property="og:locale" content="it_IT" />
<meta property="og:site_name" content="turbolab.it" />
Result: it works when the link is posted on Telegram, but the image is small and floated right even if the og:image (this) is 1000 px wide. I'd like to have it big, on it's own line.
Check this out (first entry is my site, the one I want to fix: note the small image, floated right. 2nd and 3rd is the result I want as shown by a YouTube video and a Mashable article).
The 3 URLs used in the image above are:
https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812
https://www.youtube.com/watch?v=y6eHY537Cao
https://mashable.com/article/xiaomi-48-megapixel-camera/?europe=true&utm_cid=hp-r-1#cR2kG7X_naqO
richpreview.com isn't helpful, because it preview the image as "small" on all of the theree (one, two, three).
Strange thing is: it works as expected on Facebook. There, I get big, wide images. It's perfect on Twitter too.
What am I missing?
Adding twitter meta tags fixed the issue for me
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{IMAGE URL}" />
Telegram bases its preview images on Twitter sharing cards markup. You're missing the summary_large_image content. You need to add the following in addition to what you have:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://turbolab.it/immagini/12483/max">
Once you've updated your markup, paste the share link in to Telegram's Webpage Bot and choose Update Preview to clear Telegram's image cache and view the enlarged image.
Consult Summary Card with Large Image on Twitter Developers for more info.
To further enrich your results with large images you could also create a Telegram Instant View. Note however Instant Views only appear for designated templates chosen by Telegram itself.
Example custom Instant View Template:
# enable for items in the post section
?path: /post/.+
# define required elements
title: //*[#itemprop="headline"]
body: //*[#itemprop="articleBody"]
# if cover exists, define images
?exists: //head/meta[#property="og:image"]/#content
cover: //head/meta[#property="og:image"]/#content
image_url: $cover/self::img/#src
Example meta tag for to allow joins to your channel from the Instant View:
<meta property="telegram_channel" content="turbolabit">
You may lose some visibility of your visitor metrics but your users will have a better experience reading and enjoying your site from within Telegram which translates into brand recognition.
You're missing the Open Graph protocol prefix-attribute in your html tag:
<html prefix="og: http://ogp.me/ns#">
Learn more about the Open Graph protocol at ogp.me.
I recently added a share button on all of the artwork on my site, so that people viewing the artwork can easily share it on Facebook. The share button works in that the FB link does take the user to the correct artwork (url is correct). However, the image in the link is always an ugly clip out of the center of my logo banner (same image on every page on the site) and the og:xxx meta tags on my page seem to have absolutely no effect in customizing the link as Facebook claims they should. Here's the head section of one of my pages:
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<link rel="stylesheet" type="text/css" href="stitzart.css" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="art, acrylic, flip, pour, artwork, colorful, dirty cup" />
<meta name="description" content="Hilda Stitz Art Gallery featuring dirty cup pours in acrylic." />
<meta property="og:url" content="http://www.stitzweb.com/art/art.php?id=18" />
<meta property="og:type" content="article" />
<meta property="og:title" content="StitzArt - #033" />
<meta property="og:description" content="Little Planet" />
<meta property="og:image" content="http://www.stitzweb.com/art/images/share018.png" />
<title>StitzArt - Hilda Stitz Artwork</title>
</head>
and the share button on that page pulls up this dialog:
Facebook Share Dialog (with incorrect information)
How can I make the pic, title and description in the share dialog match what's in the meta data? I've searched all day and I've almost given up. The feature works for sharing, but it would be so much better if people could see a preview of the artwork before clicking on the link. Thanks in advance for any help you might offer.
I hate to be doing this, but since going through the proper channels has led to being completely ignored for two weeks, I bring myself here instead. Hopefully you guys can prove why we're better ;)
I'm trying to integrate Twitter Cards, however despite following the instructions, and despite the Validator loading just fine (screenshot of the validator), it fails to show up in actual Tweets.
The URL being Tweeted in this example is http://pfq.link/?Megayena and the relevant Meta tags on that page are:
<meta name="twitter:card" content="product" />
<meta name="twitter:site" content="#SystemSalamence" />
<meta name="twitter:creator" content="#SystemSalamence" />
<meta name="twitter:domain" content="pokefarm.com" />
<meta name="twitter:title" content="Sei's Mightyena on PokéFarm Q" />
<meta name="twitter:image" content="http://pfq.link/?Megayena=004000ccff99300300.png" />
<meta name="twitter:label1" content="Species" />
<meta name="twitter:data1" content="Mightyena [Mega Forme Q]" />
<meta name="twitter:label2" content="Held item" />
<meta name="twitter:data2" content="No item" />
<meta name="twitter:description" content="Sei's Mightyena is a Level 100 Mightyena [Mega Forme Q]. She is hungry, so come visit her on Solaria and give her a Berry!" />
Everything looks valid, and it works on the validator preview, so why are Tweets not getting their cards?
When visiting the URL and inspecting (view source in the browser) your tag refers to a different URL than the one in the question.
it currently refers to:
http://pokefarm.com/img/script/pokemon?00400ccff99300300Megayena
Trying to visit that image URL, It returned a HTML page that contains an error (PHP error).
maybe that is the problem.
Have you tried using a summary card rather than a product card?
https://dev.twitter.com/cards/types/summary
While I can't see any obvious errors in the code, it might be worth trying different cards and seeing if they work.
The problem comes perhaps from there :
The image must be a minimum size of 120px by 120px
See https://dev.twitter.com/cards/types/summary
I'm having a problem with my facebook like button and the webpage. The webpage contains banners and random images as well as the article image, now facebook have removed the share button, though it still works, but with the current like button. Facebook chooses the image automatically, and sometimes it chooses the banners instead of the article image. Is there any alternate way instead of adding properties to the article images? Like exculding all the images but the article image.
This answer isn't necessarily helpful for "excluding" specific images, but you can control what Facebook scrapes off of your page via Open Graph protocol with meta tags. For example:
<meta property="og:title" content="This is my title" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://www.mysite.com/redirect/" />
<meta property="og:image" content="http://www.mysite.com/logo.jpg" />
<meta property="og:site_name" content="I'm on Facebook!" />
<meta property="og:description" content="Hello World!" />
This will force Facebook to reference http://www.mysite.com/logo.jpg to use as thumbnail.
Additionally, my blog post on the related subject matter might help you: http://weblogs.asp.net/kon/archive/2011/06/07/trick-facebook-scrapping-of-facebook-tab-url.aspx
I had the same problem. Kon has a good suggestion, but I'd rather have Facebook use the article image and not the logo, so what I did is put all logos and ad banners as background-image through CSS.
Something like this:
<span style="background-image: url('IMAGE OF AD'); width:Xpx; height:Xpx; display:block;"></span>