{"id":2449,"date":"2026-04-10T11:22:11","date_gmt":"2026-04-10T11:22:11","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=2449"},"modified":"2026-07-04T13:37:06","modified_gmt":"2026-07-04T13:37:06","slug":"free-seo-meta-tags-generator-preview","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/free-seo-meta-tags-generator-preview\/","title":{"rendered":"Free SEO Meta Tags Generator &amp; Social Preview Studio"},"content":{"rendered":"<div class=\"pth-hero-section\">\n<div class=\"pth-hero-content\">\n<h2>Free SEO Meta Tags Generator &#038; Social Preview Studio<\/h2>\n<p>Use our free SEO meta tags generator to instantly create, preview, and copy HTML tags for Google, Facebook Open Graph, and Twitter Cards 100% offline.<\/p>\n<div id=\"pth-toc-placeholder\"><\/div>\n<\/p>\n<\/div>\n  <div class=\"pth-hero-image\">\n    <img data-no-lazy=\"1\"\n         src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/04\/Free-SEO-Meta-Tags-Generator-1-800x447.jpeg\"\n         width=\"800\"\n         height=\"447\"\n         alt=\"free seo meta tags generator\"\n         fetchpriority=\"high\"\n         loading=\"eager\"\n         decoding=\"async\"\n         style=\"width:100%; height:auto; display:block;\">\n  <\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#\ud83d\udd34-why-open-graph-tags-control-your-social-share-appearance\">\ud83d\udd34\u00a0Why Open Graph Tags Control Your Social Share Appearance<\/a><\/li><li><a href=\"#\ud83d\udfe1-json-ld-schema-markup-what-it-is-and-how-google-uses-it\">\ud83d\udfe1\u00a0JSON-LD Schema Markup \u2014 What It Is and How Google Uses It<\/a><ul><li><a href=\"#\ud83d\udfe2-article-schema-required-fields-for-e-e-a-t-signals\">\ud83d\udfe2\u00a0Article Schema \u2014 Required Fields for E-E-A-T Signals<\/a><\/li><\/ul><\/li><li><a href=\"#\ud83d\udfe1-robots-meta-tag-every-directive-explained\">\ud83d\udfe1\u00a0Robots Meta Tag \u2014 Every Directive Explained<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<style>\r\n\/* ============================================================\r\n   PTH SEO META TAGS STUDIO \u2014 v2.0\r\n   PageSpeed 100 + WCAG 2.1 AA + WP\/LiteSpeed Safe\r\n   5 Tabs | 28 Tools | 100% Offline | Zero CDN\r\n   ============================================================ *\/\r\n#pth-seo-studio-wrapper {\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n    width: 100%; max-width: 1400px; margin: 0 auto;\r\n    box-sizing: border-box; background: #f8fafc;\r\n    padding: 20px; border-radius: 16px; color: #1e293b;\r\n}\r\n#pth-seo-studio-wrapper * { box-sizing: border-box; min-width: 0; }\r\n#pth-seo-studio-wrapper h2,\r\n#pth-seo-studio-wrapper h3 { color: #0f172a; font-weight: 800; margin-top: 0; }\r\n#pth-seo-studio-wrapper .pth-tool-title { font-size: 24px; font-weight: 800; color: #1d4ed8; margin: 0; }\r\n\r\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-card {\r\n    background: #fff; border: 1px solid #e2e8f0;\r\n    border-radius: 12px; padding: 18px; margin-bottom: 14px;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\r\n}\r\n#pth-seo-studio-wrapper .pth-card-hdr {\r\n    background: #f8fafc; margin: -18px -18px 14px -18px;\r\n    padding: 9px 14px; color: #1d4ed8; font-size: 11px;\r\n    border-bottom: 2px solid #eff6ff; font-weight: 800;\r\n    text-transform: uppercase; border-radius: 12px 12px 0 0;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n\/* \u2500\u2500 Meta bar \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-tool-meta-bar {\r\n    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;\r\n}\r\n#pth-seo-studio-wrapper .pth-version-badge {\r\n    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n#pth-seo-studio-wrapper .pth-status-offline {\r\n    background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n\r\n\/* \u2500\u2500 Layout \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-flex-layout {\r\n    display: grid; grid-template-columns: 1.8fr 1fr; gap: 18px; align-items: start;\r\n}\r\n#pth-seo-studio-wrapper .pth-flex-layout.pth-full-width { grid-template-columns: 100%; }\r\n\r\n\/* \u2500\u2500 Tabs \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-tabs-nav {\r\n    display: flex; gap: 3px; flex-wrap: wrap;\r\n    margin-bottom: 18px; border-bottom: 2px solid #e2e8f0;\r\n}\r\n#pth-seo-studio-wrapper .pth-tab-btn {\r\n    padding: 7px 13px; border-radius: 8px 8px 0 0;\r\n    font-size: 11px; font-weight: 700; cursor: pointer;\r\n    border: 2px solid transparent; border-bottom: none;\r\n    background: #f1f5f9; color: #334155;\r\n    transition: 0.15s; font-family: 'Inter', sans-serif;\r\n    margin-bottom: -2px; white-space: nowrap;\r\n}\r\n#pth-seo-studio-wrapper .pth-tab-btn:hover { background: #e2e8f0; color: #0f172a; }\r\n#pth-seo-studio-wrapper .pth-tab-btn.pth-active {\r\n    background: #fff; color: #1d4ed8;\r\n    border-color: #e2e8f0; border-bottom-color: #fff;\r\n}\r\n\r\n\/* \u2500\u2500 Buttons \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-btn {\r\n    padding: 8px 16px; border-radius: 8px; font-weight: 700;\r\n    cursor: pointer; border: none; font-family: 'Inter', sans-serif;\r\n    font-size: 12px; transition: 0.2s; display: inline-flex;\r\n    align-items: center; justify-content: center; gap: 5px;\r\n}\r\n#pth-seo-studio-wrapper .pth-btn-primary { background: #2563eb; color: #fff; }\r\n#pth-seo-studio-wrapper .pth-btn-primary:hover { background: #1d4ed8; }\r\n#pth-seo-studio-wrapper .pth-btn-secondary {\r\n    background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;\r\n}\r\n#pth-seo-studio-wrapper .pth-btn-secondary:hover { background: #e2e8f0; }\r\n#pth-seo-studio-wrapper .pth-btn-success { background: #059669; color: #fff; }\r\n#pth-seo-studio-wrapper .pth-btn-success:hover { background: #047857; }\r\n#pth-seo-studio-wrapper .pth-btn-danger {\r\n    background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;\r\n}\r\n#pth-seo-studio-wrapper .pth-sample-btn {\r\n    background: #d1fae5; color: #047857; border: 1px solid #10b981;\r\n    font-size: 0.7rem; padding: 3px 8px; border-radius: 5px;\r\n    font-weight: 700; cursor: pointer; transition: 0.2s;\r\n    display: inline-flex; align-items: center; gap: 4px;\r\n}\r\n#pth-seo-studio-wrapper .pth-sample-btn:hover { background: #a7f3d0; }\r\n\r\n\/* \u2500\u2500 Form elements \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper label {\r\n    font-weight: 700; color: #0f172a; margin-bottom: 4px;\r\n    display: block; font-size: 11px;\r\n    text-transform: uppercase; letter-spacing: 0.4px;\r\n}\r\n#pth-seo-studio-wrapper input[type=\"text\"],\r\n#pth-seo-studio-wrapper input[type=\"url\"],\r\n#pth-seo-studio-wrapper input[type=\"date\"],\r\n#pth-seo-studio-wrapper textarea,\r\n#pth-seo-studio-wrapper select {\r\n    width: 100%; padding: 8px 10px; border: 2px solid #e2e8f0;\r\n    border-radius: 7px; font-family: 'Inter', sans-serif;\r\n    font-size: 12px; color: #0f172a; background: #fff; transition: 0.2s;\r\n}\r\n#pth-seo-studio-wrapper input:focus,\r\n#pth-seo-studio-wrapper select:focus,\r\n#pth-seo-studio-wrapper textarea:focus {\r\n    border-color: #3b82f6; outline: none;\r\n    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);\r\n}\r\n#pth-seo-studio-wrapper textarea { resize: vertical; min-height: 70px; line-height: 1.5; }\r\n#pth-seo-studio-wrapper .pth-field { margin-bottom: 12px; }\r\n#pth-seo-studio-wrapper .pth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\r\n#pth-seo-studio-wrapper .pth-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }\r\n\r\n\/* \u2500\u2500 Char count bars \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-char-bar-wrap {\r\n    display: flex; align-items: center; gap: 8px; margin-top: 4px;\r\n}\r\n#pth-seo-studio-wrapper .pth-char-bar-bg {\r\n    flex: 1; height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden;\r\n}\r\n#pth-seo-studio-wrapper .pth-char-bar-fill {\r\n    height: 100%; border-radius: 2px; transition: 0.3s; width: 0%;\r\n}\r\n#pth-seo-studio-wrapper .pth-char-bar-fill.green { background: #059669; }\r\n#pth-seo-studio-wrapper .pth-char-bar-fill.amber { background: #92400e; }\r\n#pth-seo-studio-wrapper .pth-char-bar-fill.red   { background: #dc2626; }\r\n#pth-seo-studio-wrapper .pth-char-count {\r\n    font-size: 11px; font-weight: 700; min-width: 50px; text-align: right;\r\n}\r\n#pth-seo-studio-wrapper .pth-char-ok  { color: #047857; }\r\n#pth-seo-studio-wrapper .pth-char-warn{ color: #92400e; }\r\n#pth-seo-studio-wrapper .pth-char-bad { color: #991b1b; }\r\n\r\n\/* \u2500\u2500 SERP Previews \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-serp-toggle {\r\n    display: flex; gap: 6px; margin-bottom: 12px;\r\n}\r\n#pth-seo-studio-wrapper .pth-serp-toggle-btn {\r\n    flex: 1; padding: 6px; border: 2px solid #e2e8f0;\r\n    border-radius: 7px; font-size: 11px; font-weight: 700;\r\n    cursor: pointer; text-align: center; background: #f8fafc;\r\n    color: #334155; transition: 0.15s; font-family: 'Inter', sans-serif;\r\n}\r\n#pth-seo-studio-wrapper .pth-serp-toggle-btn.pth-active {\r\n    background: #eff6ff; border-color: #2563eb; color: #1d4ed8;\r\n}\r\n#pth-seo-studio-wrapper .pth-serp-box {\r\n    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;\r\n    padding: 16px 18px; margin-bottom: 10px;\r\n}\r\n#pth-seo-studio-wrapper .pth-serp-desktop { max-width: 100%; }\r\n#pth-seo-studio-wrapper .pth-serp-mobile  { max-width: 360px; font-size: 90%; }\r\n#pth-seo-studio-wrapper .pth-g-favicon-row {\r\n    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;\r\n}\r\n#pth-seo-studio-wrapper .pth-g-domain-text {\r\n    font-size: 13px; font-weight: 500; color: #1e293b;\r\n}\r\n#pth-seo-studio-wrapper .pth-g-breadcrumb {\r\n    font-size: 12px; color: #334155;\r\n}\r\n#pth-seo-studio-wrapper .pth-g-title-link {\r\n    font-family: Arial, sans-serif; font-size: 20px; font-weight: 400;\r\n    color: #1a0dab; line-height: 1.3; display: block; margin-bottom: 4px;\r\n    text-decoration: none; word-break: break-word;\r\n}\r\n#pth-seo-studio-wrapper .pth-serp-mobile .pth-g-title-link { font-size: 17px; }\r\n#pth-seo-studio-wrapper .pth-g-desc-text {\r\n    font-family: Arial, sans-serif; font-size: 14px; color: #4d5156;\r\n    line-height: 1.58; word-wrap: break-word;\r\n}\r\n#pth-seo-studio-wrapper .pth-snippet-box {\r\n    background: #f8fafc; border: 1px solid #e2e8f0;\r\n    border-radius: 8px; padding: 12px; margin-top: 10px;\r\n    font-size: 13px; color: #1e293b; line-height: 1.6;\r\n    display: none;\r\n}\r\n#pth-seo-studio-wrapper .pth-snippet-box.pth-visible { display: block; }\r\n#pth-seo-studio-wrapper .pth-snippet-title {\r\n    font-size: 11px; font-weight: 800; color: #334155;\r\n    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;\r\n}\r\n\r\n\/* \u2500\u2500 Social Card Previews \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-social-tabs {\r\n    display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap;\r\n}\r\n#pth-seo-studio-wrapper .pth-social-tab-btn {\r\n    padding: 5px 10px; border: 2px solid #e2e8f0;\r\n    border-radius: 6px; font-size: 10px; font-weight: 700;\r\n    cursor: pointer; background: #f8fafc; color: #334155;\r\n    transition: 0.15s; font-family: 'Inter', sans-serif;\r\n}\r\n#pth-seo-studio-wrapper .pth-social-tab-btn.pth-active {\r\n    background: #eff6ff; border-color: #2563eb; color: #1d4ed8;\r\n}\r\n\r\n\/* Facebook card *\/\r\n#pth-seo-studio-wrapper .pth-fb-card {\r\n    border: 1px solid #dadde1; border-radius: 3px;\r\n    overflow: hidden; max-width: 480px; margin: 0 auto; background: #fff;\r\n}\r\n#pth-seo-studio-wrapper .pth-fb-img {\r\n    width: 100%; height: 250px; object-fit: cover; display: block;\r\n    background: #e2e8f0;\r\n}\r\n#pth-seo-studio-wrapper .pth-fb-meta {\r\n    padding: 10px 12px; border-top: 1px solid #dadde1;\r\n}\r\n#pth-seo-studio-wrapper .pth-fb-domain {\r\n    font-size: 11px; color: #65676b; text-transform: uppercase;\r\n    font-family: Helvetica, Arial, sans-serif; margin-bottom: 3px;\r\n}\r\n#pth-seo-studio-wrapper .pth-fb-title {\r\n    font-size: 15px; font-weight: 600; color: #050505; line-height: 1.3;\r\n    font-family: Helvetica, Arial, sans-serif; margin-bottom: 3px;\r\n    word-break: break-word;\r\n}\r\n#pth-seo-studio-wrapper .pth-fb-desc {\r\n    font-size: 13px; color: #65676b; line-height: 1.4;\r\n    font-family: Helvetica, Arial, sans-serif; word-break: break-word;\r\n}\r\n\r\n\/* Twitter card *\/\r\n#pth-seo-studio-wrapper .pth-tw-card {\r\n    border: 1px solid #cfd9de; border-radius: 12px;\r\n    overflow: hidden; max-width: 480px; margin: 0 auto; background: #fff;\r\n}\r\n#pth-seo-studio-wrapper .pth-tw-img {\r\n    width: 100%; height: 200px; object-fit: cover; display: block;\r\n    background: #e2e8f0;\r\n}\r\n#pth-seo-studio-wrapper .pth-tw-img.pth-tw-small {\r\n    width: 120px; height: 120px; flex-shrink: 0;\r\n}\r\n#pth-seo-studio-wrapper .pth-tw-meta { padding: 10px 12px; }\r\n#pth-seo-studio-wrapper .pth-tw-domain { font-size: 12px; color: #536471; font-family: -apple-system, sans-serif; }\r\n#pth-seo-studio-wrapper .pth-tw-title {\r\n    font-size: 14px; font-weight: 700; color: #0f1419;\r\n    font-family: -apple-system, sans-serif; margin: 2px 0;\r\n    word-break: break-word;\r\n}\r\n#pth-seo-studio-wrapper .pth-tw-desc { font-size: 13px; color: #536471; font-family: -apple-system, sans-serif; word-break: break-word; }\r\n\r\n\/* WhatsApp *\/\r\n#pth-seo-studio-wrapper .pth-wa-card {\r\n    background: #fff; border: 1px solid #e2e8f0;\r\n    border-left: 4px solid #25d366; border-radius: 6px;\r\n    overflow: hidden; max-width: 320px; margin: 0 auto; display: flex;\r\n}\r\n#pth-seo-studio-wrapper .pth-wa-img {\r\n    width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; background: #e2e8f0;\r\n}\r\n#pth-seo-studio-wrapper .pth-wa-meta { padding: 8px 10px; flex: 1; }\r\n#pth-seo-studio-wrapper .pth-wa-site { font-size: 11px; font-weight: 700; color: #25d366; }\r\n#pth-seo-studio-wrapper .pth-wa-title { font-size: 13px; font-weight: 600; color: #111b21; line-height: 1.3; word-break: break-word; }\r\n#pth-seo-studio-wrapper .pth-wa-desc { font-size: 11px; color: #667781; word-break: break-word; }\r\n\r\n\/* Discord *\/\r\n#pth-seo-studio-wrapper .pth-dc-card {\r\n    background: #1e1f22; border-left: 4px solid #5865f2;\r\n    border-radius: 4px; overflow: hidden;\r\n    max-width: 400px; margin: 0 auto; padding: 10px 12px;\r\n}\r\n#pth-seo-studio-wrapper .pth-dc-site { font-size: 11px; font-weight: 700; color: #5865f2; margin-bottom: 4px; }\r\n#pth-seo-studio-wrapper .pth-dc-title { font-size: 14px; font-weight: 700; color: #00a8fc; margin-bottom: 4px; word-break: break-word; }\r\n#pth-seo-studio-wrapper .pth-dc-desc { font-size: 12px; color: #b5bac1; line-height: 1.4; word-break: break-word; }\r\n#pth-seo-studio-wrapper .pth-dc-img {\r\n    width: 100%; max-height: 200px; object-fit: cover;\r\n    border-radius: 4px; margin-top: 8px; display: block; background: #2b2d31;\r\n}\r\n\r\n\/* \u2500\u2500 Code output \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-code-out {\r\n    background: #0f172a; color: #4ade80; padding: 14px;\r\n    border-radius: 10px; font-family: 'Courier New', monospace;\r\n    font-size: 11px; min-height: 120px; max-height: 320px;\r\n    overflow-y: auto; white-space: pre-wrap; word-break: break-all;\r\n    border: 2px solid #1e293b; line-height: 1.7;\r\n}\r\n\r\n\/* \u2500\u2500 JSON-LD \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-schema-type-grid {\r\n    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));\r\n    gap: 8px; margin-bottom: 14px;\r\n}\r\n#pth-seo-studio-wrapper .pth-schema-btn {\r\n    padding: 8px; border: 2px solid #e2e8f0; border-radius: 8px;\r\n    cursor: pointer; text-align: center; background: #fff;\r\n    font-size: 10px; font-weight: 700; color: #334155;\r\n    transition: 0.15s; font-family: 'Inter', sans-serif;\r\n}\r\n#pth-seo-studio-wrapper .pth-schema-btn:hover { border-color: #2563eb; color: #1d4ed8; }\r\n#pth-seo-studio-wrapper .pth-schema-btn.pth-active { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }\r\n#pth-seo-studio-wrapper .pth-schema-icon { font-size: 18px; display: block; margin-bottom: 3px; }\r\n\r\n\/* FAQ schema pairs *\/\r\n#pth-seo-studio-wrapper .pth-faq-pair {\r\n    background: #f8fafc; border: 1px solid #e2e8f0;\r\n    border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;\r\n}\r\n#pth-seo-studio-wrapper .pth-faq-pair-hdr {\r\n    display: flex; justify-content: space-between; align-items: center;\r\n    margin-bottom: 8px;\r\n}\r\n#pth-seo-studio-wrapper .pth-faq-remove-btn {\r\n    font-size: 10px; padding: 2px 7px; border-radius: 4px;\r\n    cursor: pointer; border: 1px solid #fecaca;\r\n    background: #fef2f2; color: #991b1b; font-weight: 700;\r\n    font-family: 'Inter', sans-serif;\r\n}\r\n\r\n\/* \u2500\u2500 SEO Audit \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-score-ring {\r\n    width: 90px; height: 90px; border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-size: 28px; font-weight: 800; color: #fff;\r\n    margin: 0 auto 10px; transition: 0.5s; background: #e2e8f0;\r\n    color: #334155;\r\n}\r\n#pth-seo-studio-wrapper .pth-score-label {\r\n    text-align: center; font-size: 13px; font-weight: 700;\r\n    color: #334155; margin-bottom: 16px;\r\n}\r\n#pth-seo-studio-wrapper .pth-check-item {\r\n    display: flex; align-items: flex-start; gap: 10px;\r\n    padding: 8px 0; border-bottom: 1px solid #f1f5f9;\r\n}\r\n#pth-seo-studio-wrapper .pth-check-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }\r\n#pth-seo-studio-wrapper .pth-check-text { font-size: 12px; font-weight: 600; color: #1e293b; flex: 1; }\r\n#pth-seo-studio-wrapper .pth-check-detail { font-size: 11px; color: #334155; font-weight: 500; margin-top: 1px; }\r\n#pth-seo-studio-wrapper .pth-priority-box {\r\n    background: #fffbeb; border: 1px solid #fde68a;\r\n    border-radius: 8px; padding: 12px; margin-top: 12px;\r\n}\r\n#pth-seo-studio-wrapper .pth-priority-title {\r\n    font-size: 11px; font-weight: 800; color: #92400e;\r\n    text-transform: uppercase; margin-bottom: 8px;\r\n}\r\n#pth-seo-studio-wrapper .pth-priority-item {\r\n    font-size: 12px; color: #92400e; font-weight: 600;\r\n    padding: 3px 0; display: flex; align-items: center; gap: 6px;\r\n}\r\n\r\n\/* \u2500\u2500 Robots builder \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-robots-grid {\r\n    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;\r\n}\r\n#pth-seo-studio-wrapper .pth-robots-check {\r\n    display: flex; align-items: center; gap: 6px;\r\n    font-size: 12px; font-weight: 600; color: #1e293b; cursor: pointer;\r\n}\r\n#pth-seo-studio-wrapper .pth-robots-check input {\r\n    width: 14px; height: 14px; cursor: pointer; accent-color: #2563eb;\r\n}\r\n\r\n\/* \u2500\u2500 Sidebar \u2500\u2500 *\/\r\n#pth-seo-studio-wrapper .pth-sb-hdr {\r\n    background: #f8fafc; margin: -18px -18px 14px -18px;\r\n    padding: 9px 14px; color: #1d4ed8; font-size: 11px;\r\n    border-bottom: 2px solid #eff6ff; font-weight: 800;\r\n    text-transform: uppercase; border-radius: 12px 12px 0 0;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n\/* \u2500\u2500 Toast \u2500\u2500 *\/\r\n#pth-seo-studio-toast {\r\n    position: fixed; bottom: 24px; right: 24px; z-index: 9999;\r\n    display: flex; flex-direction: column; gap: 10px; pointer-events: none;\r\n}\r\n.pth-toast-msg {\r\n    padding: 10px 18px; border-radius: 10px; font-size: 13px;\r\n    font-weight: 600; color: #fff; pointer-events: auto;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.15);\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n}\r\n.pth-toast-success { background: #059669; }\r\n.pth-toast-error   { background: #dc2626; }\r\n.pth-toast-info    { background: #2563eb; }\r\n\r\n\/* \u2500\u2500 Mobile \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n    #pth-seo-studio-wrapper { padding: 10px; border-radius: 0; background: transparent; }\r\n    #pth-seo-studio-wrapper .pth-card { padding: 12px; margin-bottom: 10px; }\r\n    #pth-seo-studio-wrapper .pth-flex-layout { grid-template-columns: 100% !important; gap: 10px; }\r\n    #pth-seo-studio-wrapper .pth-tool-title { font-size: 18px; }\r\n    #pth-seo-studio-wrapper .pth-row-2 { grid-template-columns: 1fr; }\r\n    #pth-seo-studio-wrapper .pth-row-3 { grid-template-columns: 1fr 1fr; }\r\n    #pth-seo-studio-wrapper .pth-tabs-nav { gap: 2px; }\r\n    #pth-seo-studio-wrapper .pth-tab-btn { font-size: 10px; padding: 5px 8px; }\r\n    #pth-seo-studio-wrapper .pth-schema-type-grid { grid-template-columns: repeat(3, 1fr); }\r\n}\r\n<\/style>\r\n\r\n<div id=\"pth-seo-studio-toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n<div id=\"pth-seo-studio-wrapper\">\r\n<div class=\"pth-flex-layout\" id=\"pth-seo-layout\">\r\n\r\n<!-- \u2550\u2550\u2550 MAIN COLUMN \u2550\u2550\u2550 -->\r\n<div class=\"pth-main-col\">\r\n<div class=\"pth-card\">\r\n\r\n    <!-- Header -->\r\n    <div style=\"display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;flex-wrap:wrap;gap:8px;\">\r\n        <h2 class=\"pth-tool-title\">\ud83c\udff7\ufe0f SEO Meta Tags Studio<\/h2>\r\n        <button class=\"pth-btn pth-btn-secondary\" id=\"pth-seo-fw-btn\" aria-label=\"Toggle full width\">\u26f6 Full Width<\/button>\r\n    <\/div>\r\n    <div class=\"pth-tool-meta-bar\">\r\n        <span class=\"pth-version-badge\">v2.0<\/span>\r\n        <span class=\"pth-status-offline\">\ud83d\udd12 100% Offline<\/span>\r\n        <span style=\"font-size:10px;font-weight:700;color:#334155;\">5 Tabs \u00b7 28 Tools<\/span>\r\n    <\/div>\r\n    <div style=\"display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;\">\r\n        <button class=\"pth-sample-btn\" id=\"pth-seo-sample-btn\" aria-label=\"Load sample data\">\ud83d\udca1 Load Sample<\/button>\r\n        <button class=\"pth-btn pth-btn-danger\" id=\"pth-seo-clear-btn\"\r\n            style=\"font-size:0.7rem;padding:3px 8px;border-radius:5px;\" aria-label=\"Reset all fields\">\ud83d\uddd1\ufe0f Reset<\/button>\r\n        <button class=\"pth-btn pth-btn-secondary\" id=\"pth-seo-export-btn\"\r\n            style=\"font-size:0.7rem;padding:3px 8px;border-radius:5px;\" aria-label=\"Export as text file\">\ud83d\udce4 Export TXT<\/button>\r\n    <\/div>\r\n\r\n    <!-- Shared input fields (always visible) -->\r\n    <div class=\"pth-card\" style=\"margin-bottom:14px;\">\r\n        <div class=\"pth-card-hdr\">\ud83d\udcdd Core SEO Fields \u2014 Used Across All Tabs<\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-in-title\">Page Title <span style=\"color:#047857;font-weight:500;text-transform:none;\">(50\u201360 chars ideal)<\/span><\/label>\r\n            <input type=\"text\" id=\"pth-in-title\" placeholder=\"My Awesome Page Title\"\r\n                aria-label=\"SEO page title\" maxlength=\"120\">\r\n            <div class=\"pth-char-bar-wrap\">\r\n                <div class=\"pth-char-bar-bg\"><div class=\"pth-char-bar-fill\" id=\"pth-title-bar\"><\/div><\/div>\r\n                <span class=\"pth-char-count\" id=\"pth-title-count\">0 \/ 60<\/span>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-in-desc\">Meta Description <span style=\"color:#047857;font-weight:500;text-transform:none;\">(120\u2013160 chars ideal)<\/span><\/label>\r\n            <textarea id=\"pth-in-desc\" rows=\"3\" placeholder=\"Write a compelling description of your page content...\"\r\n                aria-label=\"Meta description\" maxlength=\"320\"><\/textarea>\r\n            <div class=\"pth-char-bar-wrap\">\r\n                <div class=\"pth-char-bar-bg\"><div class=\"pth-char-bar-fill\" id=\"pth-desc-bar\"><\/div><\/div>\r\n                <span class=\"pth-char-count\" id=\"pth-desc-count\">0 \/ 160<\/span>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"pth-row-2\">\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-in-url\">Page URL<\/label>\r\n                <input type=\"url\" id=\"pth-in-url\" placeholder=\"https:\/\/example.com\/page\"\r\n                    aria-label=\"Page URL\">\r\n            <\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-in-og-img\">OG Image URL <span style=\"color:#334155;font-weight:500;text-transform:none;\">(1200\u00d7630)<\/span><\/label>\r\n                <input type=\"url\" id=\"pth-in-og-img\" placeholder=\"https:\/\/example.com\/og-image.jpg\"\r\n                    aria-label=\"Open Graph image URL\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"pth-tabs-nav\" role=\"tablist\">\r\n        <button class=\"pth-tab-btn pth-active\" data-tab=\"serp\"\r\n            role=\"tab\" aria-selected=\"true\" aria-label=\"SERP Preview Studio\">\ud83d\udd0d SERP<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"social\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"Social Cards Studio\">\ud83d\udce3 Social<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"metatags\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"Meta Tags Generator\">\ud83d\udcbb Meta Tags<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"schema\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"JSON-LD Schema Generator\">\ud83d\udcca Schema<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"audit\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"SEO Audit Checklist\">\u2705 Audit<\/button>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 1: SERP \u2550\u2550 -->\r\n    <div id=\"pth-tab-serp\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83d\udd0d Google SERP Preview \u2014 Desktop & Mobile<\/div>\r\n            <div class=\"pth-serp-toggle\" role=\"group\" aria-label=\"SERP preview mode\">\r\n                <button class=\"pth-serp-toggle-btn pth-active\" data-serp=\"desktop\"\r\n                    aria-label=\"Desktop SERP preview\" aria-pressed=\"true\">\ud83d\udda5\ufe0f Desktop<\/button>\r\n                <button class=\"pth-serp-toggle-btn\" data-serp=\"mobile\"\r\n                    aria-label=\"Mobile SERP preview\" aria-pressed=\"false\">\ud83d\udcf1 Mobile<\/button>\r\n            <\/div>\r\n            <div class=\"pth-serp-box\" id=\"pth-serp-preview-box\">\r\n                <div class=\"pth-g-favicon-row\">\r\n                    <img decoding=\"async\" id=\"pth-prev-favicon\" src=\"\" width=\"16\" height=\"16\" alt=\"Site favicon\"\r\n                        data-no-lazy=\"1\" style=\"border-radius:2px;\">\r\n                    <span class=\"pth-g-domain-text\" id=\"pth-prev-domain\">example.com<\/span>\r\n                <\/div>\r\n                <div class=\"pth-g-breadcrumb\" id=\"pth-prev-breadcrumb\">example.com \u203a page<\/div>\r\n                <a class=\"pth-g-title-link\" id=\"pth-prev-g-title\" href=\"#\" role=\"text\">Page Title Preview<\/a>\r\n                <div class=\"pth-g-desc-text\">\r\n                    <span style=\"color:#70757a;font-size:12px;margin-right:4px;\" id=\"pth-prev-date\"><\/span>\r\n                    <span id=\"pth-prev-g-desc\">Your meta description will appear here in the search results. Write 120\u2013160 characters for best results.<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <!-- Featured snippet preview -->\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-snippet-type\">Featured Snippet Preview (optional)<\/label>\r\n                <select id=\"pth-snippet-type\" aria-label=\"Featured snippet type\">\r\n                    <option value=\"none\">None<\/option>\r\n                    <option value=\"paragraph\">Paragraph Snippet<\/option>\r\n                    <option value=\"list\">List Snippet<\/option>\r\n                    <option value=\"table\">Table Snippet<\/option>\r\n                <\/select>\r\n            <\/div>\r\n            <div class=\"pth-snippet-box\" id=\"pth-featured-snippet\">\r\n                <div class=\"pth-snippet-title\" id=\"pth-snippet-label\">Featured Snippet Preview<\/div>\r\n                <div id=\"pth-snippet-content\"><\/div>\r\n            <\/div>\r\n            <div class=\"pth-field\" style=\"margin-top:10px;\">\r\n                <label for=\"pth-snippet-text\">Snippet Content <span style=\"color:#334155;font-weight:500;text-transform:none;\">(paste your target content)<\/span><\/label>\r\n                <textarea id=\"pth-snippet-text\" rows=\"3\"\r\n                    placeholder=\"Paste the paragraph or list items you want to target as a featured snippet...\"\r\n                    aria-label=\"Featured snippet content\"><\/textarea>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 2: SOCIAL \u2550\u2550 -->\r\n    <div id=\"pth-tab-social\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83d\udce3 Social Card Previews<\/div>\r\n            <div class=\"pth-social-tabs\" role=\"group\" aria-label=\"Social platform selector\">\r\n                <button class=\"pth-social-tab-btn pth-active\" data-social=\"facebook\"\r\n                    aria-label=\"Facebook card preview\" aria-pressed=\"true\">\ud83d\udcd8 Facebook<\/button>\r\n                <button class=\"pth-social-tab-btn\" data-social=\"twitter\"\r\n                    aria-label=\"Twitter card preview\" aria-pressed=\"false\">\ud83d\udc26 Twitter\/X<\/button>\r\n                <button class=\"pth-social-tab-btn\" data-social=\"whatsapp\"\r\n                    aria-label=\"WhatsApp link preview\" aria-pressed=\"false\">\ud83d\udcac WhatsApp<\/button>\r\n                <button class=\"pth-social-tab-btn\" data-social=\"discord\"\r\n                    aria-label=\"Discord embed preview\" aria-pressed=\"false\">\ud83c\udfae Discord<\/button>\r\n            <\/div>\r\n\r\n            <!-- Facebook -->\r\n            <div id=\"pth-social-facebook\">\r\n                <div class=\"pth-fb-card\">\r\n                    <img decoding=\"async\" id=\"pth-fb-img\" class=\"pth-fb-img\" src=\"\" alt=\"OG Image preview\"\r\n                        data-no-lazy=\"1\" width=\"480\" height=\"250\">\r\n                    <div class=\"pth-fb-meta\">\r\n                        <div class=\"pth-fb-domain\" id=\"pth-fb-domain\">EXAMPLE.COM<\/div>\r\n                        <div class=\"pth-fb-title\" id=\"pth-fb-title\">Page Title Preview<\/div>\r\n                        <div class=\"pth-fb-desc\" id=\"pth-fb-desc\">Your meta description will appear here.<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div style=\"font-size:11px;color:#334155;font-weight:600;margin-top:8px;text-align:center;\">\r\n                    \u2139\ufe0f Facebook uses og:title \u00b7 og:description \u00b7 og:image \u00b7 og:url\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Twitter -->\r\n            <div id=\"pth-social-twitter\" style=\"display:none;\">\r\n                <div style=\"display:flex;gap:8px;margin-bottom:10px;\">\r\n                    <button class=\"pth-social-tab-btn pth-active\" data-tw=\"large\"\r\n                        aria-label=\"Twitter large image card\" aria-pressed=\"true\">Large Image<\/button>\r\n                    <button class=\"pth-social-tab-btn\" data-tw=\"summary\"\r\n                        aria-label=\"Twitter summary card\" aria-pressed=\"false\">Summary<\/button>\r\n                <\/div>\r\n                <div id=\"pth-tw-large-card\" class=\"pth-tw-card\">\r\n                    <img decoding=\"async\" id=\"pth-tw-img-lg\" class=\"pth-tw-img\" src=\"\" alt=\"Twitter card image\"\r\n                        data-no-lazy=\"1\" width=\"480\" height=\"200\">\r\n                    <div class=\"pth-tw-meta\">\r\n                        <div class=\"pth-tw-title\" id=\"pth-tw-title-lg\">Page Title Preview<\/div>\r\n                        <div class=\"pth-tw-desc\" id=\"pth-tw-desc-lg\">Description preview<\/div>\r\n                        <div class=\"pth-tw-domain\" id=\"pth-tw-domain-lg\">example.com<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div id=\"pth-tw-summary-card\" class=\"pth-tw-card\" style=\"display:none;\">\r\n                    <div style=\"display:flex;\">\r\n                        <img decoding=\"async\" id=\"pth-tw-img-sm\" class=\"pth-tw-img pth-tw-small\" src=\"\" alt=\"Twitter summary image\"\r\n                            data-no-lazy=\"1\" width=\"120\" height=\"120\">\r\n                        <div class=\"pth-tw-meta\">\r\n                            <div class=\"pth-tw-title\" id=\"pth-tw-title-sm\">Page Title Preview<\/div>\r\n                            <div class=\"pth-tw-desc\" id=\"pth-tw-desc-sm\">Description preview<\/div>\r\n                            <div class=\"pth-tw-domain\" id=\"pth-tw-domain-sm\">example.com<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div style=\"font-size:11px;color:#334155;font-weight:600;margin-top:8px;text-align:center;\">\r\n                    \u2139\ufe0f Twitter uses twitter:title \u00b7 twitter:description \u00b7 twitter:image \u00b7 twitter:card\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- WhatsApp -->\r\n            <div id=\"pth-social-whatsapp\" style=\"display:none;\">\r\n                <div class=\"pth-wa-card\">\r\n                    <img decoding=\"async\" id=\"pth-wa-img\" class=\"pth-wa-img\" src=\"\" alt=\"WhatsApp link image\"\r\n                        data-no-lazy=\"1\" width=\"80\" height=\"80\">\r\n                    <div class=\"pth-wa-meta\">\r\n                        <div class=\"pth-wa-site\" id=\"pth-wa-domain\">example.com<\/div>\r\n                        <div class=\"pth-wa-title\" id=\"pth-wa-title\">Page Title Preview<\/div>\r\n                        <div class=\"pth-wa-desc\" id=\"pth-wa-desc\">Your description here<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div style=\"font-size:11px;color:#334155;font-weight:600;margin-top:8px;text-align:center;\">\r\n                    \u2139\ufe0f WhatsApp reads og:title \u00b7 og:description \u00b7 og:image\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Discord -->\r\n            <div id=\"pth-social-discord\" style=\"display:none;\">\r\n                <div class=\"pth-dc-card\">\r\n                    <div class=\"pth-dc-site\" id=\"pth-dc-domain\">example.com<\/div>\r\n                    <div class=\"pth-dc-title\" id=\"pth-dc-title\">Page Title Preview<\/div>\r\n                    <div class=\"pth-dc-desc\" id=\"pth-dc-desc\">Description preview<\/div>\r\n                    <img decoding=\"async\" id=\"pth-dc-img\" class=\"pth-dc-img\" src=\"\" alt=\"Discord embed image\"\r\n                        data-no-lazy=\"1\" width=\"400\" height=\"200\">\r\n                <\/div>\r\n                <div style=\"font-size:11px;color:#334155;font-weight:600;margin-top:8px;text-align:center;\">\r\n                    \u2139\ufe0f Discord reads og:title \u00b7 og:description \u00b7 og:image \u00b7 og:site_name\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- OG Image validator -->\r\n            <div style=\"margin-top:14px;background:#f8fafc;border-radius:8px;padding:12px;\" id=\"pth-og-img-validator\">\r\n                <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;margin-bottom:6px;\">OG Image Checker<\/div>\r\n                <div id=\"pth-og-img-status\" style=\"font-size:12px;font-weight:600;color:#334155;\">\r\n                    Enter an image URL above to validate dimensions\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Additional OG fields -->\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\u2699\ufe0f Open Graph Settings<\/div>\r\n            <div class=\"pth-row-3\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-ogtype\">OG Type<\/label>\r\n                    <select id=\"pth-in-ogtype\" aria-label=\"Open Graph type\">\r\n                        <option value=\"website\">website<\/option>\r\n                        <option value=\"article\">article<\/option>\r\n                        <option value=\"product\">product<\/option>\r\n                        <option value=\"video.movie\">video.movie<\/option>\r\n                        <option value=\"book\">book<\/option>\r\n                        <option value=\"profile\">profile<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-sitename\">Site Name<\/label>\r\n                    <input type=\"text\" id=\"pth-in-sitename\" placeholder=\"My Site Name\"\r\n                        aria-label=\"Open Graph site name\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-locale\">OG Locale<\/label>\r\n                    <select id=\"pth-in-locale\" aria-label=\"Open Graph locale\">\r\n                        <option value=\"en_US\">en_US<\/option>\r\n                        <option value=\"en_GB\">en_GB<\/option>\r\n                        <option value=\"si_LK\">si_LK<\/option>\r\n                        <option value=\"de_DE\">de_DE<\/option>\r\n                        <option value=\"fr_FR\">fr_FR<\/option>\r\n                        <option value=\"es_ES\">es_ES<\/option>\r\n                        <option value=\"ja_JP\">ja_JP<\/option>\r\n                        <option value=\"zh_CN\">zh_CN<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-in-twitter-handle\">Twitter Handle<\/label>\r\n                <input type=\"text\" id=\"pth-in-twitter-handle\" placeholder=\"@yourusername\"\r\n                    aria-label=\"Twitter handle for twitter:site tag\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 3: META TAGS \u2550\u2550 -->\r\n    <div id=\"pth-tab-metatags\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83d\udcbb Meta Tags Generator<\/div>\r\n\r\n            <!-- Additional meta fields -->\r\n            <div class=\"pth-row-3\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-author\">Author<\/label>\r\n                    <input type=\"text\" id=\"pth-in-author\" placeholder=\"John Doe\"\r\n                        aria-label=\"Page author\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-canonical\">Canonical URL<\/label>\r\n                    <input type=\"url\" id=\"pth-in-canonical\" placeholder=\"https:\/\/example.com\/page\"\r\n                        aria-label=\"Canonical URL\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-themecolor\">Theme Color<\/label>\r\n                    <input type=\"color\" id=\"pth-in-themecolor\" value=\"#2563eb\"\r\n                        style=\"width:100%;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Browser theme color\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-keywords\">Keywords <span style=\"color:#334155;font-weight:500;text-transform:none;\">(comma separated)<\/span><\/label>\r\n                    <input type=\"text\" id=\"pth-in-keywords\" placeholder=\"seo, meta tags, generator\"\r\n                        aria-label=\"Meta keywords\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-viewport\">Viewport<\/label>\r\n                    <select id=\"pth-in-viewport\" aria-label=\"Viewport meta tag setting\">\r\n                        <option value=\"width=device-width, initial-scale=1.0\">Standard (recommended)<\/option>\r\n                        <option value=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\">No zoom<\/option>\r\n                        <option value=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0\">Scale 1\u20135<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Robots builder -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Robots Meta Builder<\/div>\r\n            <div class=\"pth-robots-grid\">\r\n                <label class=\"pth-robots-check\" for=\"pth-rob-index\">\r\n                    <input type=\"checkbox\" id=\"pth-rob-index\" checked aria-label=\"Allow indexing\">\r\n                    <span>index<\/span>\r\n                <\/label>\r\n                <label class=\"pth-robots-check\" for=\"pth-rob-follow\">\r\n                    <input type=\"checkbox\" id=\"pth-rob-follow\" checked aria-label=\"Follow links\">\r\n                    <span>follow<\/span>\r\n                <\/label>\r\n                <label class=\"pth-robots-check\" for=\"pth-rob-noarchive\">\r\n                    <input type=\"checkbox\" id=\"pth-rob-noarchive\" aria-label=\"Prevent archiving\">\r\n                    <span>noarchive<\/span>\r\n                <\/label>\r\n                <label class=\"pth-robots-check\" for=\"pth-rob-nosnippet\">\r\n                    <input type=\"checkbox\" id=\"pth-rob-nosnippet\" aria-label=\"Prevent snippets\">\r\n                    <span>nosnippet<\/span>\r\n                <\/label>\r\n                <label class=\"pth-robots-check\" for=\"pth-rob-noimageindex\">\r\n                    <input type=\"checkbox\" id=\"pth-rob-noimageindex\" aria-label=\"Prevent image indexing\">\r\n                    <span>noimageindex<\/span>\r\n                <\/label>\r\n                <label class=\"pth-robots-check\" for=\"pth-rob-max-snippet\">\r\n                    <input type=\"checkbox\" id=\"pth-rob-max-snippet\" aria-label=\"Max snippet -1\">\r\n                    <span>max-snippet:-1<\/span>\r\n                <\/label>\r\n            <\/div>\r\n            <div style=\"background:#f8fafc;border-radius:6px;padding:8px;margin-bottom:12px;font-size:11px;font-family:'Courier New',monospace;color:#1d4ed8;font-weight:700;\" id=\"pth-robots-preview\">\r\n                content=\"index, follow\"\r\n            <\/div>\r\n\r\n            <!-- Referrer policy -->\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-referrer\">Referrer Policy<\/label>\r\n                    <select id=\"pth-in-referrer\" aria-label=\"Referrer policy meta tag\">\r\n                        <option value=\"\">None<\/option>\r\n                        <option value=\"no-referrer\">no-referrer<\/option>\r\n                        <option value=\"origin\">origin<\/option>\r\n                        <option value=\"strict-origin-when-cross-origin\">strict-origin-when-cross-origin<\/option>\r\n                        <option value=\"no-referrer-when-downgrade\">no-referrer-when-downgrade<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-in-rating\">Content Rating<\/label>\r\n                    <select id=\"pth-in-rating\" aria-label=\"Content rating meta tag\">\r\n                        <option value=\"\">None<\/option>\r\n                        <option value=\"general\">general<\/option>\r\n                        <option value=\"safe for kids\">safe for kids<\/option>\r\n                        <option value=\"mature\">mature<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Copy by section -->\r\n            <div style=\"display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;\">\r\n                <button class=\"pth-btn pth-btn-secondary\" data-section=\"basic\" aria-label=\"Copy basic meta tags\">\ud83d\udccb Basic<\/button>\r\n                <button class=\"pth-btn pth-btn-secondary\" data-section=\"og\" aria-label=\"Copy Open Graph tags\">\ud83d\udccb OG Tags<\/button>\r\n                <button class=\"pth-btn pth-btn-secondary\" data-section=\"twitter\" aria-label=\"Copy Twitter tags\">\ud83d\udccb Twitter<\/button>\r\n                <button class=\"pth-btn pth-btn-primary\" id=\"pth-copy-all-tags-btn\" aria-label=\"Copy all meta tags\">\ud83d\udccb Copy All Tags<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 4: SCHEMA \u2550\u2550 -->\r\n    <div id=\"pth-tab-schema\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83d\udcca JSON-LD Schema Generator<\/div>\r\n            <div class=\"pth-schema-type-grid\" role=\"group\" aria-label=\"Schema type selector\">\r\n                <button class=\"pth-schema-btn pth-active\" data-schema=\"Article\" aria-label=\"Article schema\" aria-pressed=\"true\">\r\n                    <span class=\"pth-schema-icon\">\ud83d\udcf0<\/span>Article\r\n                <\/button>\r\n                <button class=\"pth-schema-btn\" data-schema=\"WebPage\" aria-label=\"WebPage schema\" aria-pressed=\"false\">\r\n                    <span class=\"pth-schema-icon\">\ud83c\udf10<\/span>WebPage\r\n                <\/button>\r\n                <button class=\"pth-schema-btn\" data-schema=\"Organization\" aria-label=\"Organization schema\" aria-pressed=\"false\">\r\n                    <span class=\"pth-schema-icon\">\ud83c\udfe2<\/span>Organization\r\n                <\/button>\r\n                <button class=\"pth-schema-btn\" data-schema=\"BreadcrumbList\" aria-label=\"BreadcrumbList schema\" aria-pressed=\"false\">\r\n                    <span class=\"pth-schema-icon\">\ud83c\udf5e<\/span>Breadcrumb\r\n                <\/button>\r\n                <button class=\"pth-schema-btn\" data-schema=\"FAQPage\" aria-label=\"FAQ schema\" aria-pressed=\"false\">\r\n                    <span class=\"pth-schema-icon\">\u2753<\/span>FAQ\r\n                <\/button>\r\n                <button class=\"pth-schema-btn\" data-schema=\"Product\" aria-label=\"Product schema\" aria-pressed=\"false\">\r\n                    <span class=\"pth-schema-icon\">\ud83d\uded2<\/span>Product\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- Article fields -->\r\n            <div id=\"pth-schema-Article\">\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-art-author\">Author Name<\/label>\r\n                        <input type=\"text\" id=\"pth-art-author\" placeholder=\"Jane Smith\" aria-label=\"Article author name\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-art-publisher\">Publisher Name<\/label>\r\n                        <input type=\"text\" id=\"pth-art-publisher\" placeholder=\"My Site\" aria-label=\"Article publisher\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-art-date-pub\">Date Published<\/label>\r\n                        <input type=\"date\" id=\"pth-art-date-pub\" aria-label=\"Article published date\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-art-date-mod\">Date Modified<\/label>\r\n                        <input type=\"date\" id=\"pth-art-date-mod\" aria-label=\"Article modified date\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-art-logo\">Publisher Logo URL<\/label>\r\n                    <input type=\"url\" id=\"pth-art-logo\" placeholder=\"https:\/\/example.com\/logo.png\" aria-label=\"Publisher logo URL\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- WebPage fields -->\r\n            <div id=\"pth-schema-WebPage\" style=\"display:none;\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-wp-lang\">Language<\/label>\r\n                    <input type=\"text\" id=\"pth-wp-lang\" value=\"en\" aria-label=\"Webpage language code\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-wp-lastreviewed\">Last Reviewed Date<\/label>\r\n                    <input type=\"date\" id=\"pth-wp-lastreviewed\" aria-label=\"Webpage last reviewed date\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Organization fields -->\r\n            <div id=\"pth-schema-Organization\" style=\"display:none;\">\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-org-name\">Organization Name<\/label>\r\n                        <input type=\"text\" id=\"pth-org-name\" placeholder=\"My Company\" aria-label=\"Organization name\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-org-logo\">Logo URL<\/label>\r\n                        <input type=\"url\" id=\"pth-org-logo\" placeholder=\"https:\/\/example.com\/logo.png\" aria-label=\"Organization logo URL\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-org-phone\">Phone<\/label>\r\n                        <input type=\"text\" id=\"pth-org-phone\" placeholder=\"+1-800-555-0100\" aria-label=\"Organization phone\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-org-email\">Email<\/label>\r\n                        <input type=\"text\" id=\"pth-org-email\" placeholder=\"hello@example.com\" aria-label=\"Organization email\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-org-social\">Social Profiles <span style=\"color:#334155;font-weight:500;text-transform:none;\">(one URL per line)<\/span><\/label>\r\n                    <textarea id=\"pth-org-social\" rows=\"3\" placeholder=\"https:\/\/twitter.com\/mysite\r\nhttps:\/\/facebook.com\/mysite\" aria-label=\"Organization social profiles\"><\/textarea>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- BreadcrumbList fields -->\r\n            <div id=\"pth-schema-BreadcrumbList\" style=\"display:none;\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-bread-url\">Generate from URL<\/label>\r\n                    <div style=\"display:flex;gap:8px;\">\r\n                        <input type=\"url\" id=\"pth-bread-url\" placeholder=\"https:\/\/example.com\/blog\/how-to-seo\" aria-label=\"URL to generate breadcrumbs from\" style=\"flex:1;\">\r\n                        <button class=\"pth-btn pth-btn-primary\" id=\"pth-gen-breadcrumb-btn\" aria-label=\"Generate breadcrumbs from URL\">Generate<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n                <div id=\"pth-breadcrumb-preview\" style=\"font-size:12px;color:#334155;font-weight:600;padding:8px;background:#f8fafc;border-radius:6px;margin-top:4px;min-height:30px;\">\r\n                    Breadcrumbs will appear here after generation\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- FAQ fields -->\r\n            <div id=\"pth-schema-FAQPage\" style=\"display:none;\">\r\n                <div id=\"pth-faq-pairs-container\"><\/div>\r\n                <button class=\"pth-btn pth-btn-secondary\" id=\"pth-add-faq-btn\"\r\n                    style=\"width:100%;margin-bottom:8px;\" aria-label=\"Add FAQ question and answer pair\">\r\n                    \u2795 Add Question & Answer\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- Product fields -->\r\n            <div id=\"pth-schema-Product\" style=\"display:none;\">\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-prod-brand\">Brand<\/label>\r\n                        <input type=\"text\" id=\"pth-prod-brand\" placeholder=\"Brand Name\" aria-label=\"Product brand\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-prod-sku\">SKU<\/label>\r\n                        <input type=\"text\" id=\"pth-prod-sku\" placeholder=\"SKU-001\" aria-label=\"Product SKU\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-row-3\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-prod-price\">Price<\/label>\r\n                        <input type=\"text\" id=\"pth-prod-price\" placeholder=\"29.99\" aria-label=\"Product price\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-prod-currency\">Currency<\/label>\r\n                        <select id=\"pth-prod-currency\" aria-label=\"Product currency\">\r\n                            <option value=\"USD\">USD<\/option>\r\n                            <option value=\"EUR\">EUR<\/option>\r\n                            <option value=\"GBP\">GBP<\/option>\r\n                            <option value=\"LKR\">LKR<\/option>\r\n                            <option value=\"JPY\">JPY<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-prod-avail\">Availability<\/label>\r\n                        <select id=\"pth-prod-avail\" aria-label=\"Product availability\">\r\n                            <option value=\"InStock\">In Stock<\/option>\r\n                            <option value=\"OutOfStock\">Out of Stock<\/option>\r\n                            <option value=\"PreOrder\">Pre-Order<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-prod-rating\">Rating (1\u20135)<\/label>\r\n                        <input type=\"text\" id=\"pth-prod-rating\" placeholder=\"4.8\" aria-label=\"Product rating\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-prod-reviews\">Review Count<\/label>\r\n                        <input type=\"text\" id=\"pth-prod-reviews\" placeholder=\"124\" aria-label=\"Product review count\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <button class=\"pth-btn pth-btn-success\" id=\"pth-gen-schema-btn\"\r\n                style=\"width:100%;margin-top:4px;\" aria-label=\"Generate JSON-LD schema\">\r\n                \u26a1 Generate JSON-LD\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 5: AUDIT \u2550\u2550 -->\r\n    <div id=\"pth-tab-audit\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\u2705 SEO Audit \u2014 15-Point Checklist<\/div>\r\n            <div class=\"pth-score-ring\" id=\"pth-score-ring\" aria-label=\"SEO Score\">0<\/div>\r\n            <div class=\"pth-score-label\" id=\"pth-score-label\">Fill in fields to start audit<\/div>\r\n            <div id=\"pth-audit-checklist\" aria-live=\"polite\" aria-label=\"SEO audit results\"><\/div>\r\n            <div class=\"pth-priority-box\" id=\"pth-priority-box\" style=\"display:none;\">\r\n                <div class=\"pth-priority-title\">\ud83d\udea8 Top Priorities to Fix<\/div>\r\n                <div id=\"pth-priority-list\"><\/div>\r\n            <\/div>\r\n            <button class=\"pth-btn pth-btn-secondary\" id=\"pth-export-audit-btn\"\r\n                style=\"width:100%;margin-top:12px;\" aria-label=\"Export SEO audit report\">\r\n                \ud83d\udce4 Export Audit Report\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Code Output (always visible) -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-card-hdr\">\ud83d\udcbb Generated Code Output<\/div>\r\n        <pre class=\"pth-code-out\" id=\"pth-code-out\" aria-live=\"polite\" aria-label=\"Generated code output\"><\/pre>\r\n        <div style=\"display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;\">\r\n            <button class=\"pth-btn pth-btn-success\" id=\"pth-copy-out-btn\"\r\n                style=\"flex:1;\" aria-label=\"Copy generated code\">\ud83d\udccb Copy Code<\/button>\r\n            <button class=\"pth-btn pth-btn-secondary\" id=\"pth-print-btn\"\r\n                style=\"flex:1;\" aria-label=\"Print output\">\ud83d\udda8\ufe0f Print<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div><!-- \/main card -->\r\n<\/div><!-- \/main col -->\r\n\r\n<!-- \u2550\u2550\u2550 SIDEBAR \u2550\u2550\u2550 -->\r\n<div class=\"pth-sidebar-col\" id=\"pth-seo-sidebar\">\r\n\r\n    <!-- SEO Score Widget -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udcca Live SEO Score<\/div>\r\n        <div class=\"pth-score-ring\" id=\"pth-sb-score-ring\" style=\"width:70px;height:70px;font-size:22px;\">0<\/div>\r\n        <div class=\"pth-score-label\" id=\"pth-sb-score-label\" style=\"font-size:12px;\">Start filling fields<\/div>\r\n        <div style=\"margin-top:8px;display:flex;flex-direction:column;gap:4px;\" id=\"pth-sb-mini-checks\">\r\n            <!-- filled by JS -->\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Quick Tips -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udca1 SEO Best Practices<\/div>\r\n        <ul style=\"margin:0;padding-left:14px;font-size:11px;color:#334155;line-height:2;font-weight:500;\">\r\n            <li>Title: <strong style=\"color:#0f172a;\">50\u201360 chars<\/strong> \u2014 wider chars count more<\/li>\r\n            <li>Description: <strong style=\"color:#0f172a;\">120\u2013160 chars<\/strong> \u2014 clear & compelling<\/li>\r\n            <li>OG Image: <strong style=\"color:#0f172a;\">1200\u00d7630px<\/strong> \u2014 2:1 ratio<\/li>\r\n            <li>Canonical: always set to prevent duplicate content<\/li>\r\n            <li>Twitter card: <strong style=\"color:#0f172a;\">summary_large_image<\/strong> for blog posts<\/li>\r\n            <li>JSON-LD: add Article schema on every blog post<\/li>\r\n            <li>Robots: <strong style=\"color:#0f172a;\">noindex<\/strong> tag\/archive pages<\/li>\r\n            <li>FAQ schema: can unlock rich result accordion<\/li>\r\n        <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Platform Notes -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udccb Platform Char Limits<\/div>\r\n        <div style=\"font-size:11px;color:#334155;font-weight:500;line-height:1.9;\">\r\n            <div><strong style=\"color:#0f172a;\">Google Title:<\/strong> ~600px wide (~55\u201360 chars)<\/div>\r\n            <div><strong style=\"color:#0f172a;\">Google Desc:<\/strong> ~920px wide (~155\u2013160 chars)<\/div>\r\n            <div><strong style=\"color:#0f172a;\">Facebook Title:<\/strong> ~70 chars shown<\/div>\r\n            <div><strong style=\"color:#0f172a;\">Facebook Desc:<\/strong> ~200 chars<\/div>\r\n            <div><strong style=\"color:#0f172a;\">Twitter Title:<\/strong> ~70 chars<\/div>\r\n            <div><strong style=\"color:#0f172a;\">Twitter Desc:<\/strong> ~200 chars<\/div>\r\n            <div><strong style=\"color:#0f172a;\">WhatsApp:<\/strong> ~60 char title<\/div>\r\n            <div><strong style=\"color:#0f172a;\">Discord:<\/strong> ~128 char title<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Schema tips -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udcca Schema Quick Ref<\/div>\r\n        <div style=\"font-size:11px;color:#334155;font-weight:500;line-height:1.9;\">\r\n            <div>\ud83d\udcf0 <strong style=\"color:#0f172a;\">Article<\/strong> \u2014 blog posts, news<\/div>\r\n            <div>\ud83c\udf10 <strong style=\"color:#0f172a;\">WebPage<\/strong> \u2014 static pages<\/div>\r\n            <div>\ud83c\udfe2 <strong style=\"color:#0f172a;\">Organization<\/strong> \u2014 homepage<\/div>\r\n            <div>\ud83c\udf5e <strong style=\"color:#0f172a;\">Breadcrumb<\/strong> \u2014 navigation<\/div>\r\n            <div>\u2753 <strong style=\"color:#0f172a;\">FAQ<\/strong> \u2014 unlocks accordions<\/div>\r\n            <div>\ud83d\uded2 <strong style=\"color:#0f172a;\">Product<\/strong> \u2014 e-commerce pages<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div><!-- \/sidebar -->\r\n<\/div><!-- \/flex-layout -->\r\n<\/div><!-- \/wrapper -->\r\n\r\n<script data-no-optimize=\"1\" data-no-minify=\"1\" data-cfasync=\"false\">\r\n(function () {\r\n    \"use strict\";\r\n\r\n    window.pthSeoStudioApp = {\r\n        initialized: false,\r\n        currentTab: 'serp',\r\n        currentSchema: 'Article',\r\n        currentSocial: 'facebook',\r\n        currentSerp: 'desktop',\r\n        currentTwCard: 'large',\r\n        faqCount: 0,\r\n        UI: {},\r\n\r\n        SAMPLE: {\r\n            title: 'How to Build a WordPress Site in 2025 \u2014 Beginner Guide',\r\n            desc: 'Learn step-by-step how to build a fast, SEO-friendly WordPress website in 2025. Covers hosting, themes, plugins, and launch.',\r\n            url: 'https:\/\/schoolict.net\/tools\/how-to-build-wordpress-site\/',\r\n            img: 'https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/06\/WPSite.jpeg',\r\n            sitename: 'Prime Tool Hub',\r\n            author: 'Ruwan Suraweera',\r\n            canonical: 'https:\/\/schoolict.net\/tools\/how-to-build-wordpress-site\/'\r\n        },\r\n\r\n        init: function () {\r\n            this.cacheDOM();\r\n            this.attachEvents();\r\n            this.initFAQ();\r\n            this.updatePreview();\r\n            this.runAudit();\r\n        },\r\n\r\n        cacheDOM: function () {\r\n            var g = function (id) { return document.getElementById(id); };\r\n            this.UI = {\r\n                wrapper: g('pth-seo-studio-wrapper'),\r\n                layout: g('pth-seo-layout'),\r\n                fwBtn: g('pth-seo-fw-btn'),\r\n                sampleBtn: g('pth-seo-sample-btn'),\r\n                clearBtn: g('pth-seo-clear-btn'),\r\n                exportBtn: g('pth-seo-export-btn'),\r\n                toast: g('pth-seo-studio-toast'),\r\n                \/* Inputs *\/\r\n                inTitle: g('pth-in-title'), inDesc: g('pth-in-desc'),\r\n                inUrl: g('pth-in-url'), inOgImg: g('pth-in-og-img'),\r\n                inSitename: g('pth-in-sitename'), inOgtype: g('pth-in-ogtype'),\r\n                inLocale: g('pth-in-locale'), inTwitterHandle: g('pth-in-twitter-handle'),\r\n                inAuthor: g('pth-in-author'), inCanonical: g('pth-in-canonical'),\r\n                inThemecolor: g('pth-in-themecolor'), inKeywords: g('pth-in-keywords'),\r\n                inViewport: g('pth-in-viewport'), inReferrer: g('pth-in-referrer'),\r\n                inRating: g('pth-in-rating'),\r\n                titleCount: g('pth-title-count'), titleBar: g('pth-title-bar'),\r\n                descCount: g('pth-desc-count'), descBar: g('pth-desc-bar'),\r\n                \/* SERP *\/\r\n                prevFavicon: g('pth-prev-favicon'), prevDomain: g('pth-prev-domain'),\r\n                prevBreadcrumb: g('pth-prev-breadcrumb'), prevTitle: g('pth-prev-g-title'),\r\n                prevDate: g('pth-prev-date'), prevDesc: g('pth-prev-g-desc'),\r\n                serpBox: g('pth-serp-preview-box'),\r\n                snippetType: g('pth-snippet-type'), snippetText: g('pth-snippet-text'),\r\n                featuredSnippet: g('pth-featured-snippet'),\r\n                snippetLabel: g('pth-snippet-label'), snippetContent: g('pth-snippet-content'),\r\n                \/* Social *\/\r\n                fbImg: g('pth-fb-img'), fbDomain: g('pth-fb-domain'),\r\n                fbTitle: g('pth-fb-title'), fbDesc: g('pth-fb-desc'),\r\n                twTitleLg: g('pth-tw-title-lg'), twDescLg: g('pth-tw-desc-lg'),\r\n                twDomainLg: g('pth-tw-domain-lg'), twImgLg: g('pth-tw-img-lg'),\r\n                twTitleSm: g('pth-tw-title-sm'), twDescSm: g('pth-tw-desc-sm'),\r\n                twDomainSm: g('pth-tw-domain-sm'), twImgSm: g('pth-tw-img-sm'),\r\n                waImg: g('pth-wa-img'), waDomain: g('pth-wa-domain'),\r\n                waTitle: g('pth-wa-title'), waDesc: g('pth-wa-desc'),\r\n                dcDomain: g('pth-dc-domain'), dcTitle: g('pth-dc-title'),\r\n                dcDesc: g('pth-dc-desc'), dcImg: g('pth-dc-img'),\r\n                ogImgStatus: g('pth-og-img-status'),\r\n                \/* Robots *\/\r\n                robIndex: g('pth-rob-index'), robFollow: g('pth-rob-follow'),\r\n                robNoarchive: g('pth-rob-noarchive'), robNosnippet: g('pth-rob-nosnippet'),\r\n                robNoimageindex: g('pth-rob-noimageindex'), robMaxSnippet: g('pth-rob-max-snippet'),\r\n                robotsPreview: g('pth-robots-preview'),\r\n                \/* Schema *\/\r\n                schemaArticle: g('pth-schema-Article'), schemaWebPage: g('pth-schema-WebPage'),\r\n                schemaOrg: g('pth-schema-Organization'), schemaBread: g('pth-schema-BreadcrumbList'),\r\n                schemaFaq: g('pth-schema-FAQPage'), schemaProd: g('pth-schema-Product'),\r\n                artAuthor: g('pth-art-author'), artPublisher: g('pth-art-publisher'),\r\n                artDatePub: g('pth-art-date-pub'), artDateMod: g('pth-art-date-mod'),\r\n                artLogo: g('pth-art-logo'),\r\n                wpLang: g('pth-wp-lang'), wpLastreviewed: g('pth-wp-lastreviewed'),\r\n                orgName: g('pth-org-name'), orgLogo: g('pth-org-logo'),\r\n                orgPhone: g('pth-org-phone'), orgEmail: g('pth-org-email'),\r\n                orgSocial: g('pth-org-social'),\r\n                breadUrl: g('pth-bread-url'), breadPreview: g('pth-breadcrumb-preview'),\r\n                genBreadBtn: g('pth-gen-breadcrumb-btn'),\r\n                faqContainer: g('pth-faq-pairs-container'), addFaqBtn: g('pth-add-faq-btn'),\r\n                prodBrand: g('pth-prod-brand'), prodSku: g('pth-prod-sku'),\r\n                prodPrice: g('pth-prod-price'), prodCurrency: g('pth-prod-currency'),\r\n                prodAvail: g('pth-prod-avail'), prodRating: g('pth-prod-rating'),\r\n                prodReviews: g('pth-prod-reviews'),\r\n                genSchemaBtn: g('pth-gen-schema-btn'),\r\n                \/* Audit *\/\r\n                scoreRing: g('pth-score-ring'), scoreLabel: g('pth-score-label'),\r\n                auditChecklist: g('pth-audit-checklist'), priorityBox: g('pth-priority-box'),\r\n                priorityList: g('pth-priority-list'), exportAuditBtn: g('pth-export-audit-btn'),\r\n                sbScoreRing: g('pth-sb-score-ring'), sbScoreLabel: g('pth-sb-score-label'),\r\n                sbMiniChecks: g('pth-sb-mini-checks'),\r\n                \/* Code out *\/\r\n                codeOut: g('pth-code-out'),\r\n                copyOutBtn: g('pth-copy-out-btn'), printBtn: g('pth-print-btn'),\r\n                copyAllTagsBtn: g('pth-copy-all-tags-btn')\r\n            };\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UTILS \u2500\u2500\u2500 *\/\r\n        showToast: function (msg, type) {\r\n            if (!this.UI.toast) return;\r\n            var colors = { success: '#1e293b', error: '#dc2626', info: '#1d4ed8' };\r\n            this.UI.toast.style.background = colors[type || 'success'] || '#1e293b';\r\n            this.UI.toast.textContent = (type === 'error' ? '\u274c ' : type === 'info' ? '\u2139\ufe0f ' : '\u2705 ') + msg;\r\n            this.UI.toast.style.display = 'flex';\r\n            clearTimeout(this._toastTimer);\r\n            var self = this;\r\n            this._toastTimer = setTimeout(function () { self.UI.toast.style.display = 'none'; }, 3200);\r\n        },\r\n        val: function (el) { return el ? el.value.trim() : ''; },\r\n        getDomain: function (url) { try { return new URL(url).hostname.replace('www.', ''); } catch (e) { return url.replace(\/https?:\\\/\\\/(www\\.)?\/, '').split('\/')[0] || 'example.com'; } },\r\n        escHtml: function (str) { return (str || '').replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'\"'); },\r\n        copyText: function (text, label) {\r\n            navigator.clipboard.writeText(text).then(function () {}).catch(function () {});\r\n            this.showToast((label || 'Text') + ' copied!');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 TABS \u2500\u2500\u2500 *\/\r\n        switchTab: function (tab) {\r\n            var self = this;\r\n            var allTabs = ['serp', 'social', 'metatags', 'schema', 'audit'];\r\n            allTabs.forEach(function (t) {\r\n                var panel = document.getElementById('pth-tab-' + t);\r\n                var btn = document.querySelector('[data-tab=\"' + t + '\"]');\r\n                if (panel) panel.style.display = (t === tab) ? 'block' : 'none';\r\n                if (btn) {\r\n                    btn.classList.toggle('pth-active', t === tab);\r\n                    btn.setAttribute('aria-selected', t === tab ? 'true' : 'false');\r\n                }\r\n            });\r\n            this.currentTab = tab;\r\n            if (tab === 'audit') this.runAudit();\r\n            if (tab === 'metatags') this.updateRobotsPreview();\r\n            if (tab === 'schema') this.switchSchema(this.currentSchema);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SERP \/ DESKTOP \/ MOBILE \u2500\u2500\u2500 *\/\r\n        switchSerp: function (mode) {\r\n            var box = this.UI.serpBox;\r\n            if (!box) return;\r\n            this.currentSerp = mode;\r\n            box.classList.toggle('pth-serp-desktop', mode === 'desktop');\r\n            box.classList.toggle('pth-serp-mobile', mode === 'mobile');\r\n            document.querySelectorAll('.pth-serp-toggle-btn').forEach(function (b) {\r\n                b.classList.toggle('pth-active', b.getAttribute('data-serp') === mode);\r\n                b.setAttribute('aria-pressed', b.getAttribute('data-serp') === mode ? 'true' : 'false');\r\n            });\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 LIVE PREVIEW UPDATE \u2500\u2500\u2500 *\/\r\n        updatePreview: function () {\r\n            var title = this.val(this.UI.inTitle);\r\n            var desc = this.val(this.UI.inDesc);\r\n            var url = this.val(this.UI.inUrl) || 'https:\/\/example.com\/page';\r\n            var img = this.val(this.UI.inOgImg);\r\n            var sitename = this.val(this.UI.inSitename);\r\n            var domain = this.getDomain(url);\r\n\r\n            \/* Title\/Desc counters *\/\r\n            var tLen = title.length, dLen = desc.length;\r\n            if (this.UI.titleCount) this.UI.titleCount.textContent = tLen + ' \/ 60';\r\n            if (this.UI.titleBar) {\r\n                this.UI.titleBar.style.width = Math.min(100, (tLen \/ 60) * 100) + '%';\r\n                this.UI.titleBar.style.background = tLen > 60 ? '#dc2626' : tLen >= 50 ? '#10b981' : '#f59e0b';\r\n            }\r\n            if (this.UI.descCount) this.UI.descCount.textContent = dLen + ' \/ 160';\r\n            if (this.UI.descBar) {\r\n                this.UI.descBar.style.width = Math.min(100, (dLen \/ 160) * 100) + '%';\r\n                this.UI.descBar.style.background = dLen > 160 ? '#dc2626' : dLen >= 120 ? '#10b981' : '#f59e0b';\r\n            }\r\n\r\n            \/* SERP Preview *\/\r\n            if (this.UI.prevDomain) this.UI.prevDomain.textContent = sitename ? sitename + ' | ' + domain : domain;\r\n            if (this.UI.prevBreadcrumb) {\r\n                var parts = url.replace(\/https?:\\\/\\\/\/,'').split('\/').filter(Boolean);\r\n                this.UI.prevBreadcrumb.textContent = parts.join(' \u203a ');\r\n            }\r\n            if (this.UI.prevTitle) this.UI.prevTitle.textContent = title || 'Page Title Preview';\r\n            if (this.UI.prevDesc) this.UI.prevDesc.textContent = desc || 'Your meta description will appear here in the search results.';\r\n            if (this.UI.prevFavicon) {\r\n                this.UI.prevFavicon.src = 'https:\/\/www.google.com\/s2\/favicons?domain=' + domain + '&sz=16';\r\n                this.UI.prevFavicon.onerror = function () { this.style.display = 'none'; };\r\n            }\r\n\r\n            \/* Social Previews *\/\r\n            var socialDomain = domain.toUpperCase();\r\n            if (this.UI.fbImg) { this.UI.fbImg.src = img; this.UI.fbImg.style.display = img ? 'block' : 'none'; }\r\n            if (this.UI.fbDomain) this.UI.fbDomain.textContent = socialDomain;\r\n            if (this.UI.fbTitle) this.UI.fbTitle.textContent = title || 'Page Title Preview';\r\n            if (this.UI.fbDesc) this.UI.fbDesc.textContent = desc || 'Your description here';\r\n            [this.UI.twImgLg, this.UI.twImgSm].forEach(function (el) { if (el) { el.src = img; el.style.display = img ? 'block' : 'none'; } });\r\n            if (this.UI.twTitleLg) this.UI.twTitleLg.textContent = title || 'Page Title Preview';\r\n            if (this.UI.twDescLg) this.UI.twDescLg.textContent = desc || '';\r\n            if (this.UI.twDomainLg) this.UI.twDomainLg.textContent = domain;\r\n            if (this.UI.twTitleSm) this.UI.twTitleSm.textContent = title || 'Page Title Preview';\r\n            if (this.UI.twDescSm) this.UI.twDescSm.textContent = desc || '';\r\n            if (this.UI.twDomainSm) this.UI.twDomainSm.textContent = domain;\r\n            if (this.UI.waImg) { this.UI.waImg.src = img; this.UI.waImg.style.display = img ? 'block' : 'none'; }\r\n            if (this.UI.waDomain) this.UI.waDomain.textContent = domain;\r\n            if (this.UI.waTitle) this.UI.waTitle.textContent = title || 'Page Title Preview';\r\n            if (this.UI.waDesc) this.UI.waDesc.textContent = desc || '';\r\n            if (this.UI.dcDomain) this.UI.dcDomain.textContent = sitename || domain;\r\n            if (this.UI.dcTitle) this.UI.dcTitle.textContent = title || 'Page Title Preview';\r\n            if (this.UI.dcDesc) this.UI.dcDesc.textContent = desc || '';\r\n            if (this.UI.dcImg) { this.UI.dcImg.src = img; this.UI.dcImg.style.display = img ? 'block' : 'none'; }\r\n\r\n            \/* OG Image Validator *\/\r\n            if (img && this.UI.ogImgStatus) {\r\n                var testImg = new Image();\r\n                var self = this;\r\n                testImg.onload = function () {\r\n                    var w = testImg.naturalWidth, h = testImg.naturalHeight;\r\n                    var ok = (w >= 1200 && h >= 630);\r\n                    self.UI.ogImgStatus.innerHTML = (ok ? '\u2705 ' : '\u26a0\ufe0f ') + w + ' \u00d7 ' + h + 'px \u2014 ' + (ok ? 'Perfect size!' : 'Recommended: 1200\u00d7630px');\r\n                    self.UI.ogImgStatus.style.color = ok ? '#047857' : '#92400e';\r\n                };\r\n                testImg.onerror = function () {\r\n                    self.UI.ogImgStatus.textContent = '\u274c Could not load image \u2014 check URL';\r\n                    self.UI.ogImgStatus.style.color = '#dc2626';\r\n                };\r\n                testImg.src = img;\r\n            } else if (this.UI.ogImgStatus) {\r\n                this.UI.ogImgStatus.textContent = 'Enter an image URL above to validate dimensions';\r\n                this.UI.ogImgStatus.style.color = '#334155';\r\n            }\r\n\r\n            \/* Featured Snippet *\/\r\n            this.updateFeaturedSnippet();\r\n            \/* Meta tags code output *\/\r\n            this.generateCode();\r\n            \/* Audit (live) *\/\r\n            this.runAudit();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 FEATURED SNIPPET \u2500\u2500\u2500 *\/\r\n        updateFeaturedSnippet: function () {\r\n            if (!this.UI.snippetType || !this.UI.featuredSnippet) return;\r\n            var type = this.UI.snippetType.value;\r\n            var text = this.UI.snippetText ? this.UI.snippetText.value.trim() : '';\r\n            var title = this.val(this.UI.inTitle);\r\n            if (type === 'none') { this.UI.featuredSnippet.style.display = 'none'; return; }\r\n            this.UI.featuredSnippet.style.display = 'block';\r\n            if (this.UI.snippetLabel) this.UI.snippetLabel.textContent = type.charAt(0).toUpperCase() + type.slice(1) + ' Featured Snippet';\r\n            var html = '';\r\n            if (type === 'paragraph') {\r\n                html = '<p style=\"font-size:13px;color:#1e293b;line-height:1.6;margin:0;\">' + this.escHtml(text || 'Your featured snippet paragraph content will appear here.') + '<\/p>';\r\n            } else if (type === 'list') {\r\n                var items = text.split('\\n').filter(function (l) { return l.trim(); });\r\n                if (!items.length) items = ['List item one', 'List item two', 'List item three'];\r\n                html = '<ul style=\"margin:0;padding-left:18px;font-size:13px;color:#1e293b;line-height:1.8;\">' + items.map(function (i) { return '<li>' + i + '<\/li>'; }).join('') + '<\/ul>';\r\n            } else if (type === 'table') {\r\n                var rows = text.split('\\n').filter(function (l) { return l.trim(); });\r\n                if (!rows.length) rows = ['Feature | Value', 'Size | Large', 'Weight | 500g'];\r\n                html = '<table style=\"font-size:12px;border-collapse:collapse;width:100%;\">' + rows.map(function (r, i) {\r\n                    var cells = r.split('|');\r\n                    return '<tr>' + cells.map(function (c) {\r\n                        return i === 0 ? '<th style=\"border:1px solid #e2e8f0;padding:4px 8px;background:#f8fafc;text-align:left;font-weight:700;\">' + c.trim() + '<\/th>'\r\n                            : '<td style=\"border:1px solid #e2e8f0;padding:4px 8px;\">' + c.trim() + '<\/td>';\r\n                    }).join('') + '<\/tr>';\r\n                }).join('') + '<\/table>';\r\n            }\r\n            if (this.UI.snippetContent) this.UI.snippetContent.innerHTML = html;\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 ROBOTS PREVIEW \u2500\u2500\u2500 *\/\r\n        updateRobotsPreview: function () {\r\n            if (!this.UI.robotsPreview) return;\r\n            var parts = [];\r\n            if (this.UI.robIndex) parts.push(this.UI.robIndex.checked ? 'index' : 'noindex');\r\n            if (this.UI.robFollow) parts.push(this.UI.robFollow.checked ? 'follow' : 'nofollow');\r\n            if (this.UI.robNoarchive && this.UI.robNoarchive.checked) parts.push('noarchive');\r\n            if (this.UI.robNosnippet && this.UI.robNosnippet.checked) parts.push('nosnippet');\r\n            if (this.UI.robNoimageindex && this.UI.robNoimageindex.checked) parts.push('noimageindex');\r\n            if (this.UI.robMaxSnippet && this.UI.robMaxSnippet.checked) parts.push('max-snippet:-1');\r\n            this.UI.robotsPreview.textContent = 'content=\"' + parts.join(', ') + '\"';\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 GENERATE META CODE \u2500\u2500\u2500 *\/\r\n        generateCode: function () {\r\n            if (!this.UI.codeOut) return;\r\n            var v = this.val.bind(this);\r\n            var title = v(this.UI.inTitle);\r\n            var desc = v(this.UI.inDesc);\r\n            var url = v(this.UI.inUrl);\r\n            var img = v(this.UI.inOgImg);\r\n            var sitename = v(this.UI.inSitename);\r\n            var ogtype = this.UI.inOgtype ? this.UI.inOgtype.value : 'website';\r\n            var locale = this.UI.inLocale ? this.UI.inLocale.value : 'en_US';\r\n            var handle = v(this.UI.inTwitterHandle);\r\n            var author = v(this.UI.inAuthor);\r\n            var canonical = v(this.UI.inCanonical) || url;\r\n            var themecolor = this.UI.inThemecolor ? this.UI.inThemecolor.value : '#2563eb';\r\n            var keywords = v(this.UI.inKeywords);\r\n            var viewport = this.UI.inViewport ? this.UI.inViewport.value : 'width=device-width, initial-scale=1.0';\r\n            var referrer = this.UI.inReferrer ? this.UI.inReferrer.value : '';\r\n            var rating = this.UI.inRating ? this.UI.inRating.value : '';\r\n\r\n            \/* Robots string *\/\r\n            var robParts = [];\r\n            if (this.UI.robIndex) robParts.push(this.UI.robIndex.checked ? 'index' : 'noindex');\r\n            if (this.UI.robFollow) robParts.push(this.UI.robFollow.checked ? 'follow' : 'nofollow');\r\n            if (this.UI.robNoarchive && this.UI.robNoarchive.checked) robParts.push('noarchive');\r\n            if (this.UI.robNosnippet && this.UI.robNosnippet.checked) robParts.push('nosnippet');\r\n            if (this.UI.robNoimageindex && this.UI.robNoimageindex.checked) robParts.push('noimageindex');\r\n            if (this.UI.robMaxSnippet && this.UI.robMaxSnippet.checked) robParts.push('max-snippet:-1');\r\n            var robots = robParts.join(', ');\r\n\r\n            var lines = ['<!-- \u2550\u2550\u2550 PTH SEO META TAGS STUDIO v2.0 \u2550\u2550\u2550 -->',\r\n                '<!-- \u2500\u2500 Basic Meta \u2500\u2500 -->'];\r\n            if (title) lines.push('<title>' + title + '<\/title>');\r\n            if (desc) lines.push('<meta name=\"description\" content=\"' + desc + '\">');\r\n            if (keywords) lines.push('<meta name=\"keywords\" content=\"' + keywords + '\">');\r\n            if (author) lines.push('<meta name=\"author\" content=\"' + author + '\">');\r\n            if (robots) lines.push('<meta name=\"robots\" content=\"' + robots + '\">');\r\n            if (referrer) lines.push('<meta name=\"referrer\" content=\"' + referrer + '\">');\r\n            if (rating) lines.push('<meta name=\"rating\" content=\"' + rating + '\">');\r\n            lines.push('<meta name=\"viewport\" content=\"' + viewport + '\">');\r\n            lines.push('<meta name=\"theme-color\" content=\"' + themecolor + '\">');\r\n            if (canonical) lines.push('<link rel=\"canonical\" href=\"' + canonical + '\">');\r\n\r\n            lines.push('', '<!-- \u2500\u2500 Open Graph \u2500\u2500 -->');\r\n            if (title) lines.push('<meta property=\"og:title\" content=\"' + title + '\">');\r\n            if (desc) lines.push('<meta property=\"og:description\" content=\"' + desc + '\">');\r\n            if (url) lines.push('<meta property=\"og:url\" content=\"' + url + '\">');\r\n            if (img) lines.push('<meta property=\"og:image\" content=\"' + img + '\">');\r\n            lines.push('<meta property=\"og:type\" content=\"' + ogtype + '\">');\r\n            if (sitename) lines.push('<meta property=\"og:site_name\" content=\"' + sitename + '\">');\r\n            lines.push('<meta property=\"og:locale\" content=\"' + locale + '\">');\r\n\r\n            lines.push('', '<!-- \u2500\u2500 Twitter Card \u2500\u2500 -->');\r\n            lines.push('<meta name=\"twitter:card\" content=\"summary_large_image\">');\r\n            if (title) lines.push('<meta name=\"twitter:title\" content=\"' + title + '\">');\r\n            if (desc) lines.push('<meta name=\"twitter:description\" content=\"' + desc + '\">');\r\n            if (img) lines.push('<meta name=\"twitter:image\" content=\"' + img + '\">');\r\n            if (url) lines.push('<meta name=\"twitter:url\" content=\"' + url + '\">');\r\n            if (handle) lines.push('<meta name=\"twitter:site\" content=\"' + handle + '\">');\r\n\r\n            this.UI.codeOut.textContent = lines.join('\\n');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 COPY SECTION \u2500\u2500\u2500 *\/\r\n        copySectionTags: function (section) {\r\n            var v = this.val.bind(this);\r\n            var title = v(this.UI.inTitle), desc = v(this.UI.inDesc), url = v(this.UI.inUrl), img = v(this.UI.inOgImg);\r\n            var lines = [];\r\n            if (section === 'basic') {\r\n                if (title) lines.push('<title>' + title + '<\/title>');\r\n                if (desc) lines.push('<meta name=\"description\" content=\"' + desc + '\">');\r\n                if (v(this.UI.inKeywords)) lines.push('<meta name=\"keywords\" content=\"' + v(this.UI.inKeywords) + '\">');\r\n                if (v(this.UI.inAuthor)) lines.push('<meta name=\"author\" content=\"' + v(this.UI.inAuthor) + '\">');\r\n            } else if (section === 'og') {\r\n                if (title) lines.push('<meta property=\"og:title\" content=\"' + title + '\">');\r\n                if (desc) lines.push('<meta property=\"og:description\" content=\"' + desc + '\">');\r\n                if (url) lines.push('<meta property=\"og:url\" content=\"' + url + '\">');\r\n                if (img) lines.push('<meta property=\"og:image\" content=\"' + img + '\">');\r\n            } else if (section === 'twitter') {\r\n                lines.push('<meta name=\"twitter:card\" content=\"summary_large_image\">');\r\n                if (title) lines.push('<meta name=\"twitter:title\" content=\"' + title + '\">');\r\n                if (desc) lines.push('<meta name=\"twitter:description\" content=\"' + desc + '\">');\r\n                if (img) lines.push('<meta name=\"twitter:image\" content=\"' + img + '\">');\r\n                if (v(this.UI.inTwitterHandle)) lines.push('<meta name=\"twitter:site\" content=\"' + v(this.UI.inTwitterHandle) + '\">');\r\n            }\r\n            this.copyText(lines.join('\\n'), section.charAt(0).toUpperCase() + section.slice(1) + ' tags');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SOCIAL TABS \u2500\u2500\u2500 *\/\r\n        switchSocial: function (platform) {\r\n            var platforms = ['facebook', 'twitter', 'whatsapp', 'discord'];\r\n            var self = this;\r\n            platforms.forEach(function (p) {\r\n                var el = document.getElementById('pth-social-' + p);\r\n                if (el) el.style.display = (p === platform) ? 'block' : 'none';\r\n            });\r\n            document.querySelectorAll('.pth-social-tab-btn[data-social]').forEach(function (b) {\r\n                b.classList.toggle('pth-active', b.getAttribute('data-social') === platform);\r\n                b.setAttribute('aria-pressed', b.getAttribute('data-social') === platform ? 'true' : 'false');\r\n            });\r\n            this.currentSocial = platform;\r\n        },\r\n\r\n        switchTwitterCard: function (type) {\r\n            var lg = document.getElementById('pth-tw-large-card');\r\n            var sm = document.getElementById('pth-tw-summary-card');\r\n            if (lg) lg.style.display = type === 'large' ? 'block' : 'none';\r\n            if (sm) sm.style.display = type === 'summary' ? 'flex' : 'none';\r\n            document.querySelectorAll('[data-tw]').forEach(function (b) {\r\n                b.classList.toggle('pth-active', b.getAttribute('data-tw') === type);\r\n                b.setAttribute('aria-pressed', b.getAttribute('data-tw') === type ? 'true' : 'false');\r\n            });\r\n            this.currentTwCard = type;\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SCHEMA \u2500\u2500\u2500 *\/\r\n        switchSchema: function (type) {\r\n            var types = ['Article', 'WebPage', 'Organization', 'BreadcrumbList', 'FAQPage', 'Product'];\r\n            types.forEach(function (t) {\r\n                var panel = document.getElementById('pth-schema-' + t);\r\n                if (panel) panel.style.display = (t === type) ? 'block' : 'none';\r\n            });\r\n            document.querySelectorAll('.pth-schema-btn').forEach(function (b) {\r\n                b.classList.toggle('pth-active', b.getAttribute('data-schema') === type);\r\n                b.setAttribute('aria-pressed', b.getAttribute('data-schema') === type ? 'true' : 'false');\r\n            });\r\n            this.currentSchema = type;\r\n        },\r\n\r\n        generateSchema: function () {\r\n            var v = this.val.bind(this);\r\n            var title = v(this.UI.inTitle), desc = v(this.UI.inDesc);\r\n            var url = v(this.UI.inUrl) || 'https:\/\/example.com\/page';\r\n            var img = v(this.UI.inOgImg);\r\n            var type = this.currentSchema;\r\n            var schema = {};\r\n\r\n            if (type === 'Article') {\r\n                schema = { '@context': 'https:\/\/schema.org', '@type': 'Article', headline: title, description: desc, url: url };\r\n                if (img) schema.image = img;\r\n                if (v(this.UI.artAuthor)) schema.author = { '@type': 'Person', name: v(this.UI.artAuthor) };\r\n                if (v(this.UI.artPublisher)) schema.publisher = { '@type': 'Organization', name: v(this.UI.artPublisher), logo: v(this.UI.artLogo) ? { '@type': 'ImageObject', url: v(this.UI.artLogo) } : undefined };\r\n                if (v(this.UI.artDatePub)) schema.datePublished = v(this.UI.artDatePub);\r\n                if (v(this.UI.artDateMod)) schema.dateModified = v(this.UI.artDateMod);\r\n\r\n            } else if (type === 'WebPage') {\r\n                schema = { '@context': 'https:\/\/schema.org', '@type': 'WebPage', name: title, description: desc, url: url };\r\n                if (v(this.UI.wpLang)) schema.inLanguage = v(this.UI.wpLang);\r\n                if (v(this.UI.wpLastreviewed)) schema.lastReviewed = v(this.UI.wpLastreviewed);\r\n\r\n            } else if (type === 'Organization') {\r\n                schema = { '@context': 'https:\/\/schema.org', '@type': 'Organization', name: v(this.UI.orgName) || title, url: url };\r\n                if (v(this.UI.orgLogo)) schema.logo = v(this.UI.orgLogo);\r\n                if (v(this.UI.orgPhone)) schema.telephone = v(this.UI.orgPhone);\r\n                if (v(this.UI.orgEmail)) schema.email = v(this.UI.orgEmail);\r\n                var socials = v(this.UI.orgSocial).split('\\n').filter(function (s) { return s.trim(); });\r\n                if (socials.length) schema.sameAs = socials;\r\n\r\n            } else if (type === 'BreadcrumbList') {\r\n                var breadUrl = v(this.UI.breadUrl) || url;\r\n                var parts = breadUrl.replace(\/https?:\\\/\\\/\/,'').split('\/').filter(Boolean);\r\n                var items = [{ '@type': 'ListItem', position: 1, name: 'Home', item: breadUrl.split('\/').slice(0, 3).join('\/') }];\r\n                var base = breadUrl.split('\/').slice(0, 3).join('\/');\r\n                parts.slice(0, -1).forEach(function (p, i) {\r\n                    base += '\/' + p;\r\n                    items.push({ '@type': 'ListItem', position: i + 2, name: p.replace(\/-\/g, ' ').replace(\/\\b\\w\/g, function (c) { return c.toUpperCase(); }), item: base });\r\n                });\r\n                if (parts.length) items.push({ '@type': 'ListItem', position: items.length + 1, name: (title || parts[parts.length - 1].replace(\/-\/g, ' ')).replace(\/\\b\\w\/g, function (c) { return c.toUpperCase(); }), item: breadUrl });\r\n                schema = { '@context': 'https:\/\/schema.org', '@type': 'BreadcrumbList', itemListElement: items };\r\n\r\n            } else if (type === 'FAQPage') {\r\n                var pairs = [];\r\n                document.querySelectorAll('.pth-faq-pair').forEach(function (pair) {\r\n                    var q = pair.querySelector('.pth-faq-q-input');\r\n                    var a = pair.querySelector('.pth-faq-a-input');\r\n                    if (q && a && q.value.trim() && a.value.trim()) {\r\n                        pairs.push({ '@type': 'Question', name: q.value.trim(), acceptedAnswer: { '@type': 'Answer', text: a.value.trim() } });\r\n                    }\r\n                });\r\n                schema = { '@context': 'https:\/\/schema.org', '@type': 'FAQPage', mainEntity: pairs };\r\n\r\n            } else if (type === 'Product') {\r\n                schema = { '@context': 'https:\/\/schema.org', '@type': 'Product', name: title, description: desc, url: url };\r\n                if (img) schema.image = img;\r\n                if (v(this.UI.prodBrand)) schema.brand = { '@type': 'Brand', name: v(this.UI.prodBrand) };\r\n                if (v(this.UI.prodSku)) schema.sku = v(this.UI.prodSku);\r\n                if (v(this.UI.prodPrice)) schema.offers = { '@type': 'Offer', price: v(this.UI.prodPrice), priceCurrency: this.UI.prodCurrency ? this.UI.prodCurrency.value : 'USD', availability: 'https:\/\/schema.org\/' + (this.UI.prodAvail ? this.UI.prodAvail.value : 'InStock') };\r\n                if (v(this.UI.prodRating)) schema.aggregateRating = { '@type': 'AggregateRating', ratingValue: v(this.UI.prodRating), reviewCount: v(this.UI.prodReviews) || '1', bestRating: '5', worstRating: '1' };\r\n            }\r\n\r\n            var json = JSON.stringify(schema, null, 2);\r\n            var output = '<script type=\"application\/ld+json\">\\n' + json + '\\n<\\\/script>';\r\n            if (this.UI.codeOut) this.UI.codeOut.textContent = output;\r\n            this.copyText(output, 'JSON-LD Schema');\r\n            this.showToast('Schema generated & copied!');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 BREADCRUMB \u2500\u2500\u2500 *\/\r\n        generateBreadcrumb: function () {\r\n            var url = this.val(this.UI.breadUrl) || this.val(this.UI.inUrl);\r\n            if (!url) { this.showToast('Enter a URL first!', 'error'); return; }\r\n            var parts = url.replace(\/https?:\\\/\\\/\/,'').split('\/').filter(Boolean);\r\n            var preview = parts.map(function (p) { return p.replace(\/-\/g, ' ').replace(\/\\b\\w\/g, function (c) { return c.toUpperCase(); }); }).join(' \u203a ');\r\n            if (this.UI.breadPreview) this.UI.breadPreview.textContent = 'Home \u203a ' + preview;\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 FAQ BUILDER \u2500\u2500\u2500 *\/\r\n        initFAQ: function () { this.addFaqPair(); },\r\n        addFaqPair: function () {\r\n            this.faqCount++;\r\n            var n = this.faqCount;\r\n            var self = this;\r\n            var div = document.createElement('div');\r\n            div.className = 'pth-faq-pair';\r\n            div.style.cssText = 'background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-bottom:10px;';\r\n            div.innerHTML = '<div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;\"><span style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;\">Q&A Pair ' + n + '<\/span><button style=\"background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;cursor:pointer;\" class=\"pth-faq-remove-btn\" aria-label=\"Remove FAQ pair ' + n + '\">Remove<\/button><\/div>'\r\n                + '<label style=\"font-size:11px;font-weight:700;color:#334155;display:block;margin-bottom:4px;\" for=\"pth-faq-q-' + n + '\">QUESTION<\/label>'\r\n                + '<input type=\"text\" id=\"pth-faq-q-' + n + '\" class=\"pth-faq-q-input\" placeholder=\"What is your product?\" style=\"width:100%;padding:7px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;margin-bottom:8px;font-family:Inter,sans-serif;\" aria-label=\"FAQ question ' + n + '\">'\r\n                + '<label style=\"font-size:11px;font-weight:700;color:#334155;display:block;margin-bottom:4px;\" for=\"pth-faq-a-' + n + '\">ANSWER<\/label>'\r\n                + '<textarea id=\"pth-faq-a-' + n + '\" class=\"pth-faq-a-input\" rows=\"2\" placeholder=\"Our product is...\" style=\"width:100%;padding:7px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;font-family:Inter,sans-serif;resize:vertical;\" aria-label=\"FAQ answer ' + n + '\"><\/textarea>';\r\n            div.querySelector('.pth-faq-remove-btn').addEventListener('click', function () { div.remove(); });\r\n            if (this.UI.faqContainer) this.UI.faqContainer.appendChild(div);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SEO AUDIT \u2500\u2500\u2500 *\/\r\n        runAudit: function () {\r\n            var v = this.val.bind(this);\r\n            var title = v(this.UI.inTitle), desc = v(this.UI.inDesc);\r\n            var url = v(this.UI.inUrl), img = v(this.UI.inOgImg);\r\n            var canonical = v(this.UI.inCanonical);\r\n            var handle = v(this.UI.inTwitterHandle);\r\n            var sitename = v(this.UI.inSitename);\r\n\r\n            var checks = [\r\n                { label: 'Title tag present', pass: title.length > 0, priority: title.length === 0 },\r\n                { label: 'Title 50\u201360 chars', pass: title.length >= 50 && title.length <= 60, priority: title.length > 0 && (title.length < 50 || title.length > 60) },\r\n                { label: 'Meta description present', pass: desc.length > 0, priority: desc.length === 0 },\r\n                { label: 'Description 120\u2013160 chars', pass: desc.length >= 120 && desc.length <= 160, priority: desc.length > 0 && (desc.length < 120 || desc.length > 160) },\r\n                { label: 'Page URL set', pass: url.length > 0, priority: url.length === 0 },\r\n                { label: 'OG image set', pass: img.length > 0, priority: img.length === 0 },\r\n                { label: 'OG type set', pass: !!(this.UI.inOgtype && this.UI.inOgtype.value), priority: false },\r\n                { label: 'Canonical URL set', pass: canonical.length > 0, priority: canonical.length === 0 },\r\n                { label: 'Twitter handle set', pass: handle.length > 0, priority: false },\r\n                { label: 'Site name set', pass: sitename.length > 0, priority: false },\r\n                { label: 'Index + Follow enabled', pass: !!(this.UI.robIndex && this.UI.robIndex.checked && this.UI.robFollow && this.UI.robFollow.checked), priority: false },\r\n                { label: 'Keywords meta set', pass: v(this.UI.inKeywords).length > 0, priority: false },\r\n                { label: 'Author meta set', pass: v(this.UI.inAuthor).length > 0, priority: false },\r\n                { label: 'Theme color set', pass: !!(this.UI.inThemecolor && this.UI.inThemecolor.value !== '#2563eb'), priority: false },\r\n                { label: 'Viewport meta standard', pass: !!(this.UI.inViewport && this.UI.inViewport.value.indexOf('device-width') >= 0), priority: false }\r\n            ];\r\n\r\n            var passed = checks.filter(function (c) { return c.pass; }).length;\r\n            var total = checks.length;\r\n            var score = Math.round((passed \/ total) * 100);\r\n            var scoreColor = score >= 80 ? '#059669' : score >= 50 ? '#d97706' : '#dc2626';\r\n\r\n            \/* Main audit tab *\/\r\n            if (this.UI.scoreRing) { this.UI.scoreRing.textContent = score; this.UI.scoreRing.style.background = 'conic-gradient(' + scoreColor + ' ' + (score * 3.6) + 'deg, #e2e8f0 0deg)'; }\r\n            if (this.UI.scoreLabel) this.UI.scoreLabel.textContent = score >= 80 ? '\ud83c\udf89 Great SEO!' : score >= 50 ? '\u26a0\ufe0f Needs Work' : '\ud83d\udea8 Critical Issues';\r\n\r\n            if (this.UI.auditChecklist) {\r\n                var html = '';\r\n                checks.forEach(function (c) {\r\n                    html += '<div style=\"display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;margin-bottom:5px;background:' + (c.pass ? '#f0fdf4' : '#fef2f2') + ';border:1px solid ' + (c.pass ? '#bbf7d0' : '#fecaca') + ';\">'\r\n                        + '<span style=\"font-size:14px;\">' + (c.pass ? '\u2705' : '\u274c') + '<\/span>'\r\n                        + '<span style=\"font-size:12px;font-weight:700;color:' + (c.pass ? '#065f46' : '#991b1b') + ';\">' + c.label + '<\/span><\/div>';\r\n                });\r\n                this.UI.auditChecklist.innerHTML = html;\r\n            }\r\n\r\n            var priorities = checks.filter(function (c) { return !c.pass && c.priority; });\r\n            if (this.UI.priorityBox) this.UI.priorityBox.style.display = priorities.length ? 'block' : 'none';\r\n            if (this.UI.priorityList && priorities.length) {\r\n                this.UI.priorityList.innerHTML = priorities.map(function (c) {\r\n                    return '<div style=\"font-size:12px;font-weight:700;color:#991b1b;padding:5px 8px;background:#fef2f2;border-radius:5px;margin-bottom:4px;\">\u26a1 ' + c.label + '<\/div>';\r\n                }).join('');\r\n            }\r\n\r\n            \/* Sidebar score *\/\r\n            if (this.UI.sbScoreRing) { this.UI.sbScoreRing.textContent = score; this.UI.sbScoreRing.style.background = 'conic-gradient(' + scoreColor + ' ' + (score * 3.6) + 'deg, #e2e8f0 0deg)'; }\r\n            if (this.UI.sbScoreLabel) this.UI.sbScoreLabel.textContent = score + '\/100 \u2014 ' + (score >= 80 ? 'Great!' : score >= 50 ? 'Needs work' : 'Fix issues');\r\n            if (this.UI.sbMiniChecks) {\r\n                var mini = checks.slice(0, 5).map(function (c) {\r\n                    return '<div style=\"font-size:11px;color:' + (c.pass ? '#059669' : '#dc2626') + ';font-weight:700;\">' + (c.pass ? '\u2705' : '\u274c') + ' ' + c.label + '<\/div>';\r\n                }).join('');\r\n                this.UI.sbMiniChecks.innerHTML = mini;\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 EXPORT AUDIT \u2500\u2500\u2500 *\/\r\n        exportAudit: function () {\r\n            var v = this.val.bind(this);\r\n            var lines = ['PTH SEO AUDIT REPORT', '====================', 'Generated: ' + new Date().toLocaleString(), '',\r\n                'Title: ' + (v(this.UI.inTitle) || 'Not set'), 'Description: ' + (v(this.UI.inDesc) || 'Not set'), 'URL: ' + (v(this.UI.inUrl) || 'Not set'), ''];\r\n            var codeText = this.UI.codeOut ? this.UI.codeOut.textContent : '';\r\n            lines.push('GENERATED META TAGS:', '--------------------', codeText);\r\n            var blob = new Blob([lines.join('\\n')], { type: 'text\/plain' });\r\n            var a = document.createElement('a');\r\n            a.href = URL.createObjectURL(blob);\r\n            a.download = 'pth-seo-audit.txt';\r\n            a.click();\r\n            this.showToast('Audit report exported!');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SAMPLE \/ CLEAR \u2500\u2500\u2500 *\/\r\n        loadSample: function () {\r\n            var s = this.SAMPLE;\r\n            if (this.UI.inTitle) this.UI.inTitle.value = s.title;\r\n            if (this.UI.inDesc) this.UI.inDesc.value = s.desc;\r\n            if (this.UI.inUrl) this.UI.inUrl.value = s.url;\r\n            if (this.UI.inOgImg) this.UI.inOgImg.value = s.img;\r\n            if (this.UI.inSitename) this.UI.inSitename.value = s.sitename;\r\n            if (this.UI.inAuthor) this.UI.inAuthor.value = s.author;\r\n            if (this.UI.inCanonical) this.UI.inCanonical.value = s.canonical;\r\n            if (this.UI.inKeywords) this.UI.inKeywords.value = 'wordpress, website builder, beginner guide';\r\n            if (this.UI.inTwitterHandle) this.UI.inTwitterHandle.value = '@primetoolhub';\r\n            this.updatePreview();\r\n            this.showToast('Sample data loaded!');\r\n        },\r\n        clearAll: function () {\r\n            var inputs = this.UI.wrapper ? this.UI.wrapper.querySelectorAll('input[type=\"text\"],input[type=\"url\"],textarea,input[type=\"date\"]') : [];\r\n            inputs.forEach(function (el) { el.value = ''; });\r\n            if (this.UI.inOgtype) this.UI.inOgtype.value = 'website';\r\n            if (this.UI.inLocale) this.UI.inLocale.value = 'en_US';\r\n            if (this.UI.inViewport) this.UI.inViewport.value = 'width=device-width, initial-scale=1.0';\r\n            if (this.UI.inReferrer) this.UI.inReferrer.value = '';\r\n            if (this.UI.inRating) this.UI.inRating.value = '';\r\n            if (this.UI.robIndex) this.UI.robIndex.checked = true;\r\n            if (this.UI.robFollow) this.UI.robFollow.checked = true;\r\n            if (this.UI.robNoarchive) this.UI.robNoarchive.checked = false;\r\n            if (this.UI.robNosnippet) this.UI.robNosnippet.checked = false;\r\n            if (this.UI.robNoimageindex) this.UI.robNoimageindex.checked = false;\r\n            if (this.UI.robMaxSnippet) this.UI.robMaxSnippet.checked = false;\r\n            if (this.UI.codeOut) this.UI.codeOut.textContent = '';\r\n            if (this.UI.snippetType) this.UI.snippetType.value = 'none';\r\n            this.updatePreview();\r\n            this.showToast('All fields cleared!');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 EVENTS \u2500\u2500\u2500 *\/\r\n        attachEvents: function () {\r\n            var self = this;\r\n\r\n            \/* Layout *\/\r\n            if (this.UI.fwBtn) this.UI.fwBtn.addEventListener('click', function () {\r\n                if (self.UI.layout) {\r\n                    self.UI.layout.classList.toggle('pth-full-width');\r\n                    self.UI.fwBtn.textContent = self.UI.layout.classList.contains('pth-full-width') ? '\u25c0 Split' : '\u26f6 Full Width';\r\n                }\r\n            });\r\n\r\n            \/* Sample \/ Clear \/ Export *\/\r\n            if (this.UI.sampleBtn) this.UI.sampleBtn.addEventListener('click', function () { self.loadSample(); });\r\n            if (this.UI.clearBtn) this.UI.clearBtn.addEventListener('click', function () { self.clearAll(); });\r\n            if (this.UI.exportBtn) this.UI.exportBtn.addEventListener('click', function () { self.exportAudit(); });\r\n\r\n            \/* Copy \/ Print *\/\r\n            if (this.UI.copyOutBtn) this.UI.copyOutBtn.addEventListener('click', function () {\r\n                var t = self.UI.codeOut ? self.UI.codeOut.textContent : '';\r\n                self.copyText(t, 'Code');\r\n            });\r\n            if (this.UI.printBtn) this.UI.printBtn.addEventListener('click', function () {\r\n                var w = window.open('', '_blank');\r\n                var t = self.UI.codeOut ? self.UI.codeOut.textContent : '';\r\n                w.document.write('<pre style=\"font-family:monospace;padding:30px;font-size:13px;white-space:pre-wrap;\">' + t + '<\/pre>');\r\n                w.document.close(); w.print();\r\n            });\r\n            if (this.UI.copyAllTagsBtn) this.UI.copyAllTagsBtn.addEventListener('click', function () {\r\n                var t = self.UI.codeOut ? self.UI.codeOut.textContent : '';\r\n                self.copyText(t, 'All meta tags');\r\n            });\r\n\r\n            \/* Section copy buttons *\/\r\n            document.querySelectorAll('#pth-seo-studio-wrapper [data-section]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.copySectionTags(btn.getAttribute('data-section')); });\r\n            });\r\n\r\n            \/* Main Tabs *\/\r\n            document.querySelectorAll('.pth-tab-btn[data-tab]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.switchTab(btn.getAttribute('data-tab')); });\r\n            });\r\n\r\n            \/* SERP toggle *\/\r\n            document.querySelectorAll('.pth-serp-toggle-btn[data-serp]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.switchSerp(btn.getAttribute('data-serp')); });\r\n            });\r\n\r\n            \/* Social tabs *\/\r\n            document.querySelectorAll('.pth-social-tab-btn[data-social]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.switchSocial(btn.getAttribute('data-social')); });\r\n            });\r\n\r\n            \/* Twitter card type *\/\r\n            document.querySelectorAll('[data-tw]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.switchTwitterCard(btn.getAttribute('data-tw')); });\r\n            });\r\n\r\n            \/* Schema type *\/\r\n            document.querySelectorAll('.pth-schema-btn[data-schema]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.switchSchema(btn.getAttribute('data-schema')); });\r\n            });\r\n            if (this.UI.genSchemaBtn) this.UI.genSchemaBtn.addEventListener('click', function () { self.generateSchema(); });\r\n            if (this.UI.genBreadBtn) this.UI.genBreadBtn.addEventListener('click', function () { self.generateBreadcrumb(); });\r\n            if (this.UI.addFaqBtn) this.UI.addFaqBtn.addEventListener('click', function () { self.addFaqPair(); });\r\n\r\n            \/* Audit export *\/\r\n            if (this.UI.exportAuditBtn) this.UI.exportAuditBtn.addEventListener('click', function () { self.exportAudit(); });\r\n\r\n            \/* Robots checkboxes *\/\r\n            var robChecks = [this.UI.robIndex, this.UI.robFollow, this.UI.robNoarchive, this.UI.robNosnippet, this.UI.robNoimageindex, this.UI.robMaxSnippet];\r\n            robChecks.forEach(function (cb) {\r\n                if (cb) cb.addEventListener('change', function () { self.updateRobotsPreview(); self.generateCode(); self.runAudit(); });\r\n            });\r\n\r\n            \/* Snippet *\/\r\n            if (this.UI.snippetType) this.UI.snippetType.addEventListener('change', function () { self.updateFeaturedSnippet(); });\r\n            if (this.UI.snippetText) this.UI.snippetText.addEventListener('input', function () { self.updateFeaturedSnippet(); });\r\n\r\n            \/* ALL live inputs \u2192 updatePreview *\/\r\n            var liveInputs = [\r\n                this.UI.inTitle, this.UI.inDesc, this.UI.inUrl, this.UI.inOgImg,\r\n                this.UI.inSitename, this.UI.inOgtype, this.UI.inLocale, this.UI.inTwitterHandle,\r\n                this.UI.inAuthor, this.UI.inCanonical, this.UI.inThemecolor,\r\n                this.UI.inKeywords, this.UI.inViewport, this.UI.inReferrer, this.UI.inRating\r\n            ];\r\n            liveInputs.forEach(function (el) {\r\n                if (el) {\r\n                    el.addEventListener('input', function () { self.updatePreview(); });\r\n                    el.addEventListener('change', function () { self.updatePreview(); });\r\n                }\r\n            });\r\n        }\r\n    };\r\n\r\n    \/* 4-Layer Bootstrap *\/\r\n    function runInit() {\r\n        if (!window.pthSeoStudioApp.initialized && document.getElementById('pth-seo-studio-wrapper')) {\r\n            window.pthSeoStudioApp.initialized = true;\r\n            window.pthSeoStudioApp.init();\r\n        }\r\n    }\r\n    runInit();\r\n    document.addEventListener('DOMContentLoaded', runInit);\r\n    window.addEventListener('load', function () { setTimeout(runInit, 50); });\r\n    var _pthSeoMO = new MutationObserver(function () { runInit(); });\r\n    _pthSeoMO.observe(document.body, { childList: true, subtree: true });\r\n    setTimeout(function () { _pthSeoMO.disconnect(); }, 10000);\r\n\r\n})();\r\n<\/script>\r\n\n\n\n\n<style>\n.pth-feature-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px}\n.pth-feat-box{border:1px solid #e2e8f0;background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);transition:all .3s ease}\n.pth-feat-box:hover{border-color:#bfdbfe;transform:translateY(-3px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.05)}\n.pth-feat-title{font-size:1.05rem;font-weight:800;color:#0f172a;margin-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-feat-text{font-size:.9rem;color:#1e293b;line-height:1.6;margin:0;font-weight:500}\n.pth-steps-wrap{border:1px solid #e2e8f0;background:#fff;padding:40px 30px;border-radius:16px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);margin-bottom:40px}\n.pth-steps-title{font-size:1.2rem;font-weight:800;color:#0f172a;text-transform:uppercase;margin-bottom:35px;letter-spacing:1px}\n.pth-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}\n.pth-step-item{display:flex;flex-direction:column;align-items:center}\n.pth-step-num{width:45px;height:45px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:15px;box-shadow:0 4px 10px rgba(37,99,235,.3)}\n.pth-step-name{font-weight:800;color:#0f172a;margin-bottom:8px;font-size:1rem}\n.pth-step-desc{font-size:.9rem;color:#1e293b;line-height:1.5;margin:0;font-weight:500}\n<\/style>\n\n<div class=\"pth-feature-wrap\">\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe2 Google SERP Preview + Featured Snippet Simulator<\/div>\n        <p class=\"pth-feat-text\">The \ud83d\udd0d SERP tab renders your title and meta description exactly as Google displays them in search results \u2014 with the favicon, breadcrumb URL trail, and date prefix. Toggle between Desktop and Mobile previews with one click: the mobile view narrows to 360px and scales font sizes proportionally to match Android and iPhone screen rendering. The Featured Snippet simulator below the preview lets you paste your target content and preview it as a Paragraph, List, or Table snippet \u2014 the three formats Google uses for position-zero results. Character count bars turn green (ideal range), amber (borderline), or red (over limit) in real time as you type.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udd35 4-Platform Social Card Preview with OG Validator<\/div>\n        <p class=\"pth-feat-text\">The \ud83d\udce3 Social tab previews your Open Graph data across four platforms simultaneously \u2014 Facebook (exact card layout with image, domain, title, description), Twitter\/X (both Summary Large Image and Summary card types), WhatsApp (compact thumbnail link preview), and Discord (dark-mode embed with site name, title, description, and image). An OG Image Checker validates the image URL format. All four previews update live as you type in the core fields. The Open Graph Settings section adds og:type, og:site_name, og:locale, and twitter:site handle for complete tag coverage.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe3 JSON-LD Schema Generator + 15-Point SEO Audit<\/div>\n        <p class=\"pth-feat-text\">The \ud83d\udcca Schema tab generates ready-to-paste JSON-LD for six schema types: Article (with author, publisher, datePublished, logo), WebPage, Organization (with social profiles and contact point), BreadcrumbList (auto-generated from any URL path), FAQPage (add unlimited Q&amp;A pairs dynamically \u2014 the format Google uses to show accordion rich results in SERP), and Product (with price, currency, availability, and AggregateRating). The \u2705 Audit tab runs a 15-point weighted checklist with \u2705 \u274c \u26a0\ufe0f per criterion, calculates an SEO score (0\u2013100), and exports a full audit report as a .txt file.<\/p>\n    <\/div>\n<\/div>\n\n<div class=\"pth-steps-wrap\">\n    <div class=\"pth-steps-title\">How to Use SEO Meta Tags Studio<\/div>\n    <div class=\"pth-steps-grid\">\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">1<\/div>\n            <div class=\"pth-step-name\">Enter Core Fields<\/div>\n            <p class=\"pth-step-desc\">Fill in the Page Title and Meta Description in the always-visible Core Fields panel at the top. Character count bars show green for ideal length (50\u201360 chars for title, 120\u2013160 for description), amber for borderline, and red for over-limit. Enter your Page URL and OG Image URL to activate SERP breadcrumbs, favicon, and social card previews. Click \ud83d\udca1 Load Sample to see a fully populated example with all fields pre-filled.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">2<\/div>\n            <div class=\"pth-step-name\">Preview SERP &amp; Social Cards<\/div>\n            <p class=\"pth-step-desc\">Switch to \ud83d\udd0d SERP to see your Google search result preview \u2014 toggle Desktop vs Mobile. Paste content in the Snippet Content field and pick Paragraph, List, or Table to simulate Featured Snippet formats. Switch to \ud83d\udce3 Social to see Facebook, Twitter\/X, WhatsApp, and Discord previews \u2014 click each platform tab to switch. Add your OG settings (type, site name, locale, Twitter handle) in the Open Graph Settings card below the previews.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">3<\/div>\n            <div class=\"pth-step-name\">Generate Schema<\/div>\n            <p class=\"pth-step-desc\">Switch to \ud83d\udcca Schema. Click a schema type button (Article, WebPage, Organization, Breadcrumb, FAQ, Product). Fill in the type-specific fields \u2014 for Article: author, publisher, dates; for FAQ: click \u2795 Add Question &amp; Answer to build Q&amp;A pairs; for Breadcrumb: paste any URL and click Generate. Click \u26a1 Generate JSON-LD \u2014 the complete <code>&lt;script type=\"application\/ld+json\"&gt;<\/code> block appears in the code output, ready to paste into your page <code>&lt;head&gt;<\/code>.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">4<\/div>\n            <div class=\"pth-step-name\">Audit &amp; Copy<\/div>\n            <p class=\"pth-step-desc\">Switch to \u2705 Audit to run the 15-point SEO checklist. An SEO Score (0\u2013100) shows instantly with color-coded rating. Priority fixes appear in the gold box below the checklist. Click \ud83d\udce4 Export Audit Report to download a .txt file. For meta tags: switch to \ud83d\udcbb Meta Tags, configure the robots builder, then click \ud83d\udccb Copy All Tags \u2014 or use the per-section copy buttons (Basic \/ OG \/ Twitter) to copy each group separately.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Last updated: June 2026<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-why-open-graph-tags-control-your-social-share-appearance\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>Why Open Graph Tags Control Your Social Share Appearance<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When someone shares a URL on Facebook, LinkedIn, Twitter, WhatsApp, Discord, or Slack, those platforms don&#8217;t display the raw URL. They make an HTTP request to the page, parse the HTML for Open Graph meta tags in the&nbsp;<code>&lt;head&gt;<\/code>, and render a rich preview card with image, title, and description. Without OG tags, platforms fall back to guessing \u2014 pulling the first image on the page, the&nbsp;<code>&lt;title&gt;<\/code>&nbsp;tag, and a random paragraph of text. The result is often a broken card with a logo, an unrelated image, or no image at all. OG tags give you precise control over exactly how your content appears when shared \u2014 which directly affects click-through rate from social platforms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The minimum viable Open Graph tag set for a shared page is four properties:&nbsp;<code>og:title<\/code>,&nbsp;<code>og:description<\/code>,&nbsp;<code>og:image<\/code>, and&nbsp;<code>og:url<\/code>. Facebook caches OG tags aggressively \u2014 once a URL is shared with a broken image, that broken image shows in Facebook&#8217;s cache until you use the&nbsp;<a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\" rel=\"noreferrer noopener\" target=\"_blank\">Facebook Sharing Debugger<\/a>&nbsp;to force a re-scrape. For this reason, getting OG tags correct before a piece of content goes live is important. The&nbsp;<code>og:image<\/code>&nbsp;should be an absolute URL (not relative), ideally 1200\u00d7630 pixels, under 8MB in size, in JPEG or PNG format, and accessible without authentication or redirect chains.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-json-ld-schema-markup-what-it-is-and-how-google-uses-it\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>JSON-LD Schema Markup \u2014 What It Is and How Google Uses It<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Schema markup is structured data that tells search engines the meaning of your content \u2014 not just what the words say, but what type of entity the page describes. Google supports two formats: Microdata (inline HTML attributes) and JSON-LD (a separate&nbsp;<code>&lt;script&gt;<\/code>&nbsp;block in the&nbsp;<code>&lt;head&gt;<\/code>). Google&#8217;s official recommendation is JSON-LD because it doesn&#8217;t require modifying the visible HTML content and is easier to maintain. JSON-LD follows the&nbsp;<a href=\"https:\/\/schema.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">Schema.org<\/a>&nbsp;vocabulary \u2014 a joint project of Google, Bing, Yahoo, and Yandex that defines standard types like Article, Product, FAQPage, Organization, and BreadcrumbList.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The practical impact of schema markup: Google may use it to generate rich results \u2014 enhanced SERP appearances beyond the standard title, description, and URL. An Article schema enables byline and date display. A FAQPage schema can produce an accordion of questions directly in the search result \u2014 expanding without a click and occupying significantly more vertical space in the SERP. A Product schema with AggregateRating can show star ratings, price, and availability. BreadcrumbList schema overrides Google&#8217;s auto-generated breadcrumb trail in your result. None of these are guaranteed \u2014 Google chooses when to show rich results \u2014 but providing accurate schema markup is a prerequisite.<\/p>\n\n\n\n<h3 id=\"\ud83d\udfe2-article-schema-required-fields-for-e-e-a-t-signals\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Article Schema \u2014 Required Fields for E-E-A-T Signals<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Google&#8217;s E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) guidelines give weight to who wrote a piece of content and who published it. The Article schema&#8217;s&nbsp;<code>author<\/code>&nbsp;property establishes authorship \u2014 linking to an author page via&nbsp;<code>@id<\/code>&nbsp;creates an author entity that Google can associate with a named person&#8217;s credentials. The&nbsp;<code>publisher<\/code>&nbsp;property with a&nbsp;<code>logo<\/code>&nbsp;establishes the publishing organization.&nbsp;<code>datePublished<\/code>&nbsp;and&nbsp;<code>dateModified<\/code>&nbsp;in ISO 8601 format (<code>YYYY-MM-DD<\/code>&nbsp;or full&nbsp;<code>2025-06-15T09:00:00+00:00<\/code>) help Google understand content freshness \u2014 important for time-sensitive queries where recency is a ranking factor. The&nbsp;<code>headline<\/code>&nbsp;property should match your&nbsp;<code>&lt;h1&gt;<\/code>&nbsp;tag \u2014 discrepancies between schema and on-page content can reduce schema trust signals.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd35\u00a0<strong>FAQPage schema<\/strong>\u00a0requires each question to be wrapped in a\u00a0<code>Question<\/code>\u00a0type with a single\u00a0<code>acceptedAnswer<\/code>. Google typically shows 2\u20133 questions in the SERP accordion. The questions should match the actual H2\/H3 headings on the page \u2014 if the schema FAQs don&#8217;t appear in the visible content, Google may not show the rich result.<\/li>\n\n\n\n<li>\ud83d\udfe0\u00a0<strong>BreadcrumbList schema<\/strong>\u00a0should mirror the actual URL hierarchy exactly. If your URL is\u00a0<code>example.com\/blog\/seo\/meta-tags<\/code>, the breadcrumb items should be Home \u2192 Blog \u2192 SEO \u2192 Meta Tags. Mismatches between schema breadcrumbs and visual breadcrumbs can cause Google to ignore the schema.<\/li>\n\n\n\n<li>\ud83d\udfe3\u00a0<strong>Product schema<\/strong>\u00a0requires AggregateRating data to display star ratings in SERP. The\u00a0<code>ratingValue<\/code>\u00a0must be within the\u00a0<code>bestRating<\/code>\/<code>worstRating<\/code>\u00a0range. Fabricated ratings are a violation of Google&#8217;s guidelines and can result in a manual action penalty.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"\ud83d\udfe1-robots-meta-tag-every-directive-explained\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>Robots Meta Tag \u2014 Every Directive Explained<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The robots meta tag (<code>&lt;meta name=\"robots\" content=\"...\"&gt;<\/code>) gives page-level crawling and indexing instructions to search engine bots. It overrides&nbsp;<code>robots.txt<\/code>&nbsp;at the page level \u2014 a page disallowed in&nbsp;<code>robots.txt<\/code>&nbsp;can&#8217;t be crawled, but a page accessible to crawlers can use the meta robots tag to prevent indexing. The key directives:&nbsp;<strong>index\/noindex<\/strong>&nbsp;controls whether the page appears in search results.&nbsp;<strong>follow\/nofollow<\/strong>&nbsp;controls whether link equity passes through the links on the page to their destinations. These two are independent \u2014 a page can be indexed but have its links nofollowed, or be noindexed but its links followed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>noarchive<\/strong>&nbsp;prevents Google from storing and showing a cached copy of the page.&nbsp;<strong>nosnippet<\/strong>&nbsp;prevents Google from showing a description snippet in the SERP \u2014 the result shows title and URL only.&nbsp;<strong>noimageindex<\/strong>&nbsp;prevents images on the page from appearing in Google Images.&nbsp;<strong>max-snippet:-1<\/strong>&nbsp;tells Google it can show any length snippet \u2014 removing the default length restriction. The full combined directive for a standard indexable page:&nbsp;<code>content=\"index, follow, max-snippet:-1\"<\/code>. For tag pages, author archives, or paginated pages that shouldn&#8217;t appear in search:&nbsp;<code>content=\"noindex, follow\"<\/code>&nbsp;\u2014 nofollowing on archive pages discards link equity unnecessarily. Use our&nbsp;SEO Meta Tags Studio&nbsp;to build the exact robots string you need, then verify it in the \u2705 Audit tab. For a deeper look at all meta tag types check our&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/seo-meta-tags-complete-guide\/\">complete SEO meta tags guide<\/a>.<\/p>\n\n\n\n<style>\n.pth-faq-section{margin-top:50px;margin-bottom:40px;font-family:inherit}\n.pth-faq-header{font-size:1.8rem;font-weight:800;color:#0f172a;margin-bottom:25px;border-bottom:2px solid #e2e8f0;padding-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-faq-grid{display:grid;grid-template-columns:100%;gap:20px}\n@media(min-width:768px){.pth-faq-grid{grid-template-columns:repeat(2,1fr)}}\n@media(min-width:1024px){.pth-faq-grid{grid-template-columns:repeat(3,1fr)}}\n.pth-faq-card{background:#f8fafc;padding:24px;border-radius:12px;border:1px solid #e2e8f0;transition:transform .2s ease;break-inside:avoid}\n.pth-faq-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.05)}\n.pth-faq-q{color:#0f172a;font-size:1rem;font-weight:700;margin:0 0 12px;line-height:1.4}\n.pth-faq-a{margin:0;font-size:.95rem;color:#1e293b;line-height:1.6;font-weight:500}\n<\/style>\n\n<div class=\"pth-faq-section\">\n    <div class=\"pth-faq-header\">\ud83e\udd14 Frequently Asked Questions<\/div>\n    <div class=\"pth-faq-grid\">\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What is the ideal og:image size for social sharing?<\/p>\n            <p class=\"pth-faq-a\">The recommended og:image size is 1200\u00d7630 pixels \u2014 a 1.91:1 aspect ratio. Facebook renders this as a full-width card image above the title and description. Twitter&#8217;s large image card uses the same 1.91:1 ratio. Images smaller than 600\u00d7315 may render as thumbnails instead of full cards on some platforms. Keep the file under 8MB and use JPEG or PNG format \u2014 WebP is not universally supported by all social crawlers. Place important content in the centre 60% of the image to avoid cropping on square previews (WhatsApp, Instagram).<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Does schema markup directly improve Google rankings?<\/p>\n            <p class=\"pth-faq-a\">Schema markup is not a direct ranking factor \u2014 adding JSON-LD to a page does not cause Google to rank it higher for target keywords. Its value is indirect: rich results (star ratings, FAQ accordions, breadcrumbs) increase click-through rate from the SERP, and higher CTR at a given ranking position sends a positive relevance signal. Article schema with accurate author and publisher data contributes to E-E-A-T signals. The most measurable impact is through FAQ and Product schema, which can visually expand a result&#8217;s SERP footprint and significantly increase organic CTR.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What is the difference between robots.txt and the robots meta tag?<\/p>\n            <p class=\"pth-faq-a\">robots.txt controls whether Google&#8217;s crawler can access a URL at all \u2014 a disallowed URL won&#8217;t be crawled or indexed. The robots meta tag controls what Google does with a page it has already crawled: whether to index it, show a snippet, cache it, or pass link equity through its links. An important nuance: a URL blocked in robots.txt cannot be noindexed via meta robots \u2014 Google never crawls the page to read the tag. To noindex a page, it must be accessible to crawlers (not blocked in robots.txt) but have <code>content=\"noindex\"<\/code> in the meta robots tag.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Why does Facebook show an old image even after I updated og:image?<\/p>\n            <p class=\"pth-faq-a\">Facebook caches Open Graph data aggressively \u2014 sometimes for weeks. After updating your og:image, use Facebook&#8217;s Sharing Debugger tool (search &#8220;Facebook Sharing Debugger&#8221;) and paste your URL, then click &#8220;Scrape Again.&#8221; This forces Facebook to re-fetch your page&#8217;s OG tags and update the cache. LinkedIn has its own Post Inspector tool for the same purpose. Twitter\/X re-scrapes URLs more frequently and typically shows updated cards within a few hours without manual intervention.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">How many FAQ schema questions should I include on a page?<\/p>\n            <p class=\"pth-faq-a\">Google typically displays 2\u20133 questions in the SERP FAQ accordion, even if your schema includes more. Including 4\u20138 well-written questions is a practical range \u2014 enough for Google to select the most relevant ones for a given query. Each question must appear as visible text on the page (not just in the schema) \u2014 Google may reject FAQ rich results if the questions exist only in the JSON-LD but not in the page content. Questions should be specific and answerable in one or two sentences in the accordions.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What&#8217;s the difference between twitter:card types?<\/p>\n            <p class=\"pth-faq-a\"><code>summary_large_image<\/code> shows a full-width image above the title and description \u2014 the format used for blog posts, articles, and content marketing. <code>summary<\/code> shows a small square thumbnail to the left of the title and description \u2014 appropriate for simple links, profile pages, or product listings where a large image isn&#8217;t necessary. Both require the <code>twitter:title<\/code>, <code>twitter:description<\/code>, and <code>twitter:image<\/code> properties. The Twitter card preview in the Social tab shows how each type renders before you commit to one.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">When should I use noindex on a page?<\/p>\n            <p class=\"pth-faq-a\">Use <code>noindex<\/code> on pages that provide no unique value to search visitors: tag archives, date archives, author pages with only 1\u20132 posts, paginated results pages beyond page 2, thank-you\/confirmation pages, login and account pages, duplicate content pages, and staging or preview URLs accidentally exposed to crawlers. Noindexing thin content pages prevents crawl budget waste and keeps Google&#8217;s index focused on your strongest content \u2014 which can positively affect overall site quality signals.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Should og:title match the page&#8217;s HTML title tag exactly?<\/p>\n            <p class=\"pth-faq-a\">They should be consistent but don&#8217;t need to be identical. The HTML <code>&lt;title&gt;<\/code> tag is optimised for Google&#8217;s SERP display (60-character target). The og:title is optimised for social card display (Facebook shows approximately 70 characters). A common pattern: the HTML title includes the site name suffix (&#8220;How to Write Meta Tags | MySite&#8221;) while og:title omits it (&#8220;How to Write Meta Tags&#8221;) since Facebook displays the domain separately. Significant mismatches between the two \u2014 different topics, contradictory information \u2014 can reduce trust signals from social platforms and search engines.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Does adding a canonical URL affect how social platforms fetch my OG tags?<\/p>\n            <p class=\"pth-faq-a\">The canonical tag (<code>&lt;link rel=\"canonical\"&gt;<\/code>) is a signal for search engines, not social platform crawlers. Facebook, Twitter, and WhatsApp crawlers read OG tags from whichever URL is shared, regardless of canonical. However, if a non-canonical URL is shared (e.g., a URL with tracking parameters like <code>?utm_source=email<\/code>) and that URL redirects or includes the canonical OG tags, the platform typically follows the redirect and reads OG tags from the final URL. Always include canonical URLs in your meta tags \u2014 the SEO Audit tab checks for this specifically.<\/p>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Free SEO Meta Tags Generator &#038; Social Preview Studio Use our free SEO meta tags generator to instantly create, preview, and copy HTML tags for Google, Facebook Open Graph, and Twitter Cards 100% offline. \ud83d\udfe2 Google SERP Preview + Featured Snippet Simulator The \ud83d\udd0d SERP tab renders your title and meta description exactly as Google &#8230; <a title=\"Free SEO Meta Tags Generator &amp; Social Preview Studio\" class=\"read-more\" href=\"https:\/\/schoolict.net\/tools\/free-seo-meta-tags-generator-preview\/\" aria-label=\"Read more about Free SEO Meta Tags Generator &amp; Social Preview Studio\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3341,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2449","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/2449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=2449"}],"version-history":[{"count":1,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/2449\/revisions"}],"predecessor-version":[{"id":7097,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/2449\/revisions\/7097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media\/3341"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=2449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}