I want to share this link (https://s3.eu-central-1.amazonaws.com/lavorotrentino/index.html) through a Facebook status.
The problem I'm facing is the missing facebook preview that should be based on the meta tag info in index.html:
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<link rel="canonical" href="https://s3.eu-central-1.amazonaws.com/lavorotrentino/index.html" />
<link rel="image_src" href="https://s3.eu-central-1.amazonaws.com/lavorotrentino/abc.jpg"/>
<title>Lavoro in Trentino</title>
<meta property="og:title" content="Lavoro in Trentino" />
<meta property='og:site_name' content='LIT' />
<meta property="og:description" content="Nuove opportunità pubblicate oggi sul portale dell'Agenzia del Lavoro trentina."/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://s3.eu-central-1.amazonaws.com/lavorotrentino/index.html" />
<meta property="og:image" content="http://s3.eu-central-1.amazonaws.com/lavorotrentino/abc.jpg" />
<meta property="og:image:secure_url" content="https://s3.eu-central-1.amazonaws.com/lavorotrentino/abc.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
</head>
I tried to find the problem with the Open Graph Object Debugger but it seems like the tags are ok:
Facebook Object Debugger result:
.
The message warning:
"fb:app_id hasn't been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Otherwise, the default app id( 966242223397117 ) will be assigned."
should not be a problem for simply sharing a link.
Are there issues with the amazon s3 free 1 year trial?
Turns out to post using open-graph you do need an appID. It was easy to make.
https://developers.facebook.com/docs/opengraph/getting-started#create-app
Related
This is the very first time I try to deploy something. Though the webpage is for testing purposes and not finished yet but I want to share it for my friend to see.
When I share my web with some of my friends, I can't see the open graph image
It just displays like this
I'm just trying to implement a very simple static open graph image, not the dynamic one.
Here's how I set up my head in the public/index.html of my React-app
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Mirai</title>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Watch anime"
/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="application-name" content="Mirai"/>
<meta name="apple-mobile-web-app-title" content="Mirai"/>
<meta property="og:title" content="Mirai"/>
<meta property="og:description" content="Watch free anime"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://mirai-huy8856.vercel.app/">
<meta property="og:image" content="https://s4.anilist.co/file/anilistcdn/media/anime/banner/101922-YfZhKBUDDS6L.jpg"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
Here's my VERCEL App, I've View Source and saw that it has og meta tag in there, but Facebook refuses to read the image, what have I done wrong?
Here's the Image I tried to implement.
This is my folder structure in the ReactJS application.
You can test your OpenGraph settings on the Facebook Debugger here:
https://developers.facebook.com/tools/debug/
It is worth noting with OpenGraph Image data you should supply additional data; namely:
<meta property="og:image" content="https://s4.anilist.co/file/anilistcdn/media/anime/banner/101922-YfZhKBUDDS6L.jpg"/>
<meta property="og:image:type" content="image/jpeg" >
<meta property="og:image:width" content="1800" >
<meta property="og:image:height" content="550" >
Further; looking at the page you give on your metadata OpenGraph URL tag
https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fmirai-huy8856.vercel.app%2F
The de-bugger states:
Missing Properties
The following required properties are missing: fb:app_id
I'm currently building https://redeemable.app/, and the open graph meta tags are not being recognized on most popular platforms (including http://developers.facebook.com/tools/debug and Twitter).
Checking the page source code, I have the following in my < head> tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#1E3A50">
<meta property="og:title" content="Claim this Redeemable NFT" />
<meta property="og:image" content="https://flowerpatch.app/polygon/render/card-25993.png" />
<meta property="og:image:height" content="200" />
<meta property="og:image:width" content="300" />
<meta property="og:url" content="https://redeemable.app/r/0xd22ec97e5173241afa4aba8796d4d552d70bf4669dbe5e5e928fa7117ab026f6" />
<meta property="og:type" content="website" />
<meta property="og:description" content="From: 0xc1D622d588B92D2F7553c6fe66b1Ce6C52ec36f9" />
<meta name="twitter:card" content=“summary_large_image” />
<meta name="twitter:site" content="#redeemableNFT" />
<meta name="twitter:title" content="Claim this Redeemable NFT" />
<meta name="twitter:description" content="From: 0xc1D622d588B92D2F7553c6fe66b1Ce6C52ec36f9" />
<meta name="twitter:image" content="https://flowerpatch.app/polygon/render/card-25993.png" />
<meta name="description" content="From: 0xc1D622d588B92D2F7553c6fe66b1Ce6C52ec36f9" />
<meta name="keywords" content="Redeemable, NFT, Reward" />
<title>Redeem NFT</title>
<link rel="shortcut icon" type="image/svg+xml" href=/img/logos/redeemable-favicon-32.png />
</head>
On some open graph validators, these meta tags work just fine:
for example, dnschecker recognizes all my meta tags
and others including iframely
However, on the facebook graph validator, on twitter, and on Discord (which happen to be the most important ones), my links fail to be recognized.
For example, the image, title, and description are not recognized on opengraph.xyz and facebook's debugger
I don't understand why the meta tags work on some sites but not others. It seems like I am doing everything else correctly - the html is being loaded server-side, and I verified all the tags exist in the pagesource, so this answer is not applicable. Additionally I have the OGP prefix in the html tag, so this is not applicable either.
Has anyone experienced this before?
I'm starting to grow desperate. I want to show a WhatsApp preview image for a link people can share. I tried everything I could find here or on Google. It STILL doesn't show up. This is is my current state of things:
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>My Site</title>
<meta charset="utf-8">
<meta property="og:type" content="website" />
<meta property="og:title" content="My Site" />
<meta property="og:site_name" content="My Site" />
<meta property="og:description" content="This is really My Site">
<meta property="og:url" content="https://www.my-site.com/subdir/" />
<meta property="og:image:secure_url" itemprop="image" content="https://www.my-site.com/subdir/ogthumb.jpg">
<meta property="og:image:alt" content="My Site Preview">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
Some of those headers are probably unnecessary, but I put all things together I found from different answers here or from external sources.
I also chose a low resolution (different max dimensions suggested in different sources, but this 256x256 should be fine according to all) as well as low image size (again, different max sizes suggested in different sources, but I got only 30kB and this should be fine according to all sources).
Please, kind people, can you show me what is still missing? My sanity thanks you.
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).
My error is -> an error occurred (not very helpful) when trying to do a basic Facebook app.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<meta property="og:title" content="This Page Title">
<meta property="og:description" content="product">
<meta property="og:url" content="http://tpccommedia.com/fb_progs/redir.php?p=share">
<meta property="og:site_name" content="mySiteName">
<meta property="og:type" content="website">
<meta property="fb:app_id" content="229474487215744">
<meta property="og:image" content="http://telecom.com/images/nyclogo.png">
<title>Register</title>
</head>
<body>
Share This App!
</body>
</html>
The output from the Facebook debugger only indicates and response code of 206, which I understand is to be expected?
Scrape Information
Response Code 206
Fetched URL http://tpccommedia.com/fb_progs/redir.php?p=share
Canonical URL http://tpccommedia.com/fb_progs/redir.php?p=share
Object Properties
fb:app_id 229474487215744
og:url http://tpccommedia.com/fb_progs/redir.php?p=share
og:type website
og:title This Page Title
og:image
og:description product
og:site_name mySiteName
og:updated_time 1383429465
Raw Open Graph Document Information
Meta Tag <meta property="og:title" content="This Page Title" />
Meta Tag <meta property="og:description" content="product" />
Meta Tag <meta property="og:url" content="http://tpccommedia.com/fb_progs/redir.php?p=share" />
Meta Tag <meta property="og:site_name" content="mySiteName" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="fb:app_id" content="229474487215744" />
Meta Tag <meta property="og:image" content="http://nyctelecomm.com/images/nyclogo.png" />
URLs
Graph API https://graph.facebook.com/176103072585712
Scraped URL See exactly what our scraper sees for your URL
I am not in sandbox mode as indicated in other post.
What did I miss?
I think the issue here is with your link to "Share this App".
http://www.facebook.com/dialog/feed?app_id=1392552050964797&display=popup&caption=http://tpccommedia.com/fb_progs/redir.php?p=share
Make sure the app_id is correct (not a page Id) and that you have specified a redirect_uri as per the documentation.
https://developers.facebook.com/docs/reference/dialogs/feed/#redirect