250 lines
13 KiB
PHP
250 lines
13 KiB
PHP
<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> |