Facebook do not use image link? - html

I have a header that looks like this on my ASP.NET MVC webpage :
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<title>MyTitle</title>
<meta content="Återanvänd på rätt vis" property="og:title">
<meta content="website" property="og:type">
<meta content="http://MyWebb.se/Post/Detail/392" property="og:url">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" property="og:image">
<meta content="Some info" property="og:description">
<meta content="MyWebb" property="og:site_name">
<meta content="Återanvänd på rätt vis" name="twitter:title">
<meta content="http://MyWebb.se/Post/Detail/392" name="twitter:url">
<meta content="Some more info." name="twitter:description">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="twitter:image">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="description">
<meta content="keywords" name="keywords">
<link href="/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon">
<link href="/Content/Theme/MainTheme.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
And when checking it with this tool : https://developers.facebook.com/tools/debug it does fetch the image.
But when I paste the url in to the wallpost it will only fetch title and desciption, no image. If the thumb however is square the image load just fine.
Why is "not square" images working? Should I generate empty space on all my thumbs(transparent borders with png) so they get a square format? Or is there another solution?
Maybe its because I'm missing the end tag for the meta data? But then the test tool should not fine the data?

The problem was that the og:image was of to small format, after this was fixed it worked just fine without stating the size.

Try defining the image type, width and height as per the example on the Facebook Developer docs - https://developers.facebook.com/docs/web/tutorials/scrumptious/open-graph-object/
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="3523">
<meta property="og:image:height" content="2372">
See also this SO answer - New og:image size for Facebook share? - it sounds like there are minimum dimensions for the images.

Related

How do I enable Link Preview Images for a Jekyll Website?

I am looking for a way to display an image when the link is posted on Twitter, Discord, etc.
There is a spot for the text but I am not aware of a place for an image.
I am expecting an image to display like this:
This is what I am getting:
The description text was changed in config.yml so is there a parameter for the image there also?
I am unaware of how to make the link preview image appear. Think it might be in the config.yml file.
The description is the description from the head of your website.
<meta property="og:description" content="This is the website that hosts Eshan Iyer’s portfolio and resume as well as many projects that he has created.">
The image is not the favicon as I thought but another meta tag:
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
See https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
To show it, you need to modify/customize the head file for the minimal theme, either in head.html or in custom-head.html.
I'd try head.html first:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
can you please try to add <meta name="twitter:card" content="summary_large_image" /> and <meta name="twitter:card" content="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
and
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="app">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
this will resolve your problem, Twitter may take some time to redirect before posting on Twitter validate your link here 2-3 times

Why is my open graph image meta tag isn't working on Facebook?

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

Tried all suggested solutions, still doesn't show WhatsApp image preview for a link

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.

Why the twitter card doesn't show the image?

when I try to publish the link of my website on twitter this is the result:
I tried to resize the image in every way using the most recommended sizes. right now I'm usig an image 280x150
these are my meta tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="www.mysite.com/immaginiArticoli/myimg.png">
<meta name="twitter:site" content="www.mysite.com">

html meta tags for mobile devices

I have a block of html code, which is mainly meta tags. I'm trying to re-design my layout for mobile devices, so I want to know if the meta tags that I'm using are necessary for a mobile layout. The block of code is provided below:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<title>ConquestRealms - Home</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="cleartype" content="on">
whether or not they are necessary depends on what "mobile" device you are trying to target.
I've used as little as:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and achieved decent results across a number of mobile devices using just Respond.js and #media queries.
may be helpful:
http://www.alistapart.com/articles/responsive-web-design
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices
https://github.com/scottjehl/Respond
What you have is already pretty good, but do not forget to add <!DOCTYPE html> at the top of your html file. I found that there have been cases where this has significantly effected the look on a mobile device.
I like to include design meta-tags also. Not mentioned in previous responses. They allow full screen display and change the color of the browser bar. Nice!
<meta name="theme-color" content="#ff0000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Web App">
<meta name="apple-mobile-web-app-title" content="Mobile rules">
<meta name="apple-mobile-web-app-status-bar-style" content="red">