Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?
Related
I am learning HTML5 (so don't judge me) and I came across something that doesn't make much sense to me.
How come that when I put the title after the meta bit like this, it doesn't become a title and somehow acts like it is in the body and not the head. If I put the title before the meta bit like this, it works as it is supposed to.
Hope you didn't have a stroke reading this as I am a beginner and not even close to good at explaining things. I'm also new to this website btw.
Many thanks,
Nathan
Its just a typo in your code, and kindly add your code in text format and refrain from adding pictures of your code.
Just close the meta tag on line 5 of your code and you're good to go.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is an awesome website">
<title>Welcome!</title>
</head>
<body>
<h1>POG WEBSITE!</h1>
</body>
</html>
I have a strange situation with my website where whenever it appears on Google Search, the alt text of one of the images is also displayed despite not being part of the <title> tag.
On my website (sparen.github.io), I have the following header:
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)</title>
<link rel="stylesheet" type="text/css" href="blah.css">
<meta content="Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)"
name="description">
<meta name="keywords" content="Sparen, Touhou, Danmakufu, ph3, Tutorial, Script, Project">
<meta name="viewport" content="initial-scale=1">
<script>
<!-- Removed Google Analytics stuff for purposes of StackOverflow Question-->
</script>
</head>
<body id="mhome">
<div class="yui-t1" id="top">
<center><img alt=""Site Logo"" src="images/logo.png" style="width:90%"></center>
However, in Google Search, the title appears as follows:
***This is actually a different page, but all pages on my website seem to have the same issue, and all have the same header structure.
I don't know why it has that extra 'Site Logo' thing, which only appears as part of the image alt text in my banner (which is not even in the head but rather the body of the page).
It hasn't disappeared in the past few months, and it'd be nice to know if there's something I never took into consideration when originally building my website or if there's something BlueGriffon did before I migrated away from it.
Google seems to be confused by your quotes inside the alt text. Just remove them or use
<img alt='"Site Logo"' src="images/logo.png" style="width:90%">
Am I wrong or this could be a flaw (vulnerability?) in Google Search?
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 just made a website for a french restaurant. The website is in english, but I guess there is enough french on the website (labeled pictures of menu items) to prompt the visitor to translate the website if using Chrome.
Is there something I can add to the html to prevent chrome from asking to translate the page? I'd assume it'd be something like <html lang="en"> but that doesn't work.
Any ideas?
Thanks
New Answer
Add translate="no" to your <html> tag, like so:
<html translate="no">
MDN Reference
Old Answer
(This should still work but is less desirable because it is Google-specific, and there are other translation services out there.)
Add this tag in between <head> and </head>:
<meta name="google" content="notranslate">
Documentation reference
So for the ultimate solution I made;
<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">
<head>
<meta name="google" content="notranslate" />
</head>
<body>
...
</body>
</html>
This worked for me.
The meta tag in the <head> didn't work for me, but
class="notranslate"
added to a parent div (or even <body>) did work and allows more precise control of the content you don't want to be translated.
Solution:
<html lang="en" class="notranslate" translate="no"> <!-- All translators -->
<head><meta name="google" content="notranslate" /> <!-- Just for google -->
</head> <!-- Close head -->
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
// Just for instructions
// Do not copy or paste
console.log("The first div don't alows translateing. But the second, alows it.")
console.log("Open the translator and see the efect.")
DIV1
<div translate="no">
Try translating me!
<b>Olá - Hello - Hola</b>
</div>
<hr> DIV2
<div translate="">
Now, you can do it!
<b>Olá - Hello - Hola</b>
</div>
Note that this example has some problems with the StackOverflow viewer.
Disclaimer: This answer is repeated, on it is on the Community Wiki.
Disable google translate on your website
Add this to your <head></head>:
<meta name="google" content="notranslate" />
Add this in your <head>:
<meta name="google" content="notranslate" />
and change your <html> tag to
<html lang="en" class="notranslate" translate="no">
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
/* Just some basic styling */
div[translate] {
width: 50%;
border: 1px solid black;
padding: 20px;
border-radius: 7px;
text-align: center;
font-family: Arial;
}
<div style="display: flex;gap:20px;">
<div translate="no"> <!-- Disables translation -->
Enabled<br>
<b>Olá - Hello - Hola</b>
</div>
<div translate> <!-- Enables translation -->
Disabled<br>
<b>Olá - Hello - Hola</b>
</div>
</div>
Note that this example has some problems on the stackoverflow viewer.
The google tag for not translating the page has been updated to
<!-- opt out of translation features on all search engines that support this directive -->
<meta name="robots" content="notranslate">
or
<!-- opt out of translation features on Google -->
<meta name="googlebot" content="notranslate">```
For more info check this links:
https://developers.google.com/search/docs/crawling-indexing/special-tags
https://developers.google.com/search/docs/appearance/translated-results
Moreover, I had to update this because it was not working on Edge browser by using only translate="no" as below:
<html translate="no">
So for a full solution as mentioned here too, i had to do something like this to not translate anything from search engines
<html lang="en" class="notranslate" translate="no">
<meta name="robots" content="notranslate" />
...
</head>
FYI, if you want something that will work for all content in your site (including that which is not HTML), you can set the Content-Language header in your response (source) to the appropriate language, (in my case, en-US).
This has the benefit here is that it will "disable" the offer to translate the page for you (because it will know the source language correctly), but for other, non-native readers, they will still have the option to translate your site into their own language, and it will work correctly.
(Also for my use case, where Chrome was offering to translate well formatted JSON from latin to English, that BS goes away.)
My Windows is german in german.
I made the following experiences in Chrome:
If I set
<html lang="en" translate="no">
Google Translate comes up with suggestion to translate english.
Definitely I have to omit the lang property. This works for me:
<html translate="no">
No popup is coming up and the translation icon in the URL field is no longer displayed.
sometimes you need to block not all html, but specific element, in such case you could add class="notranslate" only to that element.
ie. <div class="notranslate"> some content </div>
I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}