The <head> element in HTML is a container for metadata and is placed between the <html> tag and the <body> tag. This element defines the document title, base, link, meta, script, and style. To learn more about the HTML head, click here.
To make changes to your website's <head> elements using Wingify, add a custom JavaScript/JQuery code snippet using the Wingify code editor. You cannot make changes to the head elements using the visual editor operations because it only loads the body content of your webpages.
Example 1: Change Meta Tag Content
Say you want to change the content of the meta tag with the name description.
<html>
<head>
<meta name="description" content="YOU_NEED_TO_UPDATE_THIS" />
<meta name="keywords" content="this" />………..
</html>
Using the code editor, you can add the following code snippet in the Add JavaScript section of the code editor:
vwo_$(function() {
vwo_$('meta[name=description]').attr('content', 'new value');
});document.querySelector('meta[name="description"]')
.setAttribute('content', 'new value');Example 2: Change the Page Title
To change the title of a webpage, add the following code snippet in the Add JavaScript section of the code editor:
vwo_$(function() {
vwo_$(document).attr("title", "New Title");
});document.title = "New Title";
Example 3: Add a Script in the Head
To add a script in the <head> section, add the following code snippet in the Add JavaScript section of the code editor.
vwo_$(function() {
vwo_$('head').append('<script type="text/javascript" src="your.js"></script>');
});const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'your.js';
document.head.appendChild(script);