Facebook Post deep link (app links ) to iOS app - html

I am posting on Facebook wall through HTML page i have added all meta tags on page as well as configured bundle id & appstore id on facebook console also. When i am clicking on post it's redirecting to facebook internal browser but i want to open my app if it's installed or redirect to app store if not.
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta property="al:ios:url" content="artist://" />
<meta property="al:ios:app_store_id" content="49155" />
<meta property="al:ios:app_name" content="Artist" />
<meta property="fb:app_id" content="805534" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://fbdigi.hua.org/AAD/AA_app_icon.png" />
</head>
</html>

I have added below code & it worked:
Final App link code:
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta property="al:ios:url" content="artist://" />
<meta property="al:ios:app_store_id" content="49155" />
<meta property="al:ios:app_name" content="Artist" />
<meta property="al:web:should_fallback" content="false" />
<meta property="fb:app_id" content="805534" />
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://fbdigi.hua.org/AAD/AA_app_icon.png" />
</head>
</html>

Related

Facebook Open Graph tags Not Recognized

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 trying to make a "Open Graph Meta Tags /Social-Media card" for my site, with a logo too, however my logo ins't showing

heres what it looks like right now:
I want it to look like these:
<---------------------------------------->
I want it show an image of my logo, but its not working, heres my file management:
My HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Summit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="Learn, Maths, Mathmatics, Story, School, Homework, Learning, Education, fun"/>
<meta property="og:site_name" content="Summit" />
<meta property="og:url" content="https://summit.tahaparacha1.repl.co/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Home | Summit" />
<meta property="og:image" content="images/Logo.png" />
<meta property="og:description" content="The best online, free mathmatics learning platform! Summit allows you to learn mathmatics whenever you want and wherever you are! Simply click Start learning to unlock a massive library off free education; Enjoy!"/>
<meta name="msapplication-TileColor" content="#fcbf49" />
<meta name="theme-color" content="#fcbf49" />
<link rel="icon" href="images/Logo.png">
</head>
You need to specify an absolute URI instead of a relative one for the og:image meta property. In addition you should add a twitter:card meta tag for compability.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Summit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="Learn, Maths, Mathmatics, Story, School, Homework, Learning, Education, fun"/>
<meta property="og:site_name" content="Summit" />
<meta property="og:url" content="https://summit.tahaparacha1.repl.co/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Home | Summit" />
<meta property="og:image" content="https://summit.tahaparacha1.repl.co/images/Logo.png" />
<meta property="og:description" content="The best online, free mathmatics learning platform! Summit allows you to learn mathmatics whenever you want and wherever you are! Simply click Start learning to unlock a massive library off free education; Enjoy!"/>
<meta name="msapplication-TileColor" content="#fcbf49" />
<meta name="theme-color" content="#fcbf49" />
<link rel="icon" href="images/Logo.png">
<meta name="twitter:card" content="summary_large_image">
</head>
try with this example of url image:
"~/Images/Siereves.ico"

Using Open Graph meta tags

I am using Open Graph meta tags in my HTML code but I am not sure about its(og:image) property with following content:
This are my codes:
<meta property="og:title" content="Donya Internatioanl group"//>
<meta property="og:url" content="https://dig.af/" />
<meta property="og:image" content="~/Images/myImage.jpg" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Some description about this image" />
<meta property="og:locale" content="fa_GB" />
<meta property="og:site_name" content="DIG" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Please help me whether this link to image is correct or no:
<meta property="og:image" content="~/Images/myImage.jpg" />
specially its content, or I have to write it like This:
<meta property="og:image" content="https://mywebsite.net/assets/opengraph/theogimage.jpg"/>
You have to use the full path, so:
<meta property="og:image" content="https://mywebsite.net/blah/image.jpg/>
would be the correct way. The content has to refer to an URL that Facebook can access and download your image from.

mp4 video shared from my website not showing on facebook

I have simple share button to share a certain video to facebook , unfortunately only image shows but no video here is my solution
<meta property="og:url" content="https://meed.audiencevideo.com" />
<meta property="og:video:type" content="video/mp4"/>
<meta property="og:title" content="test title" />
<meta property="og:description" content="Test" />
<meta property="og:image" content="https://meed.audiencevideo.com/images/thumbnail.PNG" />
<meta property="og:video:secure_url" content="https://meed.audiencevideo.com/videos/good_job.mp4" />
<meta property="og:video" content="https://meed.audiencevideo.com/videos/good_job.mp4" />
<meta property="og:video:width" content="398">
<meta property="og:video:height" content="264">
What am I missing in my code?

What Meta Resource Type's Can Be Used?

I need to categorize my website so what meta resource types are you allowed to use???
<meta http-equiv="Resource-Type" content="document">
Oh and do you even use meta resource types to categorize?
No you can't use http-equiv meta to categorize. This is used to give information for the browser. The browser knows what kind of content is inside. But here is a list:
<meta http-equiv="expires" content="date" />
<meta http-equiv="set-cookie" content="name=value; expires=Day, DD-MMM-YY HH:MM:SS ZON; path=url" />
<meta http-equiv=”content-encoding” content=”gzip” />
<meta http-equiv=”date” content=”date” />
<meta http-equiv=”last-modified” content=”date” />
<meta http-equiv=”location” content=”10; url” />
<meta http-equiv=”refresh” content=”10;url=url” />
This means that the page will refresh of refer to another location in 10 seconds
<meta http-equiv="window-target" content="location" />
<meta http-equiv="www-authenticate" content="" />
<meta http-equiv="pics-label" content="labellist" />
<meta http-equiv="pragma" content="option" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-script-type" content="language">
<meta http-equiv="page-enter" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="page-exit" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="imagetoolbar" content="no"/>