<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width-divice, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>
I ask if there is a lacking code that need to put
You can use this meta tags for SEO if you want
<meta name="keywords" content="wood, furniture, garden, gardentable, etc">
<meta name="description" content="Official dealer of wooden garden furniture.">
This meta tags tells search engines not to index the page and prevent them from following the links. If you happen to be using two contradictory terms (e.g. noindex and index), Google will choose the most restrictive option.
<meta name=”robots” content=”noindex, nofollow” />
Why is this tag useful for SEO? First of all it’s a simple way to prevent the indexation of duplicate content, for example the print version of a page. It might also be useful for incomplete pages or pages with confidential information.
Also i sometimes use
<meta name="author" content="John Smith">
You have a typo in your viewport declaration - it needs to be "device-width". Other than that, your head declaration includes all the necessary parts and looks valid to me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>
Related
I'm using discord, and I saw a lot of people do that thing (the big square in the image).
I tried to do that in html with meta tag, but it came out with the result (image number 2).
I really want to know how to do this, can someone please help me?
Image number one
| image number two
And there is the code I use for doing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta property="og:title" content="An Image By ItsJustOne#9817">
<meta property="og:description" content="Remember always that there is an end in the tunnel 🥰">
<meta property="og:image" content="https://cdn.discordapp.com/banners/907132383814377502/4aca154cd6040b31aacaaf781877f121.png?size=1024">
<meta name="viewport" content="width=device-width">
<title>Why You Are Here?</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Why You Are Here?
<script src="script.js"></script>
</body>
</html>
The image I'm trying to use is my discord banner.
It was 4 months ago, and I forgot to write here that I found a solution a week after asking here!
The solution is simple, using other meta tags, not the regular. The twitter meta tags.
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Cool description">
<meta name="twitter:image" content="the image link">
<meta name="twitter:card" content="summary_large_image">
Replace there the title, description, and the image link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie= edge">
<title>Blooger</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
I have searched a lot, checked my syntax of linking css n times and spelling of style sheet is correct, the folder I am using is correct I don't know the problem, please help.
I'm not sure whether you've not added it here on SO, but your HTML file doesn't contain anything to show. (no <body></body> or anything within it)
As an example, you need to add
<body>
<h1>My Blog</h1>
<p>welcome to my blog.</p>
</body>
Please check status, type and size in network tab of browser developer tool
Multiple HTML checkers are giving me these errors, but I do not understand how I am getting them or how to fix them. Any help is greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="text">
<meta name="description" content="text">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="text">
<link rel="icon" href="image.jpg" type="image/x-icon">
<link href = "style.css" rel = "stylesheet">
<title>text</title>
text
</head>
<body>
The end tag for head is optional
The start tag for body is optional
The a element is forbidden inside the head
Therefore your a element implicitly ends the head and starts the body so your </head> tag has no open head element to match.
Fellow Meteor users,
During my searches for tutorials and example applications, I found one that uses a unique head structure:
<meta charset="utf-8">
<title>Title</title>
<meta name="description" content="Top10">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
This particular example app didn't even have a <body> tag anywhere, just a file called head.html which contained the above code. I also learned that it seems that Meteor just automatically makes a body tag for you, so technically, just a head.html is fine.
So, it got me wondering, does anyone define specific head tags for Meteor apps? What's the rationale? Is the above code a good starting point?
When Meteor parses your various html files, any files that contain a <head></head> tag outside of a <template></template> will be concatenated together into one <head></head> tag in every page of your app. This is good for including stuff like title, various meta tags, and 3rd party resources that you want to use on every page. However handlebars support for title tags still does not exist in Meteor so it is definitely limited in what you can do with it (No dynamic meta information).
In the end if you want dynamic information you'll have to resort to something like jquery
You can find more discussion revolving around the <head> tag here:
https://github.com/meteor/meteor/issues/266
You can easily set dynamic titles using iron:router for example with:
onAfterAction: function(){
document.title = 'my awesome site: ' + Router.current().route.getName();
}
I use a head.html that includes various SEO settings:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="fragment" content="!"/>
<meta name="description" content="your description"/>
<meta property="og:title" content="your site title"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://yourimageurl"/>
<meta property="og:url" content="https://hostname"/>
<meta property="og:description" content="your description"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:url" content="https://hostname"/>
<meta name="twitter:title" content="your site title"/>
<meta name="twitter:description" content="your site description"/>
<meta name="twitter:image" content="https://yourimageurl">
<noscript>You must have Javascript enabled in order to use this site</noscript>
<link rel="shortcut icon" href="/your-ico" type="image/x-icon" />
</head>
Looking into https://github.com/kadirahq/meteor-dochead I found one way to dynamically add data to <head> tag
var meta = '<div>just an example</div>'
document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', meta);
Or just add that package if you need more functionality
I'm working on creating Responsive web page using HTML5. Inside HTML5 Head tag, I've title, meta and link tags, is there any recommended best practice for sequencing these tags to get best possible results ? Current structure of the my page is mentioned below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-saleable=false;"/>
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Demo</title>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body style="margin: 0px;">
Content
</body>
</html>
Can you please suggest, if there is any best practice I need to follow, to utilize HTML5 in best possible way for responsive page design?
It seems ok but:
Responsive web design has nothing whatsoever to do with HTML5.
You shouldn't set maximum-scale nor user-scaleable (which you've got a typo in) to false as the user should be able to scale and zoom in if they want/need to.
Remove the xmlns stuff, it's not needed.
Don't use inline styles in elements, it's not good practice.
This library is very useful to design responsive template
http://getbootstrap.com/