I've read conflicting information about whether the prefix attribute is needed in HTML 5.
For example, is this code correct for Open Graph data in the head? Would it be okay to remove the prefix attribute?
<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article# fb: https://ogp.me/ns/fb#">
<meta property="og:site_name" content="example">
<meta property="og:title" content="example">
<meta property="og:description" name="description" content="example">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="article">
<meta property="article:author" content="https://example.com/profile">
<meta property="article:section" content="Products">
<meta property="fb:app_id" content="123">
It depends on what consumers of the mark-up do. Since og: is named as a predefined prefix in the RDFa 1.1 Core Initial Context, any RDFa 1.1 compliant consumer will work fine if you omit the og: prefix.
Similarly, even if the consumer isn't RDFa 1.1 compliant, but "knows" the prefix anyway, you can omit it.
On the other hand, neither article: nor fb:are defined in the Core Initial Context, so you're relying that much more on the consumer just "knowing" (or "guessing") that prefix.
None of this is really HTML5 related. RDFa is not an explicit part of HTML5 in the way microdata is, but can be regarded as an "add-on" or applicable specification in HTML5 terminology
So, in general, it could be regarded as safer to include the populated prefix attribute. If, however, you know all the consumers you're targeting will interpret the prefixes correctly anyway, then you would be free to omit the attribute.
Related
I was wondering if someone could explain how social media rich previews define which og:title to pick.
I use wordpress and for certain pages I insert php echo strings to inject them into the <head>. I choose to do that to change certain titles and descriptions into more commercial texts. What obvisouly happens is that there are 2 og:title meta tags; my injected one and the Wordpress backend page title.
Once I was told that the first meta tag in the top of the <head> will be picked as thé meta tag to be picked up for rich previews for example, but this seems not to happen (anymore).
Below is my current situation and exact order of meta tags in the <head>:
<html>
<head>
<meta charset="UTF-8">
<title>EXAMPLE</title> // my injected and used by Google
<link rel="canonical" content="https://example.com">
<meta name="description" content="description">
<meta name="subject" content="example">
<meta name="og:image" content="/image.jpg"> // my injected and used by Social Media
<meta property="og:title" content="og:title #1"> // my injected og:title, but ignored
<meta property="og:description" content="description">
<meta property="og:url" content="https://example.com">
<meta name="twitter:title" content="EXAMPLE">
<meta name="twitter:description" content="description">
<link rel="alternate" href="https://example.com" hreflang="nl-nl">
<link rel="alternate" href="https://example.com" hreflang="nl-be">
<title>EXAMPLE</title> // default by Wordpress
<meta property="og:title" content="og:title #2"> // default by Wordpress and being used
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta name="og:image" content="/image.jpg"> // default by Wordpress
</head>
</html>
What happens is that Whatsapp and Facebook are taking the 2nd og:title meta tag, which doesn't make sense in my opinion.
Changing the title page in the backend is not a solution, because it becomes something like Check out our wonderful shop!, this is not user friendly. Also I'm not a fan of Yoast, because Yoast loads extra code into the pages, which I don't want.
Who knows a solution to this, or can explain why this is happening?
Update & Answer
Thanks to Chris I understand that og: meta tags are being scanned from top to bottom in the <head>, and updates the 2 identical properties with the last one that is being scanned. This RDFa process is typical for apps like Facebook, Whatsapp, Twitter. One exception: og:image seems to be needed in the top, it doesn't override a second or third one below it.
Google Search related tags are being picked up by the first one in the top of the <head> and keeps that one as "first come, first serve".
Solution: I will inject og: tags into the bottom of the <head> and the other ones will be kept in the top. Tested it and it works.
Facebook and other apps generally use their own slimmed down versions of RDFa parsing, which from my understanding is a way to parse meta data from xml and html documents. From what I was reading, it seems that as the parser goes through your html page, it will add the first metadata piece it finds to it's "current subject", and if it finds another one with the same name, it will then overwrite the "current subject" with the updated info.
It seems like a pretty complicated topic, so I suppose the simple answer would just be that their parser will always take the last meta data tag and use that.
To fix the issue, I would see if you can inject your custom og:title/metadata below the one autoinjected by Wordpress.
You can read more about RDFa parsing here
I was researching about meta tags in HTML and I ended up on a website that suggested that I don't set the name and htt-equiv attribute at the same time. I read somewhere that if I need to support IE8 OR IE9 then it's recommended to use the http-equiv attribute with X-UA Compatible value. My website needs to be supported by older versions of IE so i use the following line of code:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
But at the same time, i also want to provide extra information such as description of my webpage and also specify keywords. Those are set by using the name attributes. Like this:
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
But according to several webpages, I cannot use the http-equiv and name attributes at the same time. So how do I ensure compatibility with older versions of IE and extra information about the webpage at the same time?
I'm quite confused, please enlighten me.
So what is the best way to define? Thanks!
<meta charset='utf-8'>
or
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
or
<meta http-equiv='charset' content='utf-8'>
The first option, <meta charset='utf-8'>, is preferred, primarily because it's shortest.
Note that the charset declaration should be the first child of the <head>, before any user-controlled content. (in particular, before the <title>)
They are equivalent in HTML5, but I'd recommend using the first form, because it's shorter and easier to remember and was designed for backwards compatibility with older browsers, even in Internet Explorer 6 (see).
The best, and recommended, way is to specify the character encoding (“charset”) both in a Content-Type HTTP header and in a meta tag or, in the case of UTF-8, using a Byte Order Mark at the start. Note that any conflict between the HTTP header and a meta tag is resolved in favor of the HTTP header.
It is much less relevant which of the two forms of meta you use, but the shorter is safer (less opportunities for mistyping or copy error).
References: Specifying the document's character encoding in HTML5 CR and W3C page Character encodings.
The third tag mentioned in the question, <meta http-equiv='charset' content='utf-8'>, is invalid and has no effect. (The W3C validator says: “Bad value charset for attribute http-equiv on element meta.”)
the best way to define the Meta Charset follows:
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
The TAG above is the more complete.
http://www.w3.org/International/O-HTTP-charset.pt-br.php
I am trying to improve the validity of the HTML on my website, but several errors in the meta tags are showing up as invalid, and I'm unsure how to alter them in order to remove the errors.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Bad value X-UA-Compatible for attribute http-equiv on element meta.
<meta name="msvalidate.01" content="4E24196986E1212B82C272A021495004"/>
Attribute name not allowed on element meta at this point.
<meta name="msvalidate.01" content="4E24196986E1212B82C272A021495004"/>
Element meta is missing required attribute itemprop.
<meta name="p:domain_verify" content="5dd1c5f2db0ac0b521f08d56b4cd271b">
Attribute name not allowed on element meta at this point.
Element meta is missing required attribute itemprop.
<meta http-equiv="content-language" content="en">
Attribute http-equiv not allowed on element meta at this point.
Element meta is missing required attribute itemprop.
<meta http-equiv="content-language" content="en">
Using the meta element to specify the document-wide default language is obsolete. Consider specifying the language on the root element instead.
Thanks in advance for any help!
D.
You have to bear in mind that the validator says:
The validator checked your document with an experimental feature:
HTML5 Conformance Checker. This feature has been made available for
your convenience, but be aware that it may be unreliable, or not
perfectly up to date with the latest development of some cutting-edge
technologies.
If your code would be in HTML4 I think we could morally say you could remove some of those meta tags in order to conform to the spec, but there is no definitive spec for HTML5, and so far there are so many features that are being experimented with that will/should end up in the spec, like the ability to use any name/content pairs in the meta tags, or having http-equiv as something acceptable, or, for that matter, a new syntax for meta tags, that your document will probably validate in the future.
So if validating is really important to you, you are in a bit of a rub since there's no precise or right way to validate HTML5 yet; removing those tags would make it validate against the w3c validator, but it would only "look" valid; even to people who believe that validating is more than just a badge.
Be that as it may, you could get rid of the
<meta http-equiv="content-language" content="en">
since you will probably specify the language (if not, please do) in many other attributes and places.
We have a very special question related HTTP meta tags. A content-language meta tag must be added to our website but the platform that we're forced to use doesn't allow us to add it in the expected/correct format that would look like:
<meta http-equiv="content-language" content="en-US" />
We are however allowed to add custom tags and thus could add it like:
<meta name="content-language" content="en-US" />
Does anybody know for sure if these two are both valid or does it have to be http-equiv? Thanks in advance for the help!
The tag <meta name="content-language" content="en-US" /> is valid markup in XHTML. This does not make it useful. (Just as <meta name="I just invented this!" content="whatever ☺" /> is valid.) There is probably no general-purpose software that pays any attention to it.
Using <meta http-equiv="content-language" content="en-US" /> won’t probably matter anything either. Some browsers may use it to determine the language of the content, in the absence of xml:lang and lang attributes, but this in turn has little if any impact on anything. Declaring the language that way affects the default font in some situations, but how often do web pages let browsers use default fonts?
So the crucial question is what it is that you are supposed to achieve by using such tags.