HTML Meta Tags for SEO

By Ratan Updated: 16 Oct 2026

Improve search engine rankings and indexing using meta description, keywords, robots, and canonical tags.

Level: Beginner to Advanced

Duration: ~60 Mins Deep-Dive

1. What are HTML Meta Tags?

Meta tags live inside the element and provide machine-readable metadata about the webpage to search engines (Google, Bing) and social media crawlers. They are invisible to users reading the rendered page.

2. Essential SEO Meta Tags


  
  

  
  

  
  Online CBT Test Series | Free Mock Tests & Practice Questions

3. Best Practices for SEO Meta Data

Keep </code> between 50 and 60 characters to avoid truncation in Google search results.</li> <li>Keep <code>meta name="description"</code> between 140 and 160 characters. Make it an actionable summary.</li> <li>Ensure every single page on your site has a distinct, unique title and description.</li> </ul> </div>  <div id="default-playground-placeholder"></div>    <style> /* Code Playground styling - Highlighted Clean Border & Headers */ .tech-playground { margin: 35px 0; border: 3px solid #009DDC !important; border-radius: 14px !important; overflow: hidden; box-shadow: none !important; background: #ffffff; transition: all 0.3s ease; } .tech-pg-header { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; padding: 14px 20px !important; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #334155 !important; flex-wrap: wrap; gap: 10px; } .tech-pg-title { color: #ffffff !important; font-size: 17px !important; font-weight: 800 !important; margin: 0; display: flex; align-items: center; gap: 8px; } .tech-pg-tabs { display: flex; align-items: center; gap: 12px; } .tech-pg-tab-link { font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .06em; color: #ffffff !important; opacity: 0.75; text-decoration: none !important; padding: 5px 12px !important; border-radius: 6px; transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent; } .tech-pg-tab-link:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.15); } .tech-pg-tab-link.active { color: #ffffff !important; background: rgba(255, 255, 255, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; font-weight: 900 !important; } /* Inline Practice Input Bar - Red when empty, Green underline when filled */ .tech-inline-inputs-bar { background: #f8fafc; border-bottom: 2px solid #e2e8f0; padding: 10px 20px; display: none; flex-direction: column; gap: 8px; } .tech-inline-input-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tech-inline-field-group { display: inline-flex; align-items: center; gap: 8px; } .tech-inline-label { font-size: 13.5px; font-weight: 800; transition: all 0.2s ease; } .tech-inline-label.empty { color: #dc2626 !important; /* RED text when empty */ } .tech-inline-label.filled { color: #16a34a !important; /* GREEN text when filled */ } .tech-inline-input-box { padding: 4px 10px; font-family: Consolas, Monaco, monospace; font-size: 14px; font-weight: 700; outline: none; border: none; border-radius: 4px 4px 0 0; transition: all 0.2s ease; width: 140px; } .tech-inline-input-box.empty { border-bottom: 2.5px solid #dc2626 !important; /* RED UNDERLINE when empty */ background: #fef2f2 !important; color: #dc2626 !important; } .tech-inline-input-box.filled { border-bottom: 2.5px solid #16a34a !important; /* GREEN UNDERLINE when filled */ background: #f0fdf4 !important; color: #0f172a !important; } .tech-pg-textarea { width: 100%; min-height: 120px; height: 140px; background: #ffffff; color: #1e293b; border: none; outline: none; padding: 15px; font-family: Consolas, Monaco, "Andale Mono", monospace; font-size: 14px; line-height: 1.6; resize: none; overflow-y: hidden; } .tech-pg-preview-title { background: #f8fafc; color: #64748b; padding: 8px 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1.5px solid var(--tech-line); } .tech-pg-preview-frame { width: 100%; min-height: 140px; height: auto; background: #ffffff; border: none; overflow: hidden !important; } /* Console output styling (Clean white background) */ .tech-lesson-content #playground-console-output, #playground-console-output, .tech-pg-console, .tech-lesson-content .py-output, .tech-lesson-content .py-output pre, .py-output, .py-output pre { background: #ffffff !important; background-color: #ffffff !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; outline: none !important; padding: 14px 16px !important; margin: 0 !important; border-radius: 6px !important; } .tech-pg-console { width: 100%; min-height: 120px; height: 140px; font-family: Consolas, Monaco, monospace; font-size: 14px; overflow-y: auto; white-space: pre-wrap; } .py-output strong { display: block !important; color: #021C71 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 4px !important; } </style>  <div class="tech-playground" id="tech-playground-box"> <div class="tech-pg-header"> <h4 class="tech-pg-title"> 📝 Live Lesson Practice </h4> <div style="display:flex; align-items:center; gap:12px;"> <div class="tech-pg-tabs" id="pg-tabs-container"> <span class="tech-pg-tab-link active" data-lang="html" onclick="switchPlaygroundTab('html')">HTML/CSS</span> <span class="tech-pg-tab-link " data-lang="js" onclick="switchPlaygroundTab('js')">JavaScript</span> <span class="tech-pg-tab-link " data-lang="python" onclick="switchPlaygroundTab('python')">Python</span> <span class="tech-pg-tab-link " data-lang="cpp" onclick="switchPlaygroundTab('cpp')">C++</span> <span class="tech-pg-tab-link " data-lang="c" onclick="switchPlaygroundTab('c')">C</span> <span class="tech-pg-tab-link " data-lang="php" onclick="switchPlaygroundTab('php')">PHP</span> </div> <button type="button" onclick="closeInPlacePlayground()" title="Close Practice" style="background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s ease;"> ✖ </button> </div> </div>  <div class="tech-inline-inputs-bar" id="tech-inline-inputs-bar"> <div style="display:flex; justify-content:space-between; align-items:center;"> <span style="font-size: 11px; font-weight: 800; color: #021C71; text-transform: uppercase; letter-spacing: .05em;"> ⌨️ Practice Inputs (लाइव इनपुट भरें) </span> <span style="font-size: 11px; color: #64748b; font-weight: 600;"> (खाली होने पर <span style="color:#dc2626; font-weight:800;">RED</span>, भरने पर <span style="color:#16a34a; font-weight:800;">GREEN</span> underline) </span> </div> <div class="tech-inline-input-row" id="tech-inline-input-fields-container">  </div> </div> <div class="row no-gutters" id="tech-pg-row-container">  <div class="col-md-6 border-right" id="playground-editor-col" style="border-color: var(--tech-line) !important;"> <div class="tech-pg-preview-title">💻 Code Editor (Monaco VS Code Engine)</div> <div class="tech-pg-editor-wrap" style="position: relative;"> <div id="monaco-editor-container" style="width: 100%; min-height: 220px; height: 280px; border: none;"></div> <textarea class="tech-pg-textarea" id="playground-editor" style="display: none;"></textarea> </div> </div>  <div class="col-md-6" id="playground-preview-col"> <div class="tech-pg-preview-title" id="playground-preview-header">👀 Live Preview</div> <iframe class="tech-pg-preview-frame" id="playground-preview-iframe" style="display: block;"></iframe> <pre class="tech-pg-console" id="playground-console-output" style="display: none;"></pre> </div> </div> </div> <script> // Code Compiler Engine Script (Monaco Editor + Pyodide CPython Wasm + Piston C++ API) (function() { var editor = document.getElementById('playground-editor'); var pyodideInstance = null; var pyodideLoadingPromise = null; var monacoEditorInstance = null; function detectDefaultLang() { var phpLang = 'html'; if (phpLang && (phpLang === 'python' || phpLang === 'cpp' || phpLang === 'html')) { return phpLang; } var url = (window.location.pathname + window.location.search).toLowerCase(); if (url.includes('html') || url.includes('css')) return 'html'; if (url.includes('cpp') || url.includes('c++') || url.includes('c-plus-plus')) return 'cpp'; if (url.includes('python') || url.includes('py-')) return 'python'; return 'html'; } var activePlaygroundLang = detectDefaultLang(); var templates = { html: `<!DOCTYPE html> <html> <head> <style> body { font-family: 'Segoe UI', sans-serif; padding: 20px; background: #f0fdf4; color: #166534; text-align: center; } h2 { color: #15803d; } .btn { background: #22c55e; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; } .btn:hover { background: #16a34a; } </style> </head> <body> <h2>Welcome to CBTportal HTML/CSS Editor</h2> <p>Edit this code live to see instant changes below!</p> <button class="btn" onclick="alert('Hello from CBTportal!')">Click Me</button> </body> </html>`, python: `def show_welcome(): print("Welcome to Python 3 (Pyodide CPython WASM)") show_welcome() show_welcome()`, cpp: `#include <iostream> #include <vector> #include <string> using namespace std; int main() { cout << "Hello from GCC C++20 (Piston API)!" << endl; vector<string> items = {"Vectors", "Pointers", "Classes", "STL"}; for (const auto& item : items) { cout << " -> Supported: " << item << endl; } return 0; }` }; function getEditorValue() { if (monacoEditorInstance) { return monacoEditorInstance.getValue(); } return editor ? editor.value : ''; } window.updateLayoutForCodeLength = function() { var code = getEditorValue(); var lines = code ? code.split('\n').length : 0; var len = code ? code.length : 0; var editorCol = document.getElementById('playground-editor-col'); var previewCol = document.getElementById('playground-preview-col'); var container = document.getElementById('monaco-editor-container'); if (!editorCol || !previewCol) return; var isLong = lines > 10 || len > 300; if (isLong) { editorCol.className = 'col-12 mb-3'; previewCol.className = 'col-12'; if (container) container.style.height = '340px'; } else { editorCol.className = 'col-md-6 border-right'; previewCol.className = 'col-md-6'; if (container) container.style.height = '280px'; } if (monacoEditorInstance) { setTimeout(function() { monacoEditorInstance.layout(); }, 50); } }; function setEditorValue(val, lang) { if (editor) editor.value = val; if (monacoEditorInstance) { monacoEditorInstance.setValue(val); if (lang) { var monacoLang = lang === 'cpp' ? 'cpp' : (lang === 'html' ? 'html' : 'python'); var model = monacoEditorInstance.getModel(); if (model && window.monaco) { window.monaco.editor.setModelLanguage(model, monacoLang); } } } updateLayoutForCodeLength(); } // Initialize Monaco Editor via AMD loader (Conflict-Free Lazy Load) function initMonacoEditorInstance() { if (typeof require !== 'undefined') { try { require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' } }); require(['vs/editor/editor.main'], function() { var container = document.getElementById('monaco-editor-container'); if (!container || monacoEditorInstance) return; var initLang = detectDefaultLang(); var initMonacoLang = initLang === 'cpp' ? 'cpp' : (initLang === 'html' ? 'html' : 'python'); monacoEditorInstance = monaco.editor.create(container, { value: templates[initLang] || templates.html, language: initMonacoLang, theme: 'vs-dark', automaticLayout: true, fontSize: 14, minimap: { enabled: false }, scrollBeyondLastLine: false, lineNumbers: 'on', tabSize: 4, padding: { top: 10, bottom: 10 } }); monacoEditorInstance.onDidChangeModelContent(function() { var val = monacoEditorInstance.getValue(); if (editor) editor.value = val; scanAndRenderInlineInputs(); updateLayoutForCodeLength(); runPlaygroundCode(); }); switchPlaygroundTab(initLang); updateLayoutForCodeLength(); }); } catch(e) {} } } if (typeof require === 'undefined' && typeof window.monaco === 'undefined') { var mScript = document.createElement('script'); mScript.src = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"; mScript.onload = initMonacoEditorInstance; document.head.appendChild(mScript); } else { initMonacoEditorInstance(); } window.switchPlaygroundTab = function(lang) { activePlaygroundLang = lang; var tabs = document.querySelectorAll('.tech-pg-tab-link'); tabs.forEach(function(t) { if (t.getAttribute('data-lang') === lang) { t.classList.add('active'); } else { t.classList.remove('active'); } }); var iframe = document.getElementById('playground-preview-iframe'); var consoleOut = document.getElementById('playground-console-output'); var previewHeader = document.getElementById('playground-preview-header'); setEditorValue(templates[lang] || templates.html, lang); if (lang === 'html') { iframe.style.display = 'block'; consoleOut.style.display = 'none'; previewHeader.textContent = '👀 Live Preview'; runHTML(); } else { iframe.style.display = 'none'; consoleOut.style.display = 'block'; previewHeader.textContent = '📟 Console Output'; consoleOut.textContent = 'Console ready. Type code to execute...'; scanAndRenderInlineInputs(); runPlaygroundCode(); } }; var debounceTimer = null; window.runPlaygroundCode = function() { if (debounceTimer) clearTimeout(debounceTimer); debounceTimer = setTimeout(function() { var mode = activePlaygroundLang; if (mode === 'html') { runHTML(); } else if (mode === 'python') { runPython(); } else if (mode === 'cpp') { runCpp(); } else if (mode === 'c') { runC(); } else if (mode === 'php') { runPhp(); } else if (mode === 'js') { runJs(); } }, 150); }; function adjustIframeHeight() { var iframe = document.getElementById('playground-preview-iframe'); if (!iframe) return; try { var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; if (iframeDoc && iframeDoc.body) { iframeDoc.body.style.overflow = 'hidden'; var contentHeight = Math.max( iframeDoc.body.scrollHeight, iframeDoc.documentElement.scrollHeight, iframeDoc.body.offsetHeight, 140 ); iframe.style.height = contentHeight + 'px'; iframe.style.minHeight = contentHeight + 'px'; } } catch(e) {} } function runHTML() { var code = getEditorValue(); var iframe = document.getElementById('playground-preview-iframe'); if (!iframe) return; var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write(code); iframeDoc.close(); setTimeout(adjustIframeHeight, 30); setTimeout(adjustIframeHeight, 150); } // Pyodide CPython WASM Engine Loader (Lazy-loaded on demand to prevent memory/network spikes during rapid navigation) function getPyodideInstance() { if (window.pyodideInstance) return Promise.resolve(window.pyodideInstance); if (pyodideInstance) return Promise.resolve(pyodideInstance); if (pyodideLoadingPromise) return pyodideLoadingPromise; pyodideLoadingPromise = new Promise(function(resolve, reject) { function initializeEngine() { if (typeof loadPyodide === 'function') { loadPyodide({ indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.25.0/full/' }) .then(function(py) { pyodideInstance = py; window.pyodideInstance = py; resolve(py); }) .catch(reject); } else { reject(new Error("loadPyodide library unavailable")); } } if (typeof loadPyodide === 'function') { initializeEngine(); } else { var existingScript = document.querySelector('script[src*="pyodide.js"]'); if (!existingScript) { var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js'; script.async = true; script.onload = initializeEngine; script.onerror = reject; document.head.appendChild(script); } else { var attempts = 0; var interval = setInterval(function() { attempts++; if (typeof loadPyodide === 'function') { clearInterval(interval); initializeEngine(); } else if (attempts > 100) { clearInterval(interval); reject(new Error("Timeout loading Pyodide script")); } }, 50); } } }); return pyodideLoadingPromise; } async function runPython() { var code = getEditorValue(); var consoleOut = document.getElementById('playground-console-output'); if (!consoleOut) return; if (!code.trim()) { consoleOut.textContent = 'Console ready. Type Python code to execute...'; return; } consoleOut.textContent = '⚡ Loading Real Python 3 (Pyodide WASM Engine)...'; consoleOut.style.color = '#0f172a'; try { var py = await getPyodideInstance(); // Collect inline practice inputs var inputValsArr = []; var container = document.getElementById('tech-inline-input-fields-container'); if (container) { var inputs = container.querySelectorAll('.tech-inline-input-box'); inputs.forEach(function(inp) { inputValsArr.push(inp.value.trim() !== '' ? inp.value.trim() : 'Meera'); }); } var inputsJSON = JSON.stringify(inputValsArr); await py.runPythonAsync(` import sys, io, json _out_buffer = io.StringIO() sys.stdout = _out_buffer sys.stderr = _out_buffer _input_idx = 0 _user_inputs = json.loads('''${inputsJSON}''') def input(prompt=""): global _input_idx if _user_inputs and _input_idx < len(_user_inputs): val = str(_user_inputs[_input_idx]) _input_idx += 1 return val return "Meera" `); await py.runPythonAsync(code); var resText = await py.runPythonAsync(` sys.stdout = sys.__stdout__ sys.stderr = sys.__stderr__ _out_buffer.getvalue() `); consoleOut.textContent = resText.trim() || 'Python program executed cleanly with no printed output.'; consoleOut.style.color = '#0f172a'; } catch(err) { try { var pInst = window.pyodideInstance || pyodideInstance; if (pInst) { await pInst.runPythonAsync(` import sys sys.stdout = sys.__stdout__ sys.stderr = sys.__stderr__ `); } } catch(_) {} var errStr = err.toString().replace(/^PythonError: Traceback $most recent call last$:\n/, '').replace(/File "<exec>", line /g, 'line '); consoleOut.textContent = errStr; consoleOut.style.color = '#dc2626'; } } async function runWandboxCompiler(compiler, code, langName) { var consoleOut = document.getElementById('playground-console-output'); if (!consoleOut) return; if (!code.trim()) { consoleOut.textContent = 'Console ready. Type ' + langName + ' code to execute...'; return; } consoleOut.textContent = '⚡ Compiling & Executing ' + langName + '...\n'; consoleOut.style.color = '#0f172a'; try { var response = await fetch("https://wandbox.org/api/compile.json", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ compiler: compiler, code: code }) }); var data = await response.json(); var outputText = data.program_output || data.compiler_error || data.compiler_message || (langName + " program executed cleanly."); consoleOut.textContent = outputText; if (data.compiler_error || data.status !== "0") { consoleOut.style.color = (data.program_output && !data.compiler_error) ? '#0f172a' : '#dc2626'; } else { consoleOut.style.color = '#0f172a'; } } catch(err) { consoleOut.textContent = "Execution Error: " + err.message; consoleOut.style.color = '#dc2626'; } } async function runCpp() { var code = getEditorValue(); await runWandboxCompiler("gcc-head", code, "C++"); } async function runC() { var code = getEditorValue(); await runWandboxCompiler("gcc-head-c", code, "C"); } async function runPhp() { var code = getEditorValue(); await runWandboxCompiler("php-8.3.12", code, "PHP"); } function runJs() { var code = getEditorValue(); var consoleOut = document.getElementById('playground-console-output'); if (!consoleOut) return; if (!code.trim()) { consoleOut.textContent = 'Console ready. Type JavaScript code to execute...'; return; } var logs = []; var customConsole = { log: function() { var args = Array.prototype.slice.call(arguments); logs.push(args.map(function(a) { return typeof a === 'object' ? JSON.stringify(a) : String(a); }).join(' ')); }, error: function() { var args = Array.prototype.slice.call(arguments); logs.push("ERROR: " + args.map(function(a) { return typeof a === 'object' ? JSON.stringify(a) : String(a); }).join(' ')); }, warn: function() { var args = Array.prototype.slice.call(arguments); logs.push("WARN: " + args.map(function(a) { return typeof a === 'object' ? JSON.stringify(a) : String(a); }).join(' ')); }, info: function() { var args = Array.prototype.slice.call(arguments); logs.push("INFO: " + args.map(function(a) { return typeof a === 'object' ? JSON.stringify(a) : String(a); }).join(' ')); } }; try { var runFn = new Function('console', code); var res = runFn(customConsole); if (res !== undefined) logs.push("Return Value: " + String(res)); consoleOut.textContent = logs.join('\n') || "JavaScript executed cleanly with no printed output."; consoleOut.style.color = '#0f172a'; } catch(err) { consoleOut.textContent = "JavaScript Error: " + err.message; consoleOut.style.color = '#dc2626'; } } function updateInlineInputStatus(inputElem, labelElem) { if (!inputElem || !inputElem.value || inputElem.value.trim() === '') { if (inputElem) inputElem.className = 'tech-inline-input-box empty'; if (labelElem) labelElem.className = 'tech-inline-label empty'; } else { if (inputElem) inputElem.className = 'tech-inline-input-box filled'; if (labelElem) labelElem.className = 'tech-inline-label filled'; } } function scanAndRenderInlineInputs() { var code = getEditorValue(); var bar = document.getElementById('tech-inline-inputs-bar'); var container = document.getElementById('tech-inline-input-fields-container'); if (!bar || !container) return; if (activePlaygroundLang !== 'python') { bar.style.display = 'none'; return; } var matches = code.match(/input\s*$\s*(["'])(.*?)\1\s*$/g) || []; if (matches.length === 0) { bar.style.display = 'none'; return; } bar.style.display = 'flex'; container.innerHTML = ''; matches.forEach(function(m, idx) { var pMatch = m.match(/input\s*$\s*(["'])(.*?)\1\s*$/); var promptText = (pMatch && pMatch[2]) ? pMatch[2] : ("Input " + (idx + 1) + ":"); var defaultVal = "Meera"; if (promptText.toLowerCase().includes("age")) defaultVal = "20"; else if (promptText.toLowerCase().includes("num")) defaultVal = "10"; var fieldGroup = document.createElement('div'); fieldGroup.className = 'tech-inline-field-group'; var label = document.createElement('label'); label.className = 'tech-inline-label filled'; label.textContent = promptText; var input = document.createElement('input'); input.type = 'text'; input.className = 'tech-inline-input-box filled'; input.dataset.prompt = promptText; input.value = defaultVal; input.oninput = function() { updateInlineInputStatus(input, label); runPlaygroundCode(); }; fieldGroup.appendChild(label); fieldGroup.appendChild(input); container.appendChild(fieldGroup); updateInlineInputStatus(input, label); }); } window.runSnippetInPlayground = function(snippetText, lang, targetBlock) { var defaultLang = detectDefaultLang(); var targetLang = lang || defaultLang; if (!snippetText) return; if (snippetText.includes('#include') || snippetText.includes('std::cout') || snippetText.includes('using namespace std')) { targetLang = 'cpp'; } else if (snippetText.includes('<html') || snippetText.includes('<div') || snippetText.includes('<!DOCTYPE') || snippetText.includes('<p') || snippetText.includes('<h') || snippetText.includes('<style') || snippetText.includes('</') || snippetText.includes('class=')) { targetLang = 'html'; } switchPlaygroundTab(targetLang); setEditorValue(snippetText, targetLang); scanAndRenderInlineInputs(); runPlaygroundCode(); var pgBox = document.getElementById('tech-playground-box'); if (pgBox && targetBlock) { targetBlock.parentNode.insertBefore(pgBox, targetBlock.nextSibling); pgBox.style.display = 'block'; setTimeout(function() { pgBox.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 50); } }; window.closeInPlacePlayground = function() { var pgBox = document.getElementById('tech-playground-box'); var defaultPlace = document.getElementById('default-playground-placeholder'); if (pgBox && defaultPlace) { defaultPlace.parentNode.insertBefore(pgBox, defaultPlace.nextSibling); } }; // Auto-attach SINGLE ▶️ Run Code button to code blocks document.addEventListener('DOMContentLoaded', function() { var codeContainers = document.querySelectorAll('.py-code-example'); codeContainers.forEach(function(block) { if (block.querySelector('.py-code-run-btn')) return; var targetCodeNode = block.querySelector('code') || block.querySelector('pre'); if (!targetCodeNode) return; var clone = targetCodeNode.cloneNode(true); clone.querySelectorAll('.py-code-label, .py-code-run-btn, .py-output, .py-explanation, style, script').forEach(function(el) { el.remove(); }); var codeText = (clone.innerText || clone.textContent || '') .replace(/\u00A0/g, " ") .replace(/\r\n/g, "\n") .replace(/\r/g, "\n") .trim(); if (!codeText) return; var label = block.querySelector('.py-code-label'); var runBtn = document.createElement('button'); runBtn.className = 'py-code-run-btn'; runBtn.type = 'button'; runBtn.innerHTML = '▶️ Run Code / तुरंत चलाकर देखें'; runBtn.onclick = function(e) { e.preventDefault(); e.stopPropagation(); runSnippetInPlayground(codeText, null, block); }; if (label) { label.style.display = 'flex'; label.style.justifyContent = 'space-between'; label.style.alignItems = 'center'; label.style.width = '100%'; label.appendChild(runBtn); } else { var newLabel = document.createElement('div'); newLabel.className = 'py-code-label'; newLabel.style.display = 'flex'; newLabel.style.justifyContent = 'space-between'; newLabel.style.alignItems = 'center'; newLabel.style.width = '100%'; newLabel.innerHTML = '<span>CODE EXAMPLE</span>'; newLabel.appendChild(runBtn); block.insertBefore(newLabel, block.firstChild); } }); }); })(); </script>  <div class="tech-nav-box"> <a href="https://onlinecbt.in/technology/html/html-div-and-span" class="tech-nav-btn tech-nav-btn-prev"> <i class="fa fa-arrow-left"></i> HTML Div and Span </a> <a href="https://onlinecbt.in/technology/html/open-graph-and-social-sharing" class="tech-nav-btn tech-nav-btn-next"> Open Graph and Social Sharing <i class="fa fa-arrow-right"></i> </a> </div> </div> </div> </div> </div> </div> <script> var lessonLangData = { title_en: "HTML Meta Tags for SEO", title_hi: "", desc_en: "Improve search engine rankings and indexing using meta description, keywords, robots, and canonical tags.", desc_hi: "", content_en: "<h2>1. What are HTML Meta Tags?<\/h2>\n<p>Meta tags live inside the <code><head><\/code> element and provide machine-readable metadata about the webpage to search engines (Google, Bing) and social media crawlers. They are invisible to users reading the rendered page.<\/p>\n\n<h2>2. Essential SEO Meta Tags<\/h2>\n<pre><code class=\"language-html\"><head>\n \n <meta charset=\"UTF-8\" \/>\n\n \n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n\n \n <title>Online CBT Test Series | Free Mock Tests & Practice Questions<\/title>\n\n \n <meta name=\"description\" content=\"Prepare for NEET, JEE, SSC, and Banking exams with Online CBT portal. Take simulated online mock tests, analyze rank percentiles, and practice chapter questions.\" \/>\n\n \n <meta name=\"robots\" content=\"index, follow\" \/>\n\n \n <link rel=\"canonical\" href=\"https:\/\/onlinecbt.in\/test-series\" \/>\n<\/head>\n<\/code><\/pre>\n\n<h2>3. Best Practices for SEO Meta Data<\/h2>\n<ul>\n <li>Keep <code><title><\/code> between 50 and 60 characters to avoid truncation in Google search results.<\/li>\n <li>Keep <code>meta name=\"description\"<\/code> between 140 and 160 characters. Make it an actionable summary.<\/li>\n <li>Ensure every single page on your site has a distinct, unique title and description.<\/li>\n<\/ul>", content_hi: "" }; var currentLessonLang = 'en'; function toggleLessonLanguage() { var newLang = (currentLessonLang === 'hi') ? 'en' : 'hi'; setLessonLanguage(newLang); } function setLessonLanguage(lang) { currentLessonLang = lang; var titleElem = document.getElementById('lesson-hero-title'); var descElem = document.getElementById('lesson-hero-desc'); var contentElem = document.getElementById('lesson-content-body'); var toggleBtn = document.getElementById('btn-lang-toggle'); if (lang === 'hi') { if (toggleBtn) toggleBtn.innerHTML = 'English'; if (titleElem) titleElem.innerText = lessonLangData.title_hi || ('[हिन्दी] ' + lessonLangData.title_en); if (descElem) { var d = lessonLangData.desc_hi || lessonLangData.desc_en; descElem.innerText = d; descElem.style.display = d ? 'block' : 'none'; } if (contentElem) { if (lessonLangData.content_hi && lessonLangData.content_hi.trim() !== '') { contentElem.innerHTML = lessonLangData.content_hi; } else { contentElem.innerHTML = '<div style="background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 15px;">ℹ️ इस पाठ के लिए अभी हिन्दी सामग्री दर्ज नहीं की गई है (नीचे अंग्रेजी विवरण प्रदर्शित है)।</div>' + lessonLangData.content_en; } } } else { if (toggleBtn) toggleBtn.innerHTML = 'हिंदी'; if (titleElem) titleElem.innerText = lessonLangData.title_en; if (descElem) { descElem.innerText = lessonLangData.desc_en; descElem.style.display = lessonLangData.desc_en ? 'block' : 'none'; } if (contentElem) contentElem.innerHTML = lessonLangData.content_en; } try { localStorage.setItem('cbt_tech_lesson_lang', lang); } catch (e) {} } document.addEventListener('DOMContentLoaded', function() { var savedLang = 'en'; try { savedLang = localStorage.getItem('cbt_tech_lesson_lang') || 'en'; } catch (e) {} if (savedLang === 'hi') { setLessonLanguage('hi'); } initLessonReactions(); }); // Like / Dislike / Share Handlers with Real-Time Backend API Sync function getLessonReactionKey() { return 'cbt_reaction_' + window.location.pathname.replace(/[^a-zA-Z0-9]/g, '_'); } function initLessonReactions() { var key = getLessonReactionKey(); var savedReaction = localStorage.getItem(key); var likeBtn = document.getElementById('btn-lesson-like'); var dislikeBtn = document.getElementById('btn-lesson-dislike'); var likeCountEl = document.getElementById('count-lesson-like'); var dislikeCountEl = document.getElementById('count-lesson-dislike'); var shareCountEl = document.getElementById('count-lesson-share'); if (!likeBtn || !dislikeBtn || !likeCountEl || !dislikeCountEl) return; if (savedReaction === 'like') { likeBtn.classList.add('active-like'); } else if (savedReaction === 'dislike') { dislikeBtn.classList.add('active-dislike'); } // Fetch real reaction counts from backend API fetch('https://onlinecbt.in/api/reaction/get?id=' + encodeURIComponent(key)) .then(function(r) { return r.json(); }) .then(function(data) { if (data && data.success) { likeCountEl.textContent = data.likes || 0; dislikeCountEl.textContent = data.dislikes || 0; if (shareCountEl) shareCountEl.textContent = data.shares || 0; } }) .catch(function() {}); } window.toggleLessonLike = function() { var key = getLessonReactionKey(); var savedReaction = localStorage.getItem(key); var likeCountEl = document.getElementById('count-lesson-like'); var dislikeCountEl = document.getElementById('count-lesson-dislike'); var shareCountEl = document.getElementById('count-lesson-share'); var likeBtn = document.getElementById('btn-lesson-like'); var dislikeBtn = document.getElementById('btn-lesson-dislike'); var type = 'like'; var prev = savedReaction; if (savedReaction === 'like') { type = 'undo_like'; localStorage.removeItem(key); likeBtn.classList.remove('active-like'); } else { if (savedReaction === 'dislike') { dislikeBtn.classList.remove('active-dislike'); } localStorage.setItem(key, 'like'); likeBtn.classList.add('active-like'); } fetch('https://onlinecbt.in/api/reaction/toggle', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: key, type: type, prev: prev }) }) .then(function(r) { return r.json(); }) .then(function(data) { if (data && data.success) { likeCountEl.textContent = data.likes || 0; dislikeCountEl.textContent = data.dislikes || 0; if (shareCountEl) shareCountEl.textContent = data.shares || 0; } }) .catch(function() {}); }; window.toggleLessonDislike = function() { var key = getLessonReactionKey(); var savedReaction = localStorage.getItem(key); var likeCountEl = document.getElementById('count-lesson-like'); var dislikeCountEl = document.getElementById('count-lesson-dislike'); var shareCountEl = document.getElementById('count-lesson-share'); var likeBtn = document.getElementById('btn-lesson-like'); var dislikeBtn = document.getElementById('btn-lesson-dislike'); var type = 'dislike'; var prev = savedReaction; if (savedReaction === 'dislike') { type = 'undo_dislike'; localStorage.removeItem(key); dislikeBtn.classList.remove('active-dislike'); } else { if (savedReaction === 'like') { likeBtn.classList.remove('active-like'); } localStorage.setItem(key, 'dislike'); dislikeBtn.classList.add('active-dislike'); } fetch('https://onlinecbt.in/api/reaction/toggle', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: key, type: type, prev: prev }) }) .then(function(r) { return r.json(); }) .then(function(data) { if (data && data.success) { likeCountEl.textContent = data.likes || 0; dislikeCountEl.textContent = data.dislikes || 0; if (shareCountEl) shareCountEl.textContent = data.shares || 0; } }) .catch(function() {}); }; window.shareCurrentLesson = function() { var key = getLessonReactionKey(); var shareCountEl = document.getElementById('count-lesson-share'); var shareData = { title: document.title || 'OnlineCBT Technology Lesson', text: 'Check out this lesson on OnlineCBT Learning Platform:', url: window.location.href }; fetch('https://onlinecbt.in/api/reaction/toggle', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: key, type: 'share' }) }) .then(function(r) { return r.json(); }) .then(function(data) { if (data && data.success && shareCountEl) { shareCountEl.textContent = data.shares || 0; } }) .catch(function() {}); if (navigator.share) { navigator.share(shareData).catch(function() {}); } else { navigator.clipboard.writeText(window.location.href).catch(function() {}); } }; </script> </body> </html> <style> .whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 50px; /* how high above the footer you want it */ right: 20px; /* stick to the right side */ background-color: #25d366; border-radius: 50%; text-align: center; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); z-index: 999999; /* keeps it above all other elements */ display: flex; justify-content: center; align-items: center; } .whatsapp-float img { width: 35px; height: 35px; } .whatsapp-float:hover { transform: scale(1.1); transition: 0.3s; } </style>  <section id="footerSection" class="mt-3"> <div class="container-fluid"> <div class="container"> <div class="row mt-5 pb-5"> <div class="col-lg-2"> <div class="row mb-3"> <div class="col-lg-3" style="padding-right: 0px !important"> <a href="https://onlinecbt.in"> <img src="https://onlinecbt.in/assets/images/Ekta.png" class="img-fluid footer-logo" style="width:60px" alt="Footer Logo"> </a> </div> <div class="col-lg-9" style="margin: auto;"> <h5 class="footer-heading" style="margin-bottom: 0px !important;"> ऑनलाइन कंप्यूटर आधारित परीक्षा</h5>  </div> </div> <div class="row"> <div class="col-lg-12"> <p class="footer-paragraph pr-5">हमारा मिशन है – "विद्यार्थियों को शिक्षित करना और उन्हें प्रतिस्पर्धी परीक्षाओं की तैयारी में उनकी पूर्ण क्षमता के साथ उत्कृष्टता प्राप्त करने में सहायता करना। साथ ही उनमें अच्छे संस्कारों का संचार करना और उनके व्यक्तित्व का विकास करना।"</p> </div> </div> <div class="row pl-2"> <div class="footer-icon social-icon-wrapper social-facebook"> <a href="https://www.facebook.com/OnlineCBTexam/" target="_blank" rel="noopener noreferrer" aria-label="Follow us on Facebook"><i class="fa fa-facebook px-2 py-2 text-center" style="font-size:26px;color:#fff;width: 40px;"></i></a> </div> <div class="footer-icon social-icon-wrapper social-instagram"> <a href="https://www.instagram.com/onlinecbt.in/" target="_blank" rel="noopener noreferrer" aria-label="Follow us on Instagram"><i class="fa fa-instagram px-2 py-2" style="font-size:26px;color:#fff"></i></a> </div> <div class="footer-icon social-icon-wrapper social-youtube"> <a href="https://www.youtube.com/@OnlineCBT" target="_blank" rel="noopener noreferrer" aria-label="Subscribe on YouTube"><i class="fa fa-youtube-play px-2 py-2" style="font-size:26px;color:#fff"></i></a> </div> <div class="footer-icon social-icon-wrapper social-twitter"> <a href="https://x.com/OnlineCBT_" target="_blank" rel="noopener noreferrer" aria-label="Follow us on X (Twitter)"><i class="fa fa-twitter px-2 py-2" style="font-size:26px;color:#fff"></i></a> </div> </div>  </div> <div class="col-lg-2"> <h5 class="footer-heading">उपयोगी लिंक</h5> <ul class="footer-ul"> <li><a href="https://onlinecbt.in/home" class="footer-link">होम</a></li> <li><a href="https://onlinecbt.in/about" class="footer-link">हमारे बारे में</a></li> <li><a href="https://onlinecbt.in/contact" class="footer-link">संपर्क करें</a></li> <li><a href="https://onlinecbt.in/follow" class="footer-link">हमसे जुड़ें</a></li> </ul> </div> <div class="col-lg-2"> <h5 class="footer-heading">महत्वपूर्ण पेज</h5> <ul class="footer-ul"> <li><a href="https://onlinecbt.in/typing-tests" class="footer-link">टाइपिंग टेस्ट</a></li> <li><a href="https://onlinecbt.in/current-affairs" class="footer-link">करेंट अफेयर्स</a></li> <li><a href="https://onlinecbt.in/study-materials" class="footer-link">अध्ययन सामग्री</a></li> </ul> </div> <div class="col-lg-2"> <h5 class="footer-heading">कोर्सेज और अभ्यास</h5> <ul class="footer-ul"> <li><a href="https://onlinecbt.in/test-series" class="footer-link">टेस्ट सीरीज</a></li> <li><a href="https://onlinecbt.in/attempt-test" class="footer-link">परीक्षा प्रयास करें</a></li> <li><a href="https://onlinecbt.in/latest-exam-news" class="footer-link">परीक्षा समाचार</a></li> <li><a href="https://onlinecbt.in/refer-and-earn" class="footer-link">रेफर करें और कमाएं</a></li> </ul> </div> <div class="col-lg-2 contact-us-remove-mobile-device"> <h5 class="footer-heading">संपर्क करें</h5> <span><b>पता</b></span> <p class="footer-paragraph pr-3">प्लॉट नं. 10, धोलीगुमटी, पंडितपुरा रोड, बंदीकुई, दौसा (राजस्थान) – 303313</p> <span><b>संपर्क करें</b></span> <b> <p class="theme-color1">+91 7877547686</p> </b> <span><b>ई-मेल</b></span> <b> <p class="theme-color1">onlinecbtportal@gmail.com</p> </b> <span><b>हेल्पलाइन नंबर</b></span> <b> <p class="theme-color1">+91 7877547686</p> </b> </div> <div class="col-lg-2" style="padding-left: 15px;"> <h5 class="footer-heading">साझा करें</h5>  <hr /> <div class="qr-code"> <span><b>डाउनलोड करने के लिए क्लिक करें</b></span><br /> <div class="mt-2"> <a href="https://play.google.com/store/apps/details?id=com.ekta.cbtApp" target="_blank" rel="noopener noreferrer"> <img src="https://onlinecbt.in/assets/images/pngwing.png" alt="Get it on Google Play" width="135" height="40" style="height:40px; width:auto;" loading="lazy" /> </a> <p class="segoe-bold pt-2" style="font-size: 12px;">ऐप डाउनलोड करने <br />के लिए Google Play पर<br /> उपलब्ध है</p> </div> </div> </div> </div> </div> </div> <div class="footer-copyright-bar"> <div class="container footer-copyright-inner"> <div class="footer-bottom-links"> <a href="https://onlinecbt.in/terms-and-conditions">उपयोग की शर्तें</a> <span class="hp-link-sep">|</span> <a href="https://onlinecbt.in/privacy-policy">गोपनीयता नीति</a> <span class="hp-link-sep">|</span> <a href="https://onlinecbt.in/cookie-policy">कुकी नीति</a> <span class="hp-link-sep">|</span> <a href="https://onlinecbt.in/disclaimer">अस्वीकरण</a> <span class="hp-link-sep">|</span> <a href="https://onlinecbt.in/editorial-policy">संपादकीय नीति</a> <span class="hp-link-sep">|</span> <a href="https://onlinecbt.in/fact-check-policy">तथ्य जांच</a> <span class="hp-link-sep">|</span> <a href="https://onlinecbt.in/correction-policy">सुधार</a> <span class="hp-link-sep">|</span> <a href="https://onlinecbt.in/dmca">DMCA</a> <span class="hp-link-sep">|</span> <a href="https://adssettings.google.com/" target="_blank" rel="noopener noreferrer">विज्ञापन विकल्प</a> </div> <p class="footer-copyright-text"><b>Copyright</b> © 2026 - OnlineCBT.in. All Rights Reserved.</p> </div>  <div class="modal fade" id="feedbackmodal" tabindex="-1" role="dialog" aria-labelledby="feedbackmodallabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header theme-bg-color1"> <h5 class="modal-title text-white center-modal-header">Enter Your Feedback</h5> <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form method="post" id="feedbackForm" action="https://onlinecbt.in/insertFeedback"> <div class="modal-body"> <div class="form-group"> <label for="sel1">Select Subject:</label> <select class="form-control" id="sel1" name="review"> <option value="">Select Subject</option> <option value="Review"> Review</option> <option value="App issue">Web Issue</option> <option value="Payment issue">Payment Issue</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label for="comment" class="" style="color: black;">Comment:</label> <textarea class="form-control" placeholder="Write Message..." rows="5" id="comment" name="comment"></textarea> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary text-white theme-bg-color1 segoe-semibold">Submit</button> </div> </form> </div> </div> </div>  </section>  <div class="modal fade" id="loginSuggest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Alert</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Please Login or SignUp to access full test attempts and save your progress. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <a href="https://onlinecbt.in/cbt-webportal/login"><button type="button" class="btn btn-primary">Login/SignUp</button></a> </div> </div> </div> </div>  <script src="https://onlinecbt.in/assets/js/jquery.validate.min.js" defer></script> <script src="https://onlinecbt.in/assets/js/bootstrap.bundle.min.js" defer></script> <script src="https://onlinecbt.in/assets/owlcarousel/owl.carousel.js" defer></script> <script type="text/javascript"> if (window.jQuery && $.fn && $.fn.carousel && $('#blogCarousel').length > 0) { $('#blogCarousel').carousel({ interval: 5000 }); } /*this code use of student review owl-carousel start here*/ $(document).ready(function() { function hideLoader() { $("#spinner").addClass("d-none"); } function showLoader() { $("#spinner").removeClass("d-none"); } var owl = $('.owl-carousel'); owl.owlCarousel({ margin: 10, nav: true, loop: true, responsive: { 0: { items: 1 }, 600: { items: 3 }, } }); $('#feedbackForm').validate({ // initialize the plugin rules: { review: { required: true, }, comment: { required: true, } }, messages: { review: { required: 'Please Select Option' }, comment: { required: 'Enter Your Feedback' } } }); }); /*end code of student review owl-carousel*/ </script>  <a href="https://wa.me/917877547686" class="whatsapp-float" target="_blank" rel="noopener noreferrer" title="Chat with us on WhatsApp" aria-label="Chat with us on WhatsApp"> <img src="https://onlinecbt.in/assets/images/whatsapp-icon.png" alt="WhatsApp Chat" width="35" height="35" loading="lazy"> </a> </body> </html>

HTML Tutorial

HTML Meta Tags for SEO

1. What are HTML Meta Tags?

2. Essential SEO Meta Tags

3. Best Practices for SEO Meta Data