I want to add a meta tag to one of my pages. However, I am using a CMS (ocotberCMS) which gives me access to only the body of the page. I attempted to add the meta tag to the markup looks like:
<meta name="robots" content="noindex, nofollow, noarchive">
{% partial "temp-partial" %}
the result in page source and inspect element is different:
page source:
<meta name="robots" content="noindex, nofollow, noarchive">
<div>
.......// the body of the page generated by {% partial "temp-partial" %}
</div>
Inspect Element:
<html>
#shadow-root
<head>
<meta name="robots" content="noindex, nofollow, noarchive">
</head>
<body>
<div>
.......// the body of the page generated by {% partial "temp-partial" %}
</div>
</body>
</html>
I have read that it is necessary to add the meta tag to the header according to the HTML4++ documentation. I was wondering if this means it will work in above case or it won't?
OctoberCMS has a "Placeholder" feature which is perfect for what you are trying to do:
https://octobercms.com/docs/markup/tag-placeholder
You can use it in your HTML layout like this:
<html>
<head>
<meta name="robots" content="noindex, nofollow, noarchive">
{% placeholder meta %}
</head>
<body>
{% page %}
</body>
</html>
Then, later in any page:
{% put meta %}
<meta name="robots" content="noindex, nofollow, noarchive">
{% endput %}
Whatever is between the {% put %} tags will be put where the {% placeholder %} is in the layout when it is compiled.
You can edit the head section in the layout of the template.
Go to CMS -> Layout -> default.htm and add the meta tag there.
The actual layouts filename may differ but if you look at the html there, you should see which one is the main layout file.
The reason you see <meta name="robots" content="noindex, nofollow, noarchive"> in the <head> section in your inspector DOM tree while it's in the <body> section of your source code and viewing the page source is because the inspector DOM tree is the version that has already been parsed by your browser.
Due to browsers being willing to accept what are known as "tag soup" (improper syntax and layout of HTML) and simply make their best guess on how it should work; the inspector DOM tree that your browser will show you is already the browser's best guess of what the code should be; regardless of the actual validity of that code.
So, in essence the reason why you see the meta tag in the body when you view the source is because that's where it actually is. The reason why you see it in the head section in your inspector is because the browser has guessed that the head section is the correct location for the meta tag.
To actually add it to your head section, where it is supposed to be for robots to actually see it, you will need to edit your CMS Layouts. If you do not have access to the CMS menu or the Layouts submenu, then your user account does not have permissions for that and you will have to get in contact with whoever built your site or ask for further help in IRC (freenode.net - #october) or Slack.
Page source is what you see when creating a website.
Inspect element source includes generated data such as additional style attributes, database exports etc.
As for your question, try using Jquery and appending (http://api.jquery.com/append/) meta tag within the head.
Related
I use plyr player on my page. Basically the only code that is on the page is this:
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
Everything works fine. Just when I send such link to someone over messenger / whatsapp they see the code in the preview I use a custom made CMS similar to WordPress where I added the plyr script code in the post body in the HTML code.
NOTE I am not able to edit nor modify head in html, only div class="container" in the html body. See the url https://zz.zustatzdravy.cz/skryte/90-test-a.html . The url might work in the future.
I am not using WP but something like WP. It is custom made it has got no plugins. I can use custom css
is there any way I can hide the code from the preview?
UPDATE: Facebook sharing debbuger shows what I mean
I think adding open graph / meta description will work. For more information check out https://ogp.me/
In the code replace all instances of {{TITLE TO SHOW IN PREVIEW}} and {{DESCRIPTION TO SHOW IN PREVIEW}}.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{TITLE TO SHOW IN PREVIEW}}</title>
<meta name="title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta name="description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="video.other">
<meta property="og:title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta property="og:description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
</head>
<body>
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
</body>
</html>
Additionally I recommend adding the following below the og:description meta tag.
<meta property="og:url" content="{{ URL OF PAGE }}" />
<meta property="og:image" content="{{ PREVIEW IMAGE }}">
{{ URL OF PAGE }} in this instance being the current URL... so if the url is https://example.com/thevideo then content for og:url would be https://example.com/thevideo
{{ PREVIEW IMAGE }} an optional image file to show as a preview. This is the full url with domain e.g. https://example.com/img/preview.jpg
You can use the Facebook Sharing Debugger tool to test.
You mentioned you're using a CMS. You might need to find a plugin which modifies the meta header tags. In WP you can use something like Yoast SEO.
Update based on only being able to update the body: Looks like in your specific situation the CMS is already adding the og:title and og:description. The og:title is the page title, and the description is a snippet of the text on the page.
Using the open graph tags is really this only way you can modify the title, description and image that appears in the preview of the message. Therefore the ideal situation would be dependent on the CMS you're using.
Solution 1: Move the javascript to a file.
The following code isn't added to to the description:
<script src='https://data1.azami.cz/124141/users/plyr/plyr.min.js'></script>
Therefore if you can create another javascript file with the const player = new player... code then you could also include with a tag similar to this:
<script src='https://data1.azami.cz/124141/users/plyr/a_new_file_with_script.js'></script>
With the solution 1. The description should now be empty.
Solution 2: Prepend a description to the body
If you can't create a new file on the server for some reason, and you can really just modify the body, then for now the only thing I can think of is a little hack around it which would add a new description but might not remove the javascript code from the description. Unless maybe if this new description is longer than 300 characters.
The hack is adding something like the code below before including the script tags for the video. It description would be hidden when viewing the website but prepended the the description tag.
<div style="display: none">Here you can put a description of a video. Or a general description for the website. It will be displayed as the description when sharing via messenger. Maybe if you make this 300 characters or longer, then the script won't show up in the description. This text including this note is 300 characters.</div>
So I was looking at Schema.org. Do I need to change my <html> tag to this
<html itemscope itemtype="http://schema.org/Article">
or can I just use only the meta tags within my <head></head> block?
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
Properties need to belong to an item. You create an item with the itemscope attribute (and the itemtype attribute can give this item a type).
Without itemscope, your markup example is invalid.
It is possible to provide Microdata only within the head element, but it’s not recommended for two reasons:
Microdata was intended to be used on your existing markup. While it can often make sense to include certain meta/link elements in the head (with itemref, see an example), most of the content is typically in the body. If you only want to use elements within head, you would have to duplicate most your content. But if you want to go that route, you might prefer to use JSON-LD.
As head doesn’t allow the use of a grouping element (like div), it gets complex to express Microdata. You would have to use itemref for every property and misuse an element like style for every item (see the first snippet in this answer as example).
Your example could look like this:
<head>
<style itemscope itemtype="http://schema.org/Article" itemref="p1a p1b p1c"></style>
<meta id="p1a" itemprop="name" content="The Name or Title Here">
<meta id="p1b" itemprop="description" content="This is the page description">
<link id="p1c" itemprop="image" href="http://www.example.com/image.jpg">
</head>
If you can use itemscope on the head element, it would be better:
<head itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<link itemprop="image" href="http://www.example.com/image.jpg">
</head>
But as soon as you need more than one item (which is typically the case, e.g., for the Organization/Person which is the author etc.), this doesn’t work anymore, and you would need a solution like in my first snippet.
Note that it’s allowed to use meta/link elements for Microdata within the body element. This makes it way easier, as you can use div elements for the itemscope. So even if you duplicate your content instead of marking up your existing content, it would be preferable to do this in the body:
<div itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<link itemprop="image" href="http://www.example.com/image.jpg">
</div>
(I replaced the meta element for the image property with a link element, because using meta is invalid for this purpose.)
According to the given example from scheme.org, yes both are compulsory for Google.
To validate whether your data is being captured properly you can use this tool:
Structured data testing tool
By using the tool above you can see that if you omit itemtype="http://schema.org/Article" the data will not get captured.
The section about Microdata on whatwg.org doesn't mention meta-elements in the head-element of a HTML document explicitly. In conclusion you need itemscope to have valid markup.
If you take a look at the description at schema.org you'll find this section about WebPages:
Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an itemscope, they will be assumed to be about the page.
The interesting part is this:
[…] if they [the properties] are found outside of an itemscope, they will be assumed to be about the page.
According to this you don't need to itemscope to the html-element. But it reads more like a suggestion then a definite specification.
You can see this behavior also in Google's Structured Data Testing Tool. When you run this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
</head>
</html>
… you'll find that it doesn't capture any data. It'll start capturing data, as soon as you add itemscope resulting in an Unspecified Type without any error:
Using itemtype="http://schema.org/Article" will fail or at least throw errors as too few properties are given for type Article.
All different types can be found on the WebPage overview on scheme.org. Maybe one is suitable for the whole page.
You can safely use <html itemscope itemtype="http://schema.org/Article">. This allows you to define itemprop's inside <head> element.
Google Rich Test Snippets and w3 validator, both validate this approach as I have already tested it.
Please clarify what is the difference between <meta name="title"> tag and <title></title> tag.
<title>Page title</title>
<meta name="title" content="Page title">
If both are used, which is most prioritised?
I observed some sites that have both <meta name="title"> and <title></title> tags and both are the same, which is expected, please confirm?
If we didn't use <meta name="title"> tag title, would I have any problem regarding SEO?
<head>
<title>Stackoverflow</title>
<meta name="description" content="free source">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
</head>
<title> is a required element on any HTML page to be valid markup, and will be what is displayed as the page title in your browser's tab/window title. For instance, try inputting the following markup into the W3C Markup Validator (via "Direct Input"):
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
This will produce an error that there is no instance of <title> in <head>.
The <meta name="title" content="page-title"> element is just that -- metadata about your page, that any client browser or web crawler can use or not use as it wants. Whether it is used or not will depend on the crawler/client in question, as none of them are required to look for or not look for it.
So in short, you should have a <title> element if you want valid markup. The <meta> tag is going to depend on whether you want to provide for crawlers/clients, and you'd probably have to check documentation for if a particular crawler uses it.
The first is to display page name.
<title> This will be displayed in the title bar of your Browser. </title>
Second is for crawling.
<meta name="title" content="Whatever you type in here will be displayed on search engines.">
The <title> tag will actually display the page name at the top of the page. The <meta> tag, while used for crawling, could be omitted and the page still should crawl over the <title> tag. I think you could just stick with the <title> tag if you wanted.
I have noticed that for some blog sites google will use
<meta name="description"
for a general description of the site.
So, if you have a blog site where the home page also shows the latest blog post you don't want the site description to be the same as the blog post name defined in
So I'd try meta description for an overview and
<title>
for specific content.
I'd like know if having the title tag positioned at the end of <head> tag or in any other position, always inside the <head></head>, can lead to some kind of problem, I'm not talking about SEO stuffs, I'm talking about standards, browser rules, web application rules, or something like this.
I'd like to load a page from two different php file like this, is it a wrong way?
<!-- file1.php -->
<html>
<head>
....
<!-- file2.php -->
<title><?php echo($var)?>
</head>
<body>
...
<head> tag is not closed, because with e second file I dynamically add the <title>
tag
The title must be in the <head>
If you use non-ASCII in it then it really should be after any <meta> that specifies character encoding.
Since it is important, it is probably a good idea to put it near the top of the <head> so it gets picked up by tools that only grab the first $n bytes of the document.
If I want to redirect to another page in my HTML file, do in have to place the meta tag in the head or can I place it at the top of the file before the DOCTYPE? Thank you.
You can't place a meta tag above the DOCTYPE. The DOCTYPE must always be the first element in an HTML document, and meta tags must only be placed in the head.
Documents must consist of the following parts, in the given order:
Optionally, a single "BOM" (U+FEFF) character.
Any number of comments and space characters.
A DOCTYPE.
Any number of comments and space characters.
The root element, in the form of an html element.
Any number of comments and space characters.
Source: http://www.w3.org/TR/html5/syntax.html#writing
For purposes of this question, the spec says that a document must start with a DOCTYPE and be followed by a root html element. While a meta tag might still work, there is no guarantee of it doing so today and continuing to do so in the future.
The meta tag has to be inside the <head></head> section. You can not add anything before <!DOCTYPE html>
Here is detailed description of DOCTYPE
W3C deprecates the use it, but they do offer an example on W3C:
<HEAD>
<TITLE>Don't use this!</TITLE>
<META http-equiv="refresh" content="5;http://www.example.com/newpage">
</HEAD>
<BODY>
<P>If your browser supports Refresh, you'll be transported to our
new site
in 5 seconds, otherwise, select the link manually.
</BODY>
GIYF: H76: Using meta refresh to create an instant client-side redirect
You should insert the following line in the head section of your HTML page, replacing http:example.com/ with the actual web page to which you want to redirect your viewers:
< meta http-equiv="refresh" content="2;url=http://example.com/" />
Here is an example with the correct line inserted in a typical HTML page. Note that it comes above the title tag.
<html>
<head>
<meta http-equiv="refresh" content="2;url=http://example.com" />
<title>Page Moved</title>
</head>
<body>
This page has moved. Click here to go to the new page.
</body>
</html>