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
Related
I have a website called www.caminemosjuntos.com.ar and I add the facebook share link button but the default preview image is not what I want to show. So I try to add <meta og:image property inside the head to customize it but when I debug the page I notice that browser is rendering inside the body tag.
I'm using python-flask with boostrap and templates.
This is how start my header.html:
'''
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta property="og:image" content="https://www.caminemosjuntos.com.ar/static/img/pathway.jpeg" />
'''
and browser is rendering from post section: (post.html include header.html)
'''
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta charset="utf-8"><meta name="description" content="">
<meta name="author" content="">
<meta property="og:image" content="https://www.caminemosjuntos.com.ar/static/img/pathway.jpeg">
<title>Caminemos juntos</title>
'''
How can I do to fix this? Facebook is still saying that I don't have explicitly the og:image.
Thanks
I am guessing that your image could be too big try reducing the size or try a smaller image. Try different sizes and resolutions.
See: https://developers.facebook.com/docs/sharing/best-practices#images
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">
I want to display the image when I paste the link of webpage to whatsapp. But somehow it's not showing up there. I've been able to show the description but image is not showing till yet. I have tried all the snippets on so but couldn't be succeeded somehow. Any help will be appreciated. Thanks.
Code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<meta name="description" content="description of my website">
<meta property="og:title" content="title of my page heading" />
<meta property="og:url" content="http://www.example.com/example.php" />
<meta property="og:description" content="desc">
<meta property="og:image" itemprop="image" content="http://urlOfmyimage.jpg">
<meta itemprop="width" content="256">
<meta itemprop="height" content="256">
<meta property="og:type" content="article" />
thanks to your question, I did some research and solved it.
you need an image less than 50 or 100 kb.
<meta property="og:type" content="...">
<meta property="og:url" content="...">
<meta property="og:title" content="...">
<meta property="og:image" content="...jpg">
<meta property="og:description" content="...">
<meta property="og:site_name" content="...">
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.
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">