How to add Meta tags dynamically using jQuery?
Yes! You can see the below example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" id="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Game</title>
</head>
<body class="homep">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(function
() {
//update Meta Tag in
Header
updateMetaTag("viewport");
});
var
updateMetaTag = function (id) {
var
meta = document.getElementById(id);
meta.setAttribute("content",
"width=device-width, initial-scale=1.0");
OR
//document.querySelector('meta[name="viewport"]').setAttribute("content",
"width=device-width, initial-scale=1.0");
}
</script>
</body>
</html>
What
is a Meta tag?
Metadata is data about data.
The Meta Tags provides metadata about the HTML document. Meta elements are typically used to specify to -
1. Page
description
2. Keywords
3. Author
of the document
4. Last
modified
5. Other
metadata
An example looks like –
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free
Web tutorials">
<meta name="keywords" content="HTML,CSS,JavaScript,jQuery,
Java,C#,Angular">
<meta name="author" content="John
Doe">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>
Notes
-
Meta tags always inside the <head> element of HTML page and it always
passed as name/value pairs
You should include the following <meta> viewport element in all your
web pages:-
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
