<h1>Meta Tag Generator</h1> <p class="sub">Generate perfect Open Graph and Twitter Card meta tags for social sharing.</p> <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px"> <div><label>Page Title</label><input type="text" id="mt-title" placeholder="My Awesome Page" oninput="updatePreview()"></div> <div><label>Site URL</label><input type="url" id="mt-url" placeholder="https://example.com/page" oninput="updatePreview()"></div> <div style="grid-column:span 2"><label>Description</label><textarea id="mt-desc" rows="2" placeholder="A brief description of your page..." oninput="updatePreview()"></textarea></div> <div><label>Image URL</label><input type="url" id="mt-image" placeholder="https://example.com/image.jpg" oninput="updatePreview()"></div> <div><label>Site Name</label><input type="text" id="mt-site" placeholder="My Website" oninput="updatePreview()"></div> </div> <div class="result" id="result" style="display:block"> <h3>Generated Meta Tags</h3> <div class="output" id="output"></div> <button class="copy-btn" onclick="copyMeta()">Copy to Clipboard</button> <h3 style="margin-top:16px">Social Preview</h3> <div style="background:#1a1a1a;border-radius:8px;padding:16px;margin-top:8px"> <div id="preview-img" style="width:100%;height:120px;background:#222;border-radius:6px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#666">No image</div> <div id="preview-title" style="color:#fff;font-weight:600;margin-bottom:4px">Your Title Here</div> <div id="preview-desc" style="color:#999;font-size:.9rem">Your description here...</div> <div id="preview-url" style="color:#666;font-size:.8rem;margin-top:4px">example.com</div> </div> </div>