Home / Meta Tags Generator
Generate complete, optimized meta tags for SEO, Open Graph, and Twitter Cards — with a live preview. Copy and paste into your HTML head.
Basic tags
OG tags
Twitter tags
Quick templates
Blog article E-commerce product Local business
menu_book
How to Use Meta Tags Generator To generate meta tags, fill in the fields for your page title, description, target keyword, page URL, and author. The tool also includes Open Graph fields for social sharing previews on Facebook and Twitter Card fields for Twitter. As you type, the generated HTML code updates in real time in the output panel.
Copy the generated meta tag code and paste it inside the head section of your HTML page. Using preset templates for common page types (homepage, article, product) gives you a starting structure to customise. Correctly configured meta tags help search engines and social platforms display your pages accurately.
help
Frequently Asked Questions
What are meta tags?
expand_more
Meta tags are HTML elements placed in a page's head section that provide metadata about the page to search engines and browsers. The most important for SEO are the title tag and meta description.
Do meta keywords still matter for SEO?
expand_more
Meta keywords are largely ignored by major search engines including Google, which stopped using them as a ranking signal around 2009. However, some smaller search engines may still read them.
What are Open Graph meta tags?
expand_more
Open Graph tags (og:title, og:description, og:image, etc.) control how your page appears when shared on Facebook, LinkedIn, and other social platforms. Without them, social platforms choose their own titles and images.
What is a Twitter Card?
expand_more
Twitter Cards are meta tags that control how links appear when shared on Twitter/X. They define the card type (summary, summary_large_image, app, player) and the title, description, and image shown in the tweet preview.
Where exactly should meta tags be placed in HTML?
expand_more
Meta tags must be placed inside the <head> section of your HTML document, before the closing </head> tag. The title tag, description, and all og: and twitter: tags all go in the head.
A meta tags generator creates the HTML markup for a complete set of SEO and social sharing meta tags — including `
`, `<meta name="description">`, Open Graph (`og:title`, `og:image`, etc.), and Twitter Card tags — from simple form inputs. Correctly implemented meta tags improve search snippet quality and social media share appearance. Butter Tools outputs ready-to-paste HTML.</p> </aside> <section class="mt-12 border-t border-outline-variant pt-10"><div class="flex items-center justify-between mb-5"><h2 class="text-[18px] font-semibold text-on-surface" data-i18n="related.title">Related Tools</h2><a href="/seo-tools" class="text-[13px] text-primary hover:underline flex items-center gap-1">
All SEO & Web<span class="material-symbols-outlined text-[16px]">arrow_forward</span></a></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"><a href="/keyword-density" class="tool-card bg-surface-container-lowest border rounded-lg p-4 flex gap-4 items-center group h-[92px] overflow-hidden border-outline-variant cursor-pointer"> <div class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 transition-colors group-hover:opacity-90" style="background-color: #E8322A18; color: #E8322A;"> <span class="material-symbols-outlined text-[24px]">manage_search</span> </div> <div class="min-w-0"> <h3 class="text-[14px] font-semibold leading-snug text-on-surface mb-1 group-hover:text-primary transition-colors truncate">Keyword Density Checker</h3> <p class="text-[12px] text-secondary leading-snug line-clamp-2">Analyze keyword frequency and density in any text. Catch over-optimization before publishing.</p> </div> </a><a href="/longtail-keywords" class="tool-card bg-surface-container-lowest border rounded-lg p-4 flex gap-4 items-center group h-[92px] overflow-hidden border-outline-variant cursor-pointer"> <div class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 transition-colors group-hover:opacity-90" style="background-color: #7C3AED18; color: #7C3AED;"> <span class="material-symbols-outlined text-[24px]">manage_search</span> </div> <div class="min-w-0"> <h3 class="text-[14px] font-semibold leading-snug text-on-surface mb-1 group-hover:text-primary transition-colors truncate">Long Tail Keyword Generator</h3> <p class="text-[12px] text-secondary leading-snug line-clamp-2">Generate hundreds of long tail keyword ideas from any seed keyword — questions, buyers, modifiers and more.</p> </div> </a><a href="/keyword-extractor" class="tool-card bg-surface-container-lowest border rounded-lg p-4 flex gap-4 items-center group h-[92px] overflow-hidden border-outline-variant cursor-pointer"> <div class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 transition-colors group-hover:opacity-90" style="background-color: #0EA5E918; color: #0EA5E9;"> <span class="material-symbols-outlined text-[24px]">bar_chart</span> </div> <div class="min-w-0"> <h3 class="text-[14px] font-semibold leading-snug text-on-surface mb-1 group-hover:text-primary transition-colors truncate">Keyword Extractor</h3> <p class="text-[12px] text-secondary leading-snug line-clamp-2">Extract the most important keywords and phrases from any text with frequency analysis and tag cloud.</p> </div> </a><a href="/keyword-combiner" class="tool-card bg-surface-container-lowest border rounded-lg p-4 flex gap-4 items-center group h-[92px] overflow-hidden border-outline-variant cursor-pointer"> <div class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 transition-colors group-hover:opacity-90" style="background-color: #F59E0B18; color: #F59E0B;"> <span class="material-symbols-outlined text-[24px]">bar_chart</span> </div> <div class="min-w-0"> <h3 class="text-[14px] font-semibold leading-snug text-on-surface mb-1 group-hover:text-primary transition-colors truncate">Keyword Combiner</h3> <p class="text-[12px] text-secondary leading-snug line-clamp-2">Combine multiple keyword lists (A × B × C) for PPC ad groups. Supports all match types.</p> </div> </a></div></section> </main> <footer class="bg-surface-container-lowest border-t border-outline-variant"> <div class="mx-auto max-w-6xl px-4 pt-10 pb-6 sm:px-6"> <!-- Top row: brand + categories --> <div class="flex flex-col sm:flex-row gap-8 mb-8 pb-8 border-b border-outline-variant"> <div class="flex-shrink-0"> <a href="/" class="flex items-center gap-2 mb-3"> <div class="w-7 h-7 overflow-hidden"> <img src="/logo.svg" alt="Butter Tools" class="w-full h-full object-contain"> </div> <span class="text-sm font-bold text-on-surface">Butter Tools</span> </a> <p class="text-xs text-secondary max-w-[200px] leading-relaxed" data-i18n="footer.tagline">80+ free browser-based utilities. No uploads. No sign-up. No cost.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 gap-x-8 gap-y-1 flex-1"> <div> <p class="text-[10px] font-bold text-secondary uppercase tracking-wider mb-2" data-i18n="footer.categories">Categories</p> <nav class="space-y-1.5"> <a href="/pdf-tools" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.pdf">PDF Tools</a> <a href="/text-tools" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.text">Text & Lists</a> <a href="/image-tools" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.image">Image Tools</a> </nav> </div> <div> <p class="text-[10px] font-bold text-secondary uppercase tracking-wider mb-2 sm:mt-0 mt-4" data-i18n="footer.tools">Tools</p> <nav class="space-y-1.5"> <a href="/developer-tools" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.dev">Developer Tools</a> <a href="/calculators" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.calc">Calculators</a> <a href="/seo-tools" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.seo">SEO & Web</a> </nav> </div> <div> <p class="text-[10px] font-bold text-secondary uppercase tracking-wider mb-2 sm:mt-0 mt-4" data-i18n="footer.more">More</p> <nav class="space-y-1.5"> <a href="/random-tools" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.random">Random Generators</a> <a href="/shipping-tools" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.shipping">Shipping Labels</a> <a href="/emojis" class="block text-xs text-secondary hover:text-on-surface transition" data-i18n="cat.emoji">Emoji Library</a> </nav> </div> </div> </div> <!-- Popular tools row --> <div class="mb-6 pb-6 border-b border-outline-variant"> <p class="text-[10px] font-bold text-secondary uppercase tracking-wider mb-3" data-i18n="footer.popular">Popular Tools</p> <nav class="flex flex-wrap gap-x-4 gap-y-1.5"> <a href="/word-counter" class="text-xs text-secondary hover:text-on-surface transition">Word Counter</a> <a href="/json-formatter" class="text-xs text-secondary hover:text-on-surface transition">JSON Formatter</a> <a href="/pdf-merge" class="text-xs text-secondary hover:text-on-surface transition">PDF Merge</a> <a href="/base64" class="text-xs text-secondary hover:text-on-surface transition">Base64</a> <a href="/regex-tester" class="text-xs text-secondary hover:text-on-surface transition">Regex Tester</a> <a href="/password-generator" class="text-xs text-secondary hover:text-on-surface transition">Password Generator</a> <a href="/color-converter" class="text-xs text-secondary hover:text-on-surface transition">Color Converter</a> <a href="/mortgage-calculator" class="text-xs text-secondary hover:text-on-surface transition">Mortgage Calculator</a> <a href="/shipping-label-resizer" class="text-xs text-secondary hover:text-on-surface transition">Label Resizer</a> <a href="/qr-code-generator" class="text-xs text-secondary hover:text-on-surface transition">QR Code Generator</a> </nav> </div> <!-- Bottom row: legal + meta --> <div class="flex flex-col sm:flex-row items-center justify-between gap-3"> <p class="text-xs text-secondary">© 2026 Butter Tools · HRS Tech LLC</p> <nav class="flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs text-secondary"> <a href="/about" class="hover:text-on-surface transition-colors" data-i18n="footer.about">About</a> <a href="/privacy" class="hover:text-on-surface transition-colors" data-i18n="footer.privacy">Privacy Policy</a> <a href="/terms" class="hover:text-on-surface transition-colors" data-i18n="footer.terms">Terms of Service</a> <button id="reopen-consent" class="hover:text-on-surface transition-colors" data-i18n="footer.cookie">Cookie Settings</button> </nav> </div> </div> </footer> <!-- ── Cookie Consent Banner ─────────────────────────────────────────── --> <div id="cookie-banner" class="hidden fixed bottom-0 left-0 right-0 z-[60] bg-white border-t border-outline-variant shadow-[0_-4px_24px_rgba(0,0,0,0.08)]" role="dialog" aria-label="Cookie consent" aria-modal="false"> <div class="max-w-6xl mx-auto px-4 py-4 sm:px-6"> <!-- Main row --> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4"> <div class="flex-1 min-w-0"> <p class="text-sm font-bold text-on-surface mb-0.5" data-i18n="cookie.title">We use cookies & tracking</p> <p class="text-xs text-secondary leading-relaxed" data-i18n="cookie.desc">
We use analytics (Google Analytics) and marketing (Meta Pixel) cookies to improve our tools and measure ad performance.
Your data is processed only with your consent.
</p> <a href="/privacy" class="text-xs text-secondary underline hover:text-on-surface transition-colors font-medium mt-0.5 inline-block" data-i18n="footer.privacy">Privacy Policy</a> </div> <div class="flex items-center gap-2 flex-shrink-0 flex-wrap"> <button id="cookie-customize" class="text-xs font-semibold text-secondary hover:text-on-surface underline underline-offset-2 transition-colors whitespace-nowrap px-1" data-i18n="cookie.customize">
Customize
</button> <button id="cookie-reject" class="inline-flex items-center justify-center gap-2 rounded-xl border border-outline-variant bg-surface-container-lowest px-4 py-2 text-xs font-semibold text-on-surface transition hover:border-outline hover:bg-surface-container whitespace-nowrap" data-i18n="cookie.reject">
Reject Non-Essential
</button> <button id="cookie-accept" class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary-container px-4 py-2 text-xs font-semibold text-on-primary-container shadow-sm transition hover:bg-primary-fixed whitespace-nowrap" data-i18n="cookie.accept">
Accept All
</button> </div> </div> <!-- Customize panel --> <div id="cookie-custom-panel" class="hidden mt-4 border-t border-outline-variant pt-4"> <p class="text-[11px] font-bold text-secondary uppercase tracking-wider mb-3" data-i18n="cookie.pref_title">Cookie Preferences</p> <div class="space-y-4 max-w-2xl"> <!-- Essential (always on) --> <div class="flex items-center justify-between gap-4"> <div> <p class="text-sm font-semibold text-on-surface" data-i18n="cookie.essential">Essential</p> <p class="text-xs text-secondary mt-0.5" data-i18n="cookie.essential.desc">Required for core functionality (accessibility preferences saved locally).</p> </div> <span class="flex-shrink-0 text-xs font-semibold text-secondary bg-surface-container px-2.5 py-1 rounded-lg" data-i18n="cookie.always_on">Always on</span> </div> <!-- Analytics --> <div class="flex items-center justify-between gap-4"> <div> <p class="text-sm font-semibold text-on-surface" data-i18n="cookie.analytics">Analytics — Google Analytics 4</p> <p class="text-xs text-secondary mt-0.5" data-i18n="cookie.analytics.desc">Helps us understand which tools people use most, so we can improve them.</p> </div> <button id="analytics-toggle" role="switch" aria-checked="false" class="flex-shrink-0 relative inline-flex h-6 w-11 items-center rounded-full bg-outline-variant transition-colors focus:outline-none focus:ring-2 focus:ring-primary-container focus:ring-offset-2"> <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform" id="analytics-thumb"></span> </button> </div> <!-- Marketing --> <div class="flex items-center justify-between gap-4"> <div> <p class="text-sm font-semibold text-on-surface" data-i18n="cookie.marketing">Marketing — Meta Pixel</p> <p class="text-xs text-secondary mt-0.5" data-i18n="cookie.marketing.desc">Enables personalised ads on Facebook/Instagram and conversion tracking.</p> </div> <button id="marketing-toggle" role="switch" aria-checked="false" class="flex-shrink-0 relative inline-flex h-6 w-11 items-center rounded-full bg-outline-variant transition-colors focus:outline-none focus:ring-2 focus:ring-primary-container focus:ring-offset-2"> <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform" id="marketing-thumb"></span> </button> </div> </div> <div class="flex items-center justify-between mt-5"> <p class="text-xs text-secondary" data-i18n="cookie.change_hint">You can change these preferences at any time from the footer.</p> <button id="cookie-save-prefs" class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary-container px-5 py-2 text-xs font-semibold text-on-primary-container shadow-sm transition hover:bg-primary-fixed" data-i18n="cookie.save">
Save Preferences
</button> </div> </div> </div> </div> <script>(function(){const GA_ID = "G-XXXXXXXXXX";
const META_PIXEL_ID = "XXXXXXXXXX";
(function () {
const CONSENT_KEY = 'bt_consent';
const banner = document.getElementById('cookie-banner');
const customPanel = document.getElementById('cookie-custom-panel');
function getConsent() {
try { return JSON.parse(localStorage.getItem(CONSENT_KEY) || 'null'); } catch { return null; }
}
function saveConsent(analytics, marketing) {
localStorage.setItem(CONSENT_KEY, JSON.stringify({ analytics, marketing, ts: Date.now() }));
}
function loadGA4() {
if (typeof window.gtag === 'function') return;
const s = document.createElement('script');
s.async = true;
s.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
document.head.appendChild(s);
window.dataLayer = window.dataLayer || [];
window.gtag = function () { window.dataLayer.push(arguments); };
window.gtag('js', new Date());
window.gtag('config', GA_ID, { anonymize_ip: true });
}
function loadPixel() {
if (typeof window.fbq === 'function') return;
/* eslint-disable */
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
/* eslint-enable */
window.fbq('init', META_PIXEL_ID);
window.fbq('track', 'PageView');
}
function applyConsent(consent) {
if (consent.analytics) loadGA4();
if (consent.marketing) loadPixel();
}
function hideBanner() {
banner.classList.add('hidden');
}
// On load: apply existing consent or show banner
const existing = getConsent();
if (existing) {
applyConsent(existing);
} else {
setTimeout(() => banner.classList.remove('hidden'), 1500);
}
// Accept all
document.getElementById('cookie-accept').addEventListener('click', () => {
saveConsent(true, true);
applyConsent({ analytics: true, marketing: true });
hideBanner();
});
// Reject non-essential
document.getElementById('cookie-reject').addEventListener('click', () => {
saveConsent(false, false);
hideBanner();
});
// Customize toggle
document.getElementById('cookie-customize').addEventListener('click', () => {
customPanel.classList.toggle('hidden');
});
// Toggle switch helper
function setupToggle(btnId, thumbId) {
const btn = document.getElementById(btnId);
const thumb = document.getElementById(thumbId);
let on = false;
btn.addEventListener('click', () => {
on = !on;
btn.setAttribute('aria-checked', String(on));
if (on) {
btn.classList.replace('bg-outline-variant', 'bg-primary-container');
thumb.style.transform = 'translateX(20px)';
} else {
btn.classList.replace('bg-primary-container', 'bg-outline-variant');
thumb.style.transform = '';
}
});
return { isOn: () => on };
}
const analyticsCtrl = setupToggle('analytics-toggle', 'analytics-thumb');
const marketingCtrl = setupToggle('marketing-toggle', 'marketing-thumb');
// Save preferences
document.getElementById('cookie-save-prefs').addEventListener('click', () => {
const analytics = analyticsCtrl.isOn();
const marketing = marketingCtrl.isOn();
saveConsent(analytics, marketing);
applyConsent({ analytics, marketing });
hideBanner();
});
})();
})();</script> <!-- ── Live Visitors social proof widget ────────────────────────────── --> <div id="lv-root" class="fixed bottom-28 left-4 z-40 w-72 pointer-events-none" aria-live="polite" aria-atomic="true"></div> <script type="module">(function(){const l=[{city:"New York",flag:"🇺🇸"},{city:"London",flag:"🇬🇧"},{city:"Toronto",flag:"🇨🇦"},{city:"Sydney",flag:"🇦🇺"},{city:"Berlin",flag:"🇩🇪"},{city:"Paris",flag:"🇫🇷"},{city:"Tokyo",flag:"🇯🇵"},{city:"Mumbai",flag:"🇮🇳"},{city:"São Paulo",flag:"🇧🇷"},{city:"Dubai",flag:"🇦🇪"},{city:"Singapore",flag:"🇸🇬"},{city:"Amsterdam",flag:"🇳🇱"},{city:"Lagos",flag:"🇳🇬"},{city:"Mexico City",flag:"🇲🇽"},{city:"Seoul",flag:"🇰🇷"},{city:"Stockholm",flag:"🇸🇪"},{city:"Cape Town",flag:"🇿🇦"},{city:"Istanbul",flag:"🇹🇷"},{city:"Jakarta",flag:"🇮🇩"},{city:"Bangkok",flag:"🇹🇭"},{city:"Madrid",flag:"🇪🇸"},{city:"Chicago",flag:"🇺🇸"},{city:"Los Angeles",flag:"🇺🇸"},{city:"Auckland",flag:"🇳🇿"}],c=["PDF Merge","Word Counter","Image Compressor","CSV to PDF","Color Palette Generator","QR Code Generator","Base64 Encoder","JSON Formatter","Password Generator","PDF Compress","Text Case Converter","UUID Generator","URL Encoder","Markdown Editor","PDF Split","Pixel Ruler","Favicon Generator","Meta Tags Analyzer","Emoji Copy & Paste","Hash Generator","Image to WebP","Aspect Ratio Calculator","VAT Calculator","Lorem Ipsum Generator","Diff Checker","PDF Rotate","Regex Tester","Unit Converter","Timezone Converter","Tip Calculator"],u=["is using","just used","is browsing"];function a(t){return t[Math.floor(Math.random()*t.length)]}function g(){const t=Math.floor(Math.random()*4)+1;return t===1?"just now":`${t} min ago`}const i=document.getElementById("lv-root");if(!i)return;let e=null;function n(){const t=a(l),d=a(c),s=a(u),r=s==="just used"?g():"",o=document.createElement("div");o.className=["pointer-events-auto flex items-center gap-3 bg-white border border-outline-variant","rounded-xl shadow-lg px-4 py-3 text-sm text-on-surface","translate-y-2 opacity-0 transition-all duration-500 ease-out"].join(" "),o.innerHTML=`
<span class="text-xl leading-none flex-shrink-0" aria-hidden="true">${t.flag}</span>
<div class="min-w-0">
<p class="font-medium truncate">${t.city}</p>
<p class="text-[12px] text-secondary truncate">${s} <span class="font-semibold text-on-surface">${d}</span>${r?" · "+r:""}</p>
</div>
`,i.appendChild(o),requestAnimationFrame(()=>{requestAnimationFrame(()=>{o.classList.remove("translate-y-2","opacity-0")})}),setTimeout(()=>{o.classList.add("opacity-0","translate-y-2"),setTimeout(()=>o.remove(),500)},4e3);const m=8e3+Math.random()*6e3;e=setTimeout(n,m)}e=setTimeout(n,3e3),document.addEventListener("visibilitychange",()=>{document.hidden?e&&(clearTimeout(e),e=null):e||(e=setTimeout(n,2e3))})})();</script> <!-- ── Floating Accessibility Widget ──────────────────────────────────── --> <!-- Outer div: fixed (viewport anchor). Inner div: relative (popover origin). --> <div class="fixed bottom-20 right-4 z-50"> <div class="relative"> <div id="a11y-popover" role="menu" aria-label="Color vision modes" class="hidden absolute bottom-full right-0 mb-2 w-64 bg-surface-container-lowest border border-outline-variant rounded-xl shadow-lg p-3"> <p class="text-[11px] font-bold text-secondary uppercase tracking-wider px-2 mb-2" data-i18n="a11y.mode.title">Color Vision Mode</p> <div class="space-y-0.5" id="cvd-options"> <button data-cvd="normal" role="menuitem" class="cvd-option w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left hover:bg-surface-container transition-colors"> <span class="material-symbols-outlined text-[18px] text-secondary flex-shrink-0">visibility</span> <div class="min-w-0"> <span class="block text-[13px] font-semibold text-on-surface leading-tight" data-i18n="a11y.normal">Normal Vision</span> <span class="block text-[11px] text-secondary" data-i18n="a11y.normal.desc">Default colours</span> </div> <span class="cvd-check material-symbols-outlined text-[16px] text-primary-container ml-auto hidden">check_circle</span> </button><button data-cvd="protanopia" role="menuitem" class="cvd-option w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left hover:bg-surface-container transition-colors"> <span class="material-symbols-outlined text-[18px] text-secondary flex-shrink-0">remove_red_eye</span> <div class="min-w-0"> <span class="block text-[13px] font-semibold text-on-surface leading-tight" data-i18n="a11y.protanopia">Protanopia</span> <span class="block text-[11px] text-secondary" data-i18n="a11y.protanopia.desc">Red-blind</span> </div> <span class="cvd-check material-symbols-outlined text-[16px] text-primary-container ml-auto hidden">check_circle</span> </button><button data-cvd="deuteranopia" role="menuitem" class="cvd-option w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left hover:bg-surface-container transition-colors"> <span class="material-symbols-outlined text-[18px] text-secondary flex-shrink-0">remove_red_eye</span> <div class="min-w-0"> <span class="block text-[13px] font-semibold text-on-surface leading-tight" data-i18n="a11y.deuteranopia">Deuteranopia</span> <span class="block text-[11px] text-secondary" data-i18n="a11y.deuteranopia.desc">Green-blind</span> </div> <span class="cvd-check material-symbols-outlined text-[16px] text-primary-container ml-auto hidden">check_circle</span> </button><button data-cvd="tritanopia" role="menuitem" class="cvd-option w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left hover:bg-surface-container transition-colors"> <span class="material-symbols-outlined text-[18px] text-secondary flex-shrink-0">remove_red_eye</span> <div class="min-w-0"> <span class="block text-[13px] font-semibold text-on-surface leading-tight" data-i18n="a11y.tritanopia">Tritanopia</span> <span class="block text-[11px] text-secondary" data-i18n="a11y.tritanopia.desc">Blue-blind</span> </div> <span class="cvd-check material-symbols-outlined text-[16px] text-primary-container ml-auto hidden">check_circle</span> </button><button data-cvd="achromatopsia" role="menuitem" class="cvd-option w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left hover:bg-surface-container transition-colors"> <span class="material-symbols-outlined text-[18px] text-secondary flex-shrink-0">contrast</span> <div class="min-w-0"> <span class="block text-[13px] font-semibold text-on-surface leading-tight" data-i18n="a11y.achromatopsia">Achromatopsia</span> <span class="block text-[11px] text-secondary" data-i18n="a11y.achromatopsia.desc">No colour (greyscale)</span> </div> <span class="cvd-check material-symbols-outlined text-[16px] text-primary-container ml-auto hidden">check_circle</span> </button><button data-cvd="high-contrast" role="menuitem" class="cvd-option w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left hover:bg-surface-container transition-colors"> <span class="material-symbols-outlined text-[18px] text-secondary flex-shrink-0">brightness_high</span> <div class="min-w-0"> <span class="block text-[13px] font-semibold text-on-surface leading-tight" data-i18n="a11y.high_contrast">High Contrast</span> <span class="block text-[11px] text-secondary" data-i18n="a11y.high_contrast.desc">Maximum contrast</span> </div> <span class="cvd-check material-symbols-outlined text-[16px] text-primary-container ml-auto hidden">check_circle</span> </button> </div> </div> <button id="a11y-btn" aria-label="Color Vision Accessibility" aria-expanded="false" aria-haspopup="true" title="Color Vision Accessibility" class="w-12 h-12 flex items-center justify-center bg-surface-container-lowest border border-outline-variant rounded-full shadow-md text-on-surface-variant hover:bg-surface-container hover:text-primary transition-all"> <span class="material-symbols-outlined text-[22px]">accessibility</span> </button> </div> </div> <!-- ── Back to Top ──────────────────────────────────────────────────────── --> <button id="back-to-top" aria-label="Back to top" class="fixed bottom-4 right-4 z-50 w-12 h-12 flex items-center justify-center bg-primary-container text-on-primary-container rounded-full shadow-md opacity-0 translate-y-2 transition-all duration-300 pointer-events-none"> <span class="material-symbols-outlined text-[22px]">arrow_upward</span> </button> <script type="module">const p={normal:"",protanopia:"url(#cvd-protanopia)",deuteranopia:"url(#cvd-deuteranopia)",tritanopia:"url(#cvd-tritanopia)",achromatopsia:"url(#cvd-achromatopsia)","high-contrast":""},n=document.documentElement,a=document.getElementById("a11y-btn"),c=document.getElementById("a11y-popover"),r=document.querySelectorAll(".cvd-option");function l(t){if(n.removeAttribute("data-cvd"),n.style.filter="",t!=="normal"){n.setAttribute("data-cvd",t);const e=p[t];e&&(n.style.filter=e)}r.forEach(e=>{const i=e.querySelector(".cvd-check");e.dataset.cvd===t?i?.classList.remove("hidden"):i?.classList.add("hidden")}),localStorage.setItem("cvd-mode",t)}l(localStorage.getItem("cvd-mode")||"normal");a?.addEventListener("click",t=>{t.stopPropagation();const e=c.classList.toggle("hidden");a.setAttribute("aria-expanded",String(!e))});document.addEventListener("click",()=>{c.classList.add("hidden"),a?.setAttribute("aria-expanded","false")});c.addEventListener("click",t=>t.stopPropagation());r.forEach(t=>{t.addEventListener("click",()=>{l(t.dataset.cvd||"normal"),c.classList.add("hidden"),a?.setAttribute("aria-expanded","false")})});const s=document.getElementById("back-to-top"),o=document.getElementById("main");function d(){Math.max(window.scrollY,o?o.scrollTop:0)>120?s?.classList.remove("opacity-0","translate-y-2","pointer-events-none"):s?.classList.add("opacity-0","translate-y-2","pointer-events-none")}window.addEventListener("scroll",d,{passive:!0});o&&o.addEventListener("scroll",d,{passive:!0});d();s?.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"}),o?.scrollTo({top:0,behavior:"smooth"})});document.getElementById("reopen-consent")?.addEventListener("click",()=>{const t=document.getElementById("cookie-banner");t?.classList.remove("hidden"),t?.scrollIntoView({behavior:"smooth",block:"end"})});</script> </body> </html> <script type="module">function e(t){return t.replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}function i(){const t=document.getElementById("f-title").value.trim(),c=document.getElementById("f-desc").value.trim(),s=document.getElementById("f-keywords").value.trim(),l=document.getElementById("f-author").value.trim(),y=document.getElementById("f-robots").value,m=document.getElementById("f-canonical").value.trim(),h=document.getElementById("f-og-type").value,u=document.getElementById("f-og-sitename").value.trim(),d=document.getElementById("f-og-image").value.trim(),f=document.getElementById("f-tw-card").value,r=document.getElementById("f-tw-site").value.trim(),g=document.getElementById("tog-og").checked,p=document.getElementById("tog-tw").checked;document.getElementById("cnt-title").textContent=t.length+" chars",document.getElementById("cnt-desc").textContent=c.length+" chars";const n=["<!-- Basic SEO meta tags -->"],o=[],a=[];t&&(n.push(`<title>${e(t)} `),n.push(` 