I'm using discord, and I saw a lot of people do that thing (the big square in the image).
I tried to do that in html with meta tag, but it came out with the result (image number 2).
I really want to know how to do this, can someone please help me?
Image number one
| image number two
And there is the code I use for doing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta property="og:title" content="An Image By ItsJustOne#9817">
<meta property="og:description" content="Remember always that there is an end in the tunnel 🥰">
<meta property="og:image" content="https://cdn.discordapp.com/banners/907132383814377502/4aca154cd6040b31aacaaf781877f121.png?size=1024">
<meta name="viewport" content="width=device-width">
<title>Why You Are Here?</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Why You Are Here?
<script src="script.js"></script>
</body>
</html>
The image I'm trying to use is my discord banner.
It was 4 months ago, and I forgot to write here that I found a solution a week after asking here!
The solution is simple, using other meta tags, not the regular. The twitter meta tags.
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Cool description">
<meta name="twitter:image" content="the image link">
<meta name="twitter:card" content="summary_large_image">
Replace there the title, description, and the image link.
Related
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
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width-divice, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>
I ask if there is a lacking code that need to put
You can use this meta tags for SEO if you want
<meta name="keywords" content="wood, furniture, garden, gardentable, etc">
<meta name="description" content="Official dealer of wooden garden furniture.">
This meta tags tells search engines not to index the page and prevent them from following the links. If you happen to be using two contradictory terms (e.g. noindex and index), Google will choose the most restrictive option.
<meta name=”robots” content=”noindex, nofollow” />
Why is this tag useful for SEO? First of all it’s a simple way to prevent the indexation of duplicate content, for example the print version of a page. It might also be useful for incomplete pages or pages with confidential information.
Also i sometimes use
<meta name="author" content="John Smith">
You have a typo in your viewport declaration - it needs to be "device-width". Other than that, your head declaration includes all the necessary parts and looks valid to me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>
Fellow Meteor users,
During my searches for tutorials and example applications, I found one that uses a unique head structure:
<meta charset="utf-8">
<title>Title</title>
<meta name="description" content="Top10">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
This particular example app didn't even have a <body> tag anywhere, just a file called head.html which contained the above code. I also learned that it seems that Meteor just automatically makes a body tag for you, so technically, just a head.html is fine.
So, it got me wondering, does anyone define specific head tags for Meteor apps? What's the rationale? Is the above code a good starting point?
When Meteor parses your various html files, any files that contain a <head></head> tag outside of a <template></template> will be concatenated together into one <head></head> tag in every page of your app. This is good for including stuff like title, various meta tags, and 3rd party resources that you want to use on every page. However handlebars support for title tags still does not exist in Meteor so it is definitely limited in what you can do with it (No dynamic meta information).
In the end if you want dynamic information you'll have to resort to something like jquery
You can find more discussion revolving around the <head> tag here:
https://github.com/meteor/meteor/issues/266
You can easily set dynamic titles using iron:router for example with:
onAfterAction: function(){
document.title = 'my awesome site: ' + Router.current().route.getName();
}
I use a head.html that includes various SEO settings:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="fragment" content="!"/>
<meta name="description" content="your description"/>
<meta property="og:title" content="your site title"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://yourimageurl"/>
<meta property="og:url" content="https://hostname"/>
<meta property="og:description" content="your description"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:url" content="https://hostname"/>
<meta name="twitter:title" content="your site title"/>
<meta name="twitter:description" content="your site description"/>
<meta name="twitter:image" content="https://yourimageurl">
<noscript>You must have Javascript enabled in order to use this site</noscript>
<link rel="shortcut icon" href="/your-ico" type="image/x-icon" />
</head>
Looking into https://github.com/kadirahq/meteor-dochead I found one way to dynamically add data to <head> tag
var meta = '<div>just an example</div>'
document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', meta);
Or just add that package if you need more functionality
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.