I have .mp4, and am trying to post using meta tags for content of post.
The Facebook Debugger agrees I have the following..
<meta property="og:type" content="video.other">
<meta property="og:title" content="This is the title for a test post">
<meta property="fb:app_id" content="<app_id>">
<meta property="og:description" content="Test">
<meta property="og:video" content="https://<url_for_mp4>">
<meta property="og:video:secure_url" content="https://<url_for_mp4>">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1200">
<meta property="og:video:height" content="630">
When rendering this Facebook just shows the title & description
Any help appreciated.
Related
Hi I'm using the below code to setup a image preview
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<meta property="og:image" content="https://i.imgur.com/VjUU72S.png" width="1200" height="600"/>
It sets up the preview for the link sent but it is really small (see image below)
However I want it to be alot bigger like the below image
How can i achieve this? ive already tried to do the below
<meta property="og:image" content="https://i.imgur.com/VjUU72S.png" width="1200" height="600"/>
The actual image size is '1200x600'
Discord relies on the meta tag of twitter cards to render image sizes. More info on twitter website
So, just add this in your head :
<meta name="twitter:card" content="summary_large_image">
I have come to a solution for this and achieved my goal.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Im Danial Ahmed and this is my personal
website">
<meta name="twitter:image:src" content="https://imgur.com/DaUY6vk.png">
<meta name="twitter:image:src" content="https://imgur.com/DaUY6vk.png">
<meta name="twitter:site" content="#unofficialdxnny">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="unofficialdxnny (Danial Ahmed)
index.html">
<meta name="twitter:description" content="Im Danial Ahmed and this is my
personal website">
<meta property="og:image" content="https://imgur.com/DaUY6vk.png">
<meta property="og:image:alt" content="Im Danial Ahmed and this is my
personal website">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta property="og:site_name" content="unofficialdxnny">
<meta property="og:type" content="object">
<meta property="og:title" content="unofficialdxnny (Danial Ahmed) Website">
<meta property="og:url" content="https://unofficialdxnny.netlify.app">
<meta property="og:description" content="Im Danial Ahmed and this is my
personal website">
<meta name="expected-hostname"
content="https://unofficialdxnny.netlify.app/">
<meta name="theme-color" content="#1167ab">
So I've been trying to make a preview for my website images, on cdn.luckiecrab.nl and I've asked few people and they tried to help me but it didn't work. So the current code I have in my <head> tag is https://srcb.in/WkIJoS2DrX but it doesn't load a preview on Discord. Tho someone else helped me with the above code, they have the exact same and at them a preview does load on Discord. But I have exactly the same! https://media.discordapp.net/attachments/272764566411149314/920237218373713961/unknown.png?width=1440&height=514
Can someone help me, why at them a preview loads but at me it won't and how I can fix it?
I have a solution. The below will give you your preview. Obviously change the details...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Im Danial Ahmed and this is my personal
website">
<meta name="twitter:image:src" content="https://i.imgur.com/VjUU72S.png">
<meta name="twitter:image:src" content="https://i.imgur.com/VjUU72S.png">
<meta name="twitter:site" content="#unofficialdxnny">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="unofficialdxnny (Danial Ahmed)
Website">
<meta name="twitter:description" content="Im Danial Ahmed and this is my
personal website">
<meta property="og:image" content="https://i.imgur.com/VjUU72S.png">
<meta property="og:image:alt" content="Im Danial Ahmed and this is my
personal website">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta property="og:site_name" content="unofficialdxnny">
<meta property="og:type" content="object">
<meta property="og:title" content="unofficialdxnny (Danial Ahmed) Website">
<meta property="og:url" content="https://unofficialdxnny.netlify.app">
<meta property="og:description" content="Im Danial Ahmed and this is my
personal website">
<meta name="expected-hostname"
content="https://unofficialdxnny.netlify.app/">
Edit: You would obviously need to edit the details between the ""
I know how to use Open Graph meta tags in head of HTML. Example:
<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image:secure_url" content="https://sitename.com/img/tutorial.png"/>
But if a type of preview image is good for WhatsApp, it's not good for Facebook! So how should you set meta tags for different platforms at the same time? Thanks
You can specify two (or more) Open Graph images, the first, a rectangular image for FB and the second, a square image for WhatsApp.
<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image" content="https://sitename.com/img/tutorial_1200-600.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image" content="https://sitename.com/img/tutorial_400-400.png"/>
<meta property="og:image:width" content="400"/>
<meta property="og:image:height" content="400"/>
WhatsApp uses the last image.
I have a web site with a few pages and for example if I want to share with somebody one of my link and send it via whatsapp, I need to see logo and some text in my message. [as it on this image]
How can I do that?
I just have found this sample:
<link rel="shortcut icon" href="img/img.svg">
<link rel="apple-touch-icon image_src" href="img/img.svg">
<meta name="twitter:title" property="og:title" itemprop="name" content="Link to source">
<meta name="twitter:description" property="og:description" itemprop="description" content="Mycontent">
You have to add some meta tags.
<meta property="og:site_name" content="Your site name">
<meta property="og:title" content="Page title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" itemprop="image" content="your_page_image.png">
<meta property="og:type" content="website" />
You can try your code with : https://cards-dev.twitter.com/validator
<head>
<meta property="og:type" content="website">
<meta property="og:url" content="https://stackoverflow.com/questions/54984552/how-to-get-link-to-source-using-htm-css">
<meta property="og:site_name" content="Stack Overflow">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="stackoverflow.com">
<meta name="twitter:title" property="og:title" itemprop="name" content="How to get link to source using htm css">
<meta name="twitter:description" property="og:description" itemprop="description" content="I have a web site with a few pages and for example if I want to share with somebody one of my link and send it via whatsapp, I need to see logo and some text in my message. [as it on this image] H...">
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="...">