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.
Related
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/
I set up a website using TYPO3 v9.5.9 and I can't find the <title> tag on the HTML source.
How can I insert the current page <title> automatically into the header?
Here is how my header is currently displayed:
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="TYPO3 CMS" />
<link rel="stylesheet" type="text/css" href="typo3conf/ext/frontend_editing/Resources/Public/Css/frontend_editing.css?1562352305" media="all" />
<link rel="stylesheet" type="text/css" href="typo3/sysext/backend/Resources/Public/Css/backend.css?1566293615" media="all" />
This solution solved my problem. It was necessary to remove the line :
config.noPageTitle = 2
Thanks to #Riccardo De Contardi for this solution.
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'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.
Setting up a "basic framework" for my website projects, I'm wondering which meta elements are really necessary/recommended? In particular, I'd like to know how to deal with the language attribute(s)!? In the following example, I think sth. is repeated unnecessarily...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="language" content="en" />
<title> Title </title>
<base href="http://www.mydomain.com" />
<meta name="charset" content="utf-8" />
<meta name="content-language" content="en" />
<meta name="language" content="en" />
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
</head>
P.S. "content-language" = "language"?
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Definitely recommended
<meta http-equiv="content-style-type" content="text/css" />
Useless, browsers only support CSS.
<meta http-equiv="content-script-type" content="text/javascript" />
Useless, browsers only support JavaScript.
<meta http-equiv="content-language" content="en" />
Redundant to <html lang="en">
<meta http-equiv="language" content="en" />
Doesn't exist, AFAIK.
<title> Title </title>
Definitely recommended.
<base href="http://www.mydomain.com" />
Depends on how you want your relative links to work, I suppose.
<meta name="charset" content="utf-8" />
<meta name="content-language" content="en" />
<meta name="language" content="en" />
Look like typo's.
<meta name="description" content="description" />
Probably useful.
<meta name="keywords" content="keywords" />
Ignored by every search engine due to widespread abuse.
Use this for HTML 5:
<!DOCTYPE html>
This looks wrong:
<meta name="charset" content="utf-8" />
should probably be this for HTML 5:
<meta charset="utf-8">
That is the new HTML 5-way of setting charset encoding. It is highly recommended to also include the old way:
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
These should be directly after the opening head-tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>The title</title>
</head>
<body>
</body>
</html>