I'm looking to embed images in an html file so that they show up as a preview on Twitter once the link is posted.
Currently, I have written this HTML file, but the image included in the meta tag does not display after the link is posted, how can I do this?
Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:image:" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:site:"Lorem IpsTest Website",>
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
<HEAD>
<TITLE>Lorem IpsTest Website</TITLE>
</HEAD>
<BODY>
<CENTER><p>izudfhzaiufhnzaouif 5645</p></CENTER>
<CENTER><img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane"></CENTER>
</BODY>
</html>
Based on the docs, it looks like you're missing two required meta tags:
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Title Goes Here" />
Your twitter:site tag is also incorrectly formatted - it should be this:
<meta name="twitter:site" content="Lorem IpsTest Website">
The opening <head> tag should also be moved to right after the opening <html> tag in order to encompass the meta tags. I'm also unsure why you have two <title> tags - get rid of one of them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Embedded Image Test" />
<meta name="twitter:image" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
</head>
<body>
<p>izudfhzaiufhnzaouif 5645</p>
<img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane">
</body>
</html>
for more information about twitter cards read this https://sproutsocial.com/insights/twitter-cards/
Related
I have written a code using HTML to practise how to add a relative URL to the web page. But it doesn't work properly.
Folder structure for your project.
website(Main folder)
-links.html (html file)
-gb(Sub folder)
-currency-converter.html (html file)
links.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first website</title>
</head>
<body>
<p>Let's start creating html links.</p>
Visits to I Love PDF
Visits to Currency Converter
</body>
</html>
currency-converter.html file inside the gb folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My second website</title>
</head>
<body>
<p>Welcome to currency converter page.</p>
</body>
</html>
I have set up a node js based server. I need to display specific polish characters in one of my pages. I have tried to add few lines I found in internet but there was no success, I'm still getting "?" instead of getting polish character. For views I use ejs.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset = "UTF-8">
<meta http-equiv="refresh" content="10" >
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id = "NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
My actual result is "Niepubliczny Zak?ad medycyny rodzinnej" instead of "Niepubliczny Zakład medycyny rodzinnej". (you can find it in div).
You could try this:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id="NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
For me, this code works OK :
http://next.plnkr.co/edit/DKvMsvAwoxMPu36J?open=lib%2Fscript.js&preview
I encountered a strange behavior for #RenderSection in the head section of _Layout.
#section AddToHead{
<meta name="test" />
<open-graph og-title="#Model.Test.OG.Title" og-image="#Model.Test.OG.Image" og-url="#Model.Test.OG.Url" og-type="#Model.Test.OG.Type"></open-graph>
}
meta => is plain html
open-graph => is a taghelper which returns html
and added on _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
#await RenderSectionAsync("AddToHead", required: false)
</head>
I tried already with RenderSectionAsync and RenderSection. No difference.
When I check the result on page it is as follows (total different result)
View Source Code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</head>
Developer Tools
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
</head>
<body>
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</body>
Facebook sees my site like Developer Tools does.
What I'm doing wrong? Is this even possible?
Developer tools shows how the browser interprets your HTML which is why you're seeing a difference between viewing source and the developer tools.
As for why that's happening, <div> tags in the <head> are problematic. Most browsers these days will interpret those <div> tags as if they were in the body. If you were to render your <meta /> tags without the surrounding div all should be fine.
I've been trying other people's examples of how to share a webpage with a video on it to facebook, and hoping that the video can play inline in the facebook wall. So far in each of my attempts, facebook only shows the meta information text of my webpage on the profile feed, but doesn't show a video. Here's my HTML code:
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>Ocean Vid</title>
<meta property="og:type" content="video" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="500" />
<meta property="og:video:height" content="500" />
<meta property="og:video" content="https://mywebapp.com/video/oceans.mp4" />
<meta property="og:video:secure_url"
content="https://mywebapp.com/video/oceans.mp4" />
</head>
<body>
</body>
</html>
What am I doing wrong?
I got it working. From what I can tell, this is the minimum to get HTML5 video to post on facebook
<!DOCTYPE html>
<html>
<head>
<title>Ocean Video</title>
<meta property="og:image" content="http://vjs.zencdn.net/v/oceans.png" />
<meta property="og:type" content="video" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://vjs.zencdn.net/v/oceans.mp4" />
<meta property="og:video:secure_url" content="https://mycoolwebsite.com/video/oceans.mp4" />
</head>
<body>
</body>
</html>
In my case, I needed to make sure I had both a thumbnail image and a secure_url for a video.
i'm wondering if something like the following is fine..
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Microdata Example</title>
<meta id="site-description" name="description" content="description text here">
</head>
<body itemscope itemref="site-description" itemtype="http://schema.org/Organization">
<h1 itemprop="name">Foo</h1>
<img itemprop="image" src="bar.jpg">
</body>
</html>
This won’t work.
The itemref attribute is used to reference Microdata properties, but your referenced meta element doesn’t have an itemprop attribute.
And you can’t add an itemprop attribute to the meta element if it has a name attribute.
If you don’t want to have this description visible on the page, you could
add the meta element in the head, using itemref:
<head>
<meta name="description" content="description text here">
<meta id="site-description" itemprop="description" content="description text here">
</head>
<body itemscope itemref="site-description" itemtype="http://schema.org/Organization">
</body>
add the meta element in the body, not using itemref:
<head>
<meta name="description" content="description text here">
</head>
<body itemscope itemtype="http://schema.org/Organization">
<meta itemprop="description" content="description text here">
</body>
(Assuming that you want to use Schema.org’s description property.)