Dynamic Head Meta Tags in WordPress enable the automatic generation of meta information within the <head> section of webpages. This feature allows for the dynamic control of meta attributes such as titles and descriptions, optimizing content for search engines. Using WordPress hooks, functions, and plugins, developers can dynamically generate meta tags based on factors like post content and taxonomy terms. This ensures each page has relevant meta information, enhancing search engine visibility and ranking.
If you have worked with html-css codes, you know that you put meta tags in head part of the html to play different roles like charset, viewport, language used inside opening <html UTF >.
Well in WordPress, there are functions that are prebuilt to get the website information like meta tag, language … Using functions that are prebuilt with WordPress, you can fetch info about your website dynamically.
When creating header.php we have added some important info on the header.php previously. Read about creating global header and footer in wordpress here.
I will assume you know about the informations included in head part of the code. Here is the example of the head part.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <title>Your Custom Theme Name</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<link rel="stylesheet" href="build/index.css" />
<link rel="stylesheet" href="build/style-index.css" />
-->
</head>
<body>
Main Website information functions in WordPress & Their Roles
language_attributes();outputs a string of HTML attributes representing the language settings of the current webpage, including the language code and text direction. When used inside the<html>tag, it dynamically adds language-related attributes to the HTML element based on the language settings specified in the WordPress admin panel, improving accessibility and ensuring proper language handling for search engines. It can be used as<html <?php language_attributes(); ?>>bloginfo('charset');outputs the character encoding used by the website, typically set to UTF-8 for compatibility with international characters. When used within the<meta>tag for the charset attribute, it dynamically inserts the character encoding specified in WordPress settings, ensuring proper rendering of special characters and symbols across the website. It can be used as<meta charset="<?php bloginfo('charset'); ?>">body_class();function in WordPress generates a list of CSS classes dynamically based on various factors such as the current page, post type, and user role. When used inside the <body> tag, it applies these generated classes to the body element, allowing developers to style pages differently based on context and improving the flexibility and customization of WordPress themes. It can be used as<body <?php body_class(); ?>>- The meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">which does not contain wp function but is commonly used in web development to ensure proper rendering and scaling of web pages on mobile devices. It sets the viewport width to the device’s width and initial zoom level to 1, optimizing the display and layout of the webpage for various screen sizes.
So after using the tags that we discussed, now your header.php head part will look something like this:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport", content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
—- Thankyou for Reading —-
