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">