<section class="diZContainer diZmxAuto diZmy4">
    <h1 class="diZBorderBottom">Open Graph Meta Generator</h1>
    <p class="diZTextJustify">The Open Graph Meta Generator is a tool designed to help web developers and content creators easily generate meta tags for optimizing content sharing on social media platforms like Facebook and Twitter. By filling out a simple form, users can create the necessary Open Graph and Twitter meta tags to enhance the visibility and appearance of their web pages when shared online.</p>
    <div class="diZFlexColumn diZMaxW600 diZmxAuto diZmy20 toolsSection">
        <form class="diZFlexColumn" id="metaForm">
            <div class="diZFlexColumn diZmt2">
                <label for="ogTitle" class="form-label">Title:</label>
                <input type="text" id="ogTitle" name="ogTitle" class="" required>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="ogDescription" class="form-label">Description:</label>
                <textarea id="ogDescription" name="ogDescription" class="diZTextAreaResizeNone" rows="4" required></textarea>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="ogImage" class="form-label">Image URL:</label>
                <input type="text" id="ogImage" name="ogImage" class="" required>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="ogUrl" class="form-label">URL:</label>
                <input type="text" id="ogUrl" name="ogUrl" class="" required>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="author" class="form-label">Author:</label>
                <input type="text" id="author" name="author" class="" required>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="keywords" class="form-label">Keywords:</label>
                <input type="text" id="keywords" name="keywords" class="" required>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="twitterTitle" class="form-label">Twitter Title:</label>
                <input type="text" id="twitterTitle" name="twitterTitle" class="" required>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="twitterDescription" class="form-label">Twitter Description:</label>
                <textarea id="twitterDescription" name="twitterDescription" class="diZTextAreaResizeNone" rows="4" required></textarea>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="twitterImage" class="form-label">Twitter Image URL:</label>
                <input type="text" id="twitterImage" name="twitterImage" class="" required>
            </div>
            <div class="diZFlexColumn diZmt2">
                <label for="twitterCard" class="form-label">Twitter Card Type:</label>
                <select id="twitterCard" name="twitterCard" class="" required>
                    <option value="summary">Summary</option>
                    <option value="summary_large_image">Summary Large Image</option>
                </select>
            </div>
            <div class="diZFlexColumn diZmt2">
                <div class="diZDisplayNone generated-meta-tags" id="generatedMetaTags"></div>
                <p class="diZDisplayNone" id="copied-notice"></p>
            </div>
            <div class="diZFlexBetween diZmt2">
                <button type="submit" class="button-style"><span>Generate</span></button>
                <button id="copyButton" class="button-style" onclick="copyToClipboard()"><span>Copy</span></button>
            </div>
        </form>
    </div>
    <h2 class="diZBorderBottom">Content Limitations</h2>
    <p>Understanding the character and word limits for various platforms and meta tags is crucial for optimizing your content. The following table provides a comprehensive guide to these limitations, ensuring that your content adheres to the best practices for SEO and social media sharing.</p>
    <table class="diZw70 diZmxAuto">
    <tr>
      <th class="diZTableBorder diZPadding5px">Name</th>
      <th class="diZTableBorder diZPadding5px">Min/Max</th>
      <th class="diZTableBorder diZPadding5px">Limit</th>
      <th class="diZTableBorder diZPadding5px">Type</th>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Meta Title</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">55</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Meta Description</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">160</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Google Ideal Post Content</td>
      <td class="diZTableBorder diZPadding5px">Min</td>
      <td class="diZTableBorder diZPadding5px">300</td>
      <td class="diZTableBorder diZPadding5px">Word</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Instagram Captions/Comments</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">2200</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Twitter Post</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">280</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Twitter Username</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">20</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Facebook Wall Post (Truncation)</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">477</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Facebook Wall Post (All)</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">63206</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Facebook Comment</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">8000</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Facebook Page Description</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">255</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Facebook Username</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">50</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Facebook Messenger Message</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">20000</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">YouTube Video Title</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">70</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">YouTube Video Description</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">5000</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Snapchat Caption</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">250</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
    <tr>
      <td class="diZTableBorder diZPadding5px">Pinterest Pin Description</td>
      <td class="diZTableBorder diZPadding5px">Max</td>
      <td class="diZTableBorder diZPadding5px">500</td>
      <td class="diZTableBorder diZPadding5px">Letter</td>
    </tr>
  </table>
  <div>
    <h3>Usage:</h3>
    <ul>
        <li><strong>Enter Information:</strong> Input the required information, including Title, Description, Image URL, URL, Author, Keywords, Twitter Title, Twitter Description, Twitter Image URL, and Twitter Card Type, into the respective fields in the form.</li>
        <li><strong>Generate Meta Tags:</strong> Click the "Generate" button to create the Open Graph and Twitter meta tags based on the provided information.</li>
        <li><strong>Copy Meta Tags:</strong> The generated meta tags will appear in the output area. Click the "Copy" button to copy the meta tags to your clipboard.</li>
        <li><strong>Paste and Use:</strong> Paste the copied meta tags into the head section of your HTML document to enhance your webpage's social media integration and SEO.</li>
    </ul>

    <h3>Features:</h3>
    <ul>
        <li>Generates Open Graph meta tags for improved social media sharing.</li>
        <li>Generates Twitter meta tags for optimized content sharing on Twitter.</li>
        <li>Provides a clear and user-friendly form to input all necessary information.</li>
        <li>Includes a "Copy to Clipboard" function for easy integration into your HTML code.</li>
        <li>Displays a "Meta tags copied to clipboard!" notification upon copying.</li>
    </ul>

    <h3>Example Use Cases:</h3>
    <ul>
        <li>Web developers optimizing websites for social media sharing.</li>
        <li>Content creators ensuring their articles and posts are displayed attractively on social media platforms.</li>
        <li>SEO specialists enhancing webpage metadata for better search engine rankings.</li>
        <li>Bloggers and marketers improving the visibility and engagement of their content on social media.</li>
    </ul>
</div>

</section>

<script>
    const form = document.getElementById('metaForm');
    const generatedMetaTags = document.getElementById('generatedMetaTags');
    const copiedNotice = document.getElementById('copied-notice');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        const ogTitle = document.getElementById('ogTitle').value.trim();
        const ogDescription = document.getElementById('ogDescription').value.trim();
        const ogImage = document.getElementById('ogImage').value.trim();
        const ogUrl = document.getElementById('ogUrl').value.trim();
        const author = document.getElementById('author').value.trim();
        const keywords = document.getElementById('keywords').value.trim();
        const twitterTitle = document.getElementById('twitterTitle').value.trim();
        const twitterDescription = document.getElementById('twitterDescription').value.trim();
        const twitterImage = document.getElementById('twitterImage').value.trim();
        const twitterCard = document.getElementById('twitterCard').value.trim();

        const metaTags = `
            <title>${ogTitle}</title>
            <meta name="description" content="${ogDescription}">
            <meta name="keywords" content="${keywords}">
            <meta name="author" content="${author}">
            <meta property="og:title" content="${ogTitle}">
            <meta property="og:description" content="${ogDescription}">
            <meta property="og:image" content="${ogImage}">
            <meta property="og:url" content="${ogUrl}">
            <meta name="twitter:title" content="${twitterTitle}">
            <meta name="twitter:description" content="${twitterDescription}">
            <meta name="twitter:image" content="${twitterImage}">
            <meta name="twitter:card" content="${twitterCard}">
        `;
        
        if(metaTags.length > 20) {
            generatedMetaTags.style.display = "block";
        }
        
        generatedMetaTags.innerText = `${metaTags}`;
    });

    function copyToClipboard() {
        const metaTags = document.getElementById('generatedMetaTags');
        const textarea = document.createElement('textarea');
        textarea.value = metaTags.innerText;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        copiedNotice.style.display = 'block';
        copiedNotice.innerHTML = 'Meta tags copied to clipboard!';

        setTimeout(() => {
            copiedNotice.style.display = 'none';
        }, 3000);
    }
</script>