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>
Related
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 am new to Thymleaf. The following is my folder structure. Here I am not able to include my css file into ".html" file.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<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="description" content="" />
<meta name="author" content="" />
<title>Hello Spring MVC</title>
<link rel="stylesheet" media="all" href="../resources/css/bootstrap.min.css" th:href="#{../resources/css/bootstrap.min.css}" />
<link rel="stylesheet" media="all" href="../resources/css/style.css" th:href="#{../resources/css/style.css}" />
<style>
body {
background-color: lightblue;
}
</style>
</head>
Thanks.
The code is working. It is not including CSS because of ""(double-quotes) are not in compatible.(Copied code from a Blog).
Thanks.
ifram in Internet Explorer (Latest Version) is not able to load my css while Chrome, Safari, Firefox are having no trouble loading the css in iframe.
<iframe frameborder="0" scrolling="yes" marginheight="0" marginwidth="0"
src="/webapp/page1/card.html?customization=default"></iframe>
My style files are correctly connected to the iframe page using the following line:
<link type="text/css" rel="stylesheet" href="/webapp/load-css/BNP/default/css/default.css?loc=1" />
<link type="text/css" rel="stylesheet" href="/webapp/load-css/css/default.css?loc=4" />
here is a full header of html in iframe:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="flexNav-no-touch">
<head>
<meta name="copyright" content="Atos" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="viewport" content="initial-scale=1.0; user-scalable=1;" />
<title>Capture card details page</title>
<link type="text/css" rel="stylesheet" href="/webapp/load-css/BNP/default/css/default.css?loc=1" />
<link type="text/css" rel="stylesheet" href="/webapp/load-css/css/default.css?loc=4" />
Try to add this
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" >
And if
<!--[if lt IE 9]
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < /script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta property="fb:app_id" content="appsid" />
<meta property="og:url" content="http://103.231.125.106/nesos/fblink.jsp" />
<meta property="og:video" content="http://103.231.125.106/nesos/videoappsuser/flowplayer-3.2.18.swf?config={'clip':{'url':'http://103.231.125.106/nesos/videoappsuser/151014150717SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:secure_url" content="https://103.231.125.106/nesos/videoappsuser/flowplayer-3.2.18.swf?config={'clip':{'url':'https://103.231.125.106/nesos/videoappsuser/151014150717SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
Video not playing in same page of facebook
Video shared perfect but video play in new window but I want play video in same Facebook page.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta property="og:video" content="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf?config={'clip':{'url':'http://103.231.125.106/nesos/videoappsuser/150930171515SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:secure_url" content="https://releases.flowplayer.org/swf/flowplayer-3.2.18.swf?config={'clip':{'url':'https://103.231.125.106/nesos/videoappsuser/150930171515SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />