Reading a meta tag value in JavaScript requires the meta element to exist in the parsed DOM with a recognisable name or http-equiv attribute, after which document.querySelector against a meta selector paired with getAttribute('content') returns its content. Before any of that works, the HTML head must contain a clean, standards-aligned block where charset, viewport, title, description and optional author are each emitted as separate, well-formed elements with valid content attributes. Generated blocks that mix canonical links, robots directives, Open Graph properties and Twitter Card markup into a single generic form tend to ship with contradictory or duplicate entries that confuse downstream consumers and make retrieval brittle. The Meta Tag Generator solves the upstream half of this task by producing an auditable basic head block with a UTF-8 declaration, a responsive viewport, the title element, description metadata and optional author metadata, all trimmed and HTML-escaped so the same content survives both static serving and JavaScript parsing. The JavaScript half then becomes a predictable set of selector lookups against known element names.
What JavaScript Reads From a Meta Tag
JavaScript does not understand a meta tag as metadata on its own; it reads the DOM element the browser has already parsed. Each meta tag in the head is an HTMLElement node whose attributes are accessible through standard DOM APIs. The two attributes JavaScript actually uses for retrieval are the name (or http-equiv) attribute, which identifies the purpose, and the content attribute, which holds the value. The semantics of these elements are defined in the WHATWG HTML specification, which is the source of truth for which name values are recognised as standards-backed metadata.
In other words, a meta tag that is missing the content attribute, missing the closing quote on its content value, or carrying HTML entities that were double-escaped during a CMS insertion will return null, an empty string, or a string with stray entity artifacts when queried. That is why the upstream side of the task, emitting valid markup, matters before any JavaScript reads it.
Generate the Basic Head Block Step by Step
Before writing a single line of JavaScript, the page needs predictable meta tags to query. The Meta Tag Generator produces exactly that foundation: a small, scoped block containing only the elements that are safe to review together.
- Enter one accurate document title (up to 200 characters) that matches what visitors should see in a browser tab and what you would want a search system to use as a label for the page.
- Add a concise page description (up to 500 characters) that summarises the page in human-readable language, avoiding keyword lists, duplicate copy from unrelated pages, or promises the page does not fulfil.
- Optionally include a maintained author name (up to 120 characters) when the site has a clear authorship convention worth surfacing as basic metadata. Omit the field when the site does not maintain a meaningful value.
- Generate the escaped basic head block and copy it. The block contains a UTF-8 charset declaration, a responsive viewport meta element, the title element, description metadata, and author metadata only when supplied. Canonical links, robots directives, Open Graph properties and Twitter Cards are deliberately excluded and have dedicated tools.
- Insert the block inside the document head and inspect the delivered source. Remove any duplicate description metadata, title element, or charset declaration added by a theme, plugin or framework so retrieval later returns the value you intended.
Each value is trimmed, length-bounded, checked for control characters, and HTML-escaped so ampersands, angle brackets, and quotes that could affect attribute parsing are encoded before the block leaves the form.
Reading Each Meta Value in JavaScript
Once the block is in place, JavaScript can read it through three reliable patterns: document.title, document.charset, and document.querySelector('meta[name="..."]').getAttribute('content') for everything else.
For the document title, the cleanest access is document.title, which returns the text content of the title element regardless of how it was emitted. For the declared encoding, document.charset returns the resolved charset string ("UTF-8" when the meta tag declares a UTF-8 charset). For description, author, and viewport, the patterns below return the value of the content attribute verbatim.
document.querySelector('meta[name="description"]').getAttribute('content') returns the description metadata value as a plain string. document.querySelector('meta[name="author"]').getAttribute('content') returns the author metadata, or null when the optional field was omitted from the head block. document.querySelector('meta[name="viewport"]').getAttribute('content') returns the viewport content attribute, which the Meta Tag Generator fixes to width=device-width, initial-scale=1.
document.querySelector('meta[charset]') reaches the declared encoding directly when you want to inspect the element rather than the document-level shortcut. The basic block uses the charset attribute form rather than http-equiv, so a http-equiv selector will not match it.
If multiple matching elements exist, for example two description meta tags inserted by a theme and the generator, querySelector returns the first match in document order, which may not be the value you expect. The post-deployment cleanup step in the workflow above is the safeguard against that, and a querySelectorAll scan before relying on the value is a quick way to surface any duplicate.
Selector Patterns for Each Generated Field
| Field | HTML element | JavaScript access |
|---|---|---|
| Document title | <title>...</title> | document.title |
| Charset | <meta charset="utf-8"> | document.charset |
| Viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> | document.querySelector('meta[name="viewport"]').getAttribute('content') |
| Description | <meta name="description" content="..."> | document.querySelector('meta[name="description"]').getAttribute('content') |
| Author (optional) | <meta name="author" content="..."> | document.querySelector('meta[name="author"]').getAttribute('content') |
The third column is what JavaScript sees when the basic block is the only source of these fields. Any additional tag inserted by a CMS appears as a second match in querySelectorAll, and the first match in document order is the one returned by querySelector.
Why Escaping Matters for Retrieval
The Meta Tag Generator trims every text value, rejects control characters, and HTML-escapes ampersands and angle brackets, with quotes encoded where they could otherwise affect attribute parsing. That matters at retrieval time because an unescaped ampersand turns into a malformed HTML entity, which the browser silently rewrites before parsing, so JavaScript ends up reading "Tom & Jerry" instead of "Tom & Jerry". Similarly, a stray double quote inside an attribute value can close the attribute prematurely and corrupt every meta tag that follows it until the next angle bracket, returning truncated content.
The limits in the form are also retrieval-safe by design: the title is bounded at 200 characters, the description at 500, and the author at 120. These are syntax ceilings rather than ranking targets, and a value past those limits is rejected by the form rather than silently truncated, so the head block never ships a half-encoded entry.
Limits, Duplicates, and What the Tool Does Not Cover
This generator deliberately does not produce canonical links, robots directives, Open Graph properties, or Twitter Card markup. Each of those expresses a separate page decision, and mixing them with the basic block tends to produce contradictory entries in one generic form. Canonical link generation, robots meta tag generation, Open Graph tag generation, and Twitter Card generation each have their own dedicated tools, and the Meta Tag Generator's contract ends at the basic document metadata.
That boundary is also why JavaScript retrieval stays predictable: every field that the form can emit has exactly one HTML element shape, one attribute name, and one content value. A theme that adds its own description meta tag breaks that contract silently, because the form did not introduce that second tag. A manual inspection of the delivered head is the only way to catch duplicates before JavaScript queries return the wrong match. The author field is optional and describes authorship metadata only; it is not a verified identity, copyright statement, rel=author replacement, or structured data, so JavaScript consumers should treat it as a label rather than an identity signal.
Verify Retrieval After Deployment
After pasting the head block into a CMS template or static HTML file, open the page in a browser and run document.title, document.charset, and the document.querySelector('meta[name="..."]').getAttribute('content') calls from the browser console. Each should return the exact value that was entered into the form. View the page source, not the rendered DOM, to confirm there is only one title element, one charset declaration, and one description meta tag.
For a final mobile check, view the page at a narrow viewport width to confirm the responsive layout still follows the device width. The viewport content is fixed to width=device-width, initial-scale=1; maximum-scale and user-scalable restrictions are intentionally not added, because they harm accessibility and are not required for a usable responsive layout. JavaScript that depends on the viewport can read it through the selector pattern above and confirm the value matches.
Once the page has been recrawled, a search-console inspection will surface the title and description that the search system chose to display. The Meta Tag Generator produces valid source metadata, and Google's title link guidance explains why a generated title is not a promise that any search engine will display the same text. Treat the JavaScript retrieval check as confirmation that the markup is auditable, and the search-console inspection as confirmation that a crawler saw it.