Recommended Meta Elements? - html

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

Mvc section not rendered in head but in body

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.

Thymleaf Spring MVC Application Not able to include .css in HTML

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.

CSS won't be loaded at iframe in Internet Explorer(IE)

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]-->

Video is not shared to facebook account

<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

How to play shared video on the same Facebook page instead of a new window

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" />