SEO Title and Meta Description Generator
.seo-meta-tool-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
}
.seo-meta-tool-container * {
box-sizing: border-box;
}
.seo-tool-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f1f5f9;
}
.seo-tool-header h2 {
color: #1e293b;
margin: 0 0 8px 0;
font-size: 28px;
font-weight: 700;
}
.seo-tool-header p {
color: #64748b;
margin: 0;
font-size: 16px;
}
.seo-form {
margin-bottom: 30px;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
font-size: 14px;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
background: #ffffff;
font-family: inherit;
}
.form-group input[type="text"]:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.char-counter {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
text-align: right;
}
.help-text {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
}
.error-message {
color: #ef4444;
font-size: 12px;
margin-top: 4px;
display: none;
}
.generate-btn {
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.generate-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.btn-text {
display: inline-block;
transition: opacity 0.3s ease;
}
.btn-loader {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
}
.generate-btn.loading .btn-text {
display: none;
}
.generate-btn.loading .btn-loader {
display: flex;
}
.spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.results-section {
display: none;
margin-top: 30px;
}
.results-section.show {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.results-section h3 {
color: #1e293b;
margin-bottom: 20px;
font-size: 22px;
font-weight: 700;
}
.result-group {
margin-bottom: 30px;
}
.result-group h4 {
color: #374151;
margin-bottom: 12px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.result-item {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
transition: all 0.3s ease;
}
.result-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.result-content {
margin-bottom: 12px;
font-size: 14px;
line-height: 1.5;
color: #1e293b;
}
.result-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.char-count {
font-size: 12px;
font-weight: 500;
padding: 4px 8px;
border-radius: 4px;
}
.char-count.good {
background: #dcfce7;
color: #166534;
}
.char-count.warning {
background: #fef3c7;
color: #92400e;
}
.char-count.error {
background: #fecaca;
color: #991b1b;
}
.copy-btn {
background: #10b981;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: #059669;
}
.copy-btn.copied {
background: #374151;
}
.slug-item {
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 12px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Courier New', monospace;
font-size: 14px;
}
.slug-item code {
background: none;
padding: 0;
color: #1e293b;
font-weight: 500;
}
.error-section {
display: none;
margin-top: 30px;
padding: 20px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
}
.error-section.show {
display: block;
}
.error-content h4 {
color: #991b1b;
margin-bottom: 12px;
font-size: 16px;
}
.error-content p {
color: #7f1d1d;
margin-bottom: 16px;
line-height: 1.5;
}
.retry-btn {
background: #ef4444;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.retry-btn:hover {
background: #dc2626;
}
/* Responsive Design */
@media (max-width: 768px) {
.seo-meta-tool-container {
margin: 10px;
padding: 16px;
}
.seo-tool-header h2 {
font-size: 24px;
}
.form-group input[type="text"],
.form-group textarea {
padding: 10px 14px;
font-size: 16px; /* Prevents zoom on iOS */
}
.generate-btn {
padding: 14px 20px;
font-size: 16px;
}
.result-actions {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.copy-btn {
width: 100%;
padding: 8px;
}
}
@media (max-width: 480px) {
.seo-meta-tool-container {
margin: 5px;
padding: 12px;
}
.seo-tool-header h2 {
font-size: 20px;
}
.result-group h4 {
font-size: 14px;
}
}
// Global variables
let isGenerating = false;
let lastFormData = null;
// Initialize the tool
document.addEventListener('DOMContentLoaded', function() {
initializeForm();
setupEventListeners();
});
function initializeForm() {
const form = document.getElementById('seoForm');
const pageContent = document.getElementById('pageContent');
const contentCounter = document.getElementById('contentCounter');
// Setup character counter for page content
pageContent.addEventListener('input', function() {
const charCount = this.value.length;
contentCounter.textContent = `${charCount} characters`;
});
// Setup form validation
form.addEventListener('submit', handleFormSubmit);
}
function setupEventListeners() {
// Reset error states when user starts typing
document.getElementById('businessName').addEventListener('input', function() {
clearError('businessNameError');
});
document.getElementById('pageContent').addEventListener('input', function() {
clearError('pageContentError');
});
}
function handleFormSubmit(e) {
e.preventDefault();
if (isGenerating) return;
const formData = validateForm();
if (!formData) return;
lastFormData = formData;
generateSEOContent(formData);
}
function validateForm() {
const businessName = document.getElementById('businessName').value.trim();
const pageContent = document.getElementById('pageContent').value.trim();
const targetKeywords = document.getElementById('targetKeywords').value.trim();
let isValid = true;
// Clear previous errors
clearError('businessNameError');
clearError('pageContentError');
// Validate business name
if (!businessName) {
showError('businessNameError', 'Business name is required');
isValid = false;
}
// Validate page content
if (!pageContent) {
showError('pageContentError', 'Page content is required');
isValid = false;
} else if (pageContent.length ({}));
throw new Error(`API request failed: ${response.status} - ${errorData.message || 'Unknown error'}`);
}
const data = await response.json();
if (!data.choices || !data.choices[0] || !data.choices[0].message) {
throw new Error('Invalid response format from OpenAI API');
}
return data.choices[0].message.content;
}
function parseAIResponse(response) {
try {
const lines = response.split('\n').filter(line => line.trim());
const results = {
titles: [],
descriptions: [],
slugs: []
};
for (const line of lines) {
if (line.startsWith('Title 1:')) {
results.titles[0] = line.replace('Title 1:', '').trim();
} else if (line.startsWith('Title 2:')) {
results.titles[1] = line.replace('Title 2:', '').trim();
} else if (line.startsWith('Meta Description 1:')) {
results.descriptions[0] = line.replace('Meta Description 1:', '').trim();
} else if (line.startsWith('Meta Description 2:')) {
results.descriptions[1] = line.replace('Meta Description 2:', '').trim();
} else if (line.startsWith('/')) {
results.slugs.push(line.trim());
}
}
// Validate we have the required content
if (results.titles.length < 2 || results.descriptions.length = 50 && charCount = 40 && charCount = 130 && charCount = 120 && charCount {
const slugElement = document.createElement('div');
slugElement.className = 'slug-item';
slugElement.innerHTML = `
${slug}
`;
slugContainer.appendChild(slugElement);
});
}
function copyToClipboard(contentId, button, isDirectText = false) {
let textToCopy;
if (isDirectText) {
textToCopy = contentId;
} else {
const element = document.getElementById(contentId);
textToCopy = element.textContent;
}
navigator.clipboard.writeText(textToCopy).then(() => {
const originalText = button.textContent;
button.textContent = 'Copied!';
button.classList.add('copied');
setTimeout(() => {
button.textContent = originalText;
button.classList.remove('copied');
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = textToCopy;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy';
}, 2000);
});
}
function setLoadingState(loading) {
const generateBtn = document.getElementById('generateBtn');
isGenerating = loading;
generateBtn.disabled = loading;
if (loading) {
generateBtn.classList.add('loading');
} else {
generateBtn.classList.remove('loading');
}
}
function showResults() {
const resultsSection = document.getElementById('resultsSection');
resultsSection.classList.add('show');
// Scroll to results
resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function hideResults() {
const resultsSection = document.getElementById('resultsSection');
resultsSection.classList.remove('show');
}
function showErrorSection(message) {
const errorSection = document.getElementById('errorSection');
const errorMessage = document.getElementById('errorMessage');
errorMessage.textContent = message;
errorSection.classList.add('show');
// Scroll to error
errorSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function hideError() {
const errorSection = document.getElementById('errorSection');
errorSection.classList.remove('show');
}
function getErrorMessage(error) {
if (error.message.includes('fetch')) {
return 'Network error: Please check your internet connection and try again.';
} else if (error.message.includes('API request failed')) {
return 'API error: There was an issue with the OpenAI service. Please try again in a few moments.';
} else if (error.message.includes('parse')) {
return 'Response parsing error: The AI response was not in the expected format. Please try again.';
} else {
return error.message || 'An unexpected error occurred. Please try again.';
}
}
function retryGeneration() {
if (lastFormData) {
generateSEOContent(lastFormData);
}
}
Want to make your website stand out in search results? This SEO Title and Meta Description Generator is the perfect tool for crafting professional, SEO-friendly content in seconds. Powered by AI, it’s designed to save you time and boost your site’s visibility—ideal for building a strong online presence.
How to Use the Tool?
Enter Your Business Name
Simply type in your business or personal name to get started. This helps us customize your SEO content for better relevance.
Paste Content from Page
Copy and paste content from any page on your website that you want to generate meta titles and descriptions for. This allows the tool to tailor the meta tags to match your unique offerings.
Add Focus Keywords (Optional)
For even more precision, include any keywords you'd like to target. The more specific, the better the SEO results!
Click ‘Generate’
Hit the Generate button and let the AI work its magic! You'll get two SEO-friendly titles and descriptions in just a moment.
Copy & Paste
Review the results and copy your new titles and descriptions. Paste them into your website to start optimizing for search engines!
Use Cases
Our SEO Title and Meta Description Generator is perfect for:
- Personal Portfolios: Quickly optimize your “About Me” and “Services” pages for search engines.
- Small Business Websites: Get the perfect meta titles and descriptions for service pages, contact pages, and more.
- Bloggers & Content Creators: Create SEO-friendly content for your blog posts and articles.
- E-commerce Sites: Generate meta descriptions and titles for each product page to drive more sales.
- SEO Agencies: Save time by generating optimized SEO tags for multiple clients.
Why SEO Titles and Meta Descriptions Matter
Meta titles and descriptions directly impact your search rankings and click-through rates. When written well, they help your pages stand out in search results and attract more clicks.
Meta Titles
- Show up as the main headline in Google
- Should be concise, keyword-rich, and relevant
- Encourage users to click your page over others
Meta Descriptions
- Appear below the title in search results
- Summarize your page in 130–160 characters
- Influence whether users choose to visit your site
Best Practices for SEO Titles & Meta Descriptions
- Keep Titles Short & Sweet: Aim for 50-60 characters for titles to avoid truncation in search results.
- Use Relevant Keywords: Ensure your titles and descriptions reflect the content of the page, including keywords that users are likely to search for.
- Add Actionable Phrases: Encourage users to click with terms like “Learn More,” “Shop Now,” or “Get Started.”
- Unique Content for Each Page: Each page of your website should have a unique meta title and description that accurately reflect its content.
Get Started Today
Ready to enhance your website’s SEO? Simply follow the steps above to generate optimized titles and descriptions for your pages in seconds! Whether you’re a freelancer, small business owner, or e-commerce store, this tool is your key to better search rankings.
