منشئ الوسوم الوصفية 2025

منشئ وسوم وصفية SEO كامل مع مساعدة الذكاء الاصطناعي. إنشاء عناوين ووصف وسوم محسنة، علامات Open Graph، بطاقات تويتر، وترميز Schema مع معاينة فورية والتحقق من الأحرف.

🔍 معاينة نتائج محركات البحث

سيظهر عنوان صفحتك هنا
https://example.com/page
سيظهر وصف الميتا الخاص بك هنا لتقديم معاينة لمحتوى صفحتك للمستخدمين

📱 معاينة الجوال

عنوان صفحتك...
https://example.com/page
وصف الميتا الخاص بك...

📘 أوبن جراف (فيسبوك، لينكد إن)

🐦 بطاقات تويتر

📘 معاينة فيسبوك

معاينة الصورة (1200×630 بكسل)
عنوان OG الخاص بك
EXAMPLE.COM
سيظهر وصف OG الخاص بك هنا

🐦 معاينة تويتر

صورة بطاقة تويتر
عنوان تويتر الخاص بك
وصف تويتر الخاص بك
@اسم_المستخدم

📊 منشئ ترميز Schema

📊 معاينة Schema

معاينة النتائج المنسقة
اختر نوع schema وأكمل الحقول لرؤية المعاينة

🔍 التحقق من صحة Schema

اختبر ترميز schema الذي تم إنشاؤه باستخدام هذه الأدوات الرسمية

⚡ توليد العلامات الوصفية بالجملة

قم بتحميل ملف CSV مع بيانات صفحاتك لتوليد علامات وصفية لصفحات متعددة دفعة واحدة

📤 تحميل ملف CSV

Required CSV columns:
• title (page title)
• description (meta description)
• url (page URL)
• keywords (optional)
• author (optional)

📊 خيارات الجملة

🚀 قوالب البدء السريع

📝 مقال مدونة
مُحسّن لمقالات المدونة والتسويق بالمحتوى
🛍️ صفحة المنتج
منتج التجارة الإلكترونية مع التقييمات والأسعار
💼 صفحة الخدمة
صفحة خدمة أو أعمال احترافية
📍 نشاط تجاري محلي
نشاط تجاري محلي مع الموقع وساعات العمل
🎟️ صفحة الفعالية
فعالية مع التاريخ والوقت والموقع
📚 دليل إرشادي
دليل أو شرح خطوة بخطوة

✨ Smart Nation's Core Infrastructure: WIA Code ✨

توصيل بالطائرات بدون طيار والروبوتات، القيادة الذاتية، الإنقاذ في حالات الطوارئ والمزيد - اختبر المستقبل خلال 30 يوماً، مجاناً تماماً لدولتك!

تعرف أكثر عن WIA Code

🤖 اختر مساعد الذكاء الاصطناعي

💬 شات جي بي تي
الأكثر تنوعاً • الأفضل لتحسين الميتا تاج العام
→ chat.openai.com
🧠 كلود
أفضل تحليل • مثالي لتحليل وتحسين SEO
→ claude.ai
✨ جيميناي مجاني
حدود يومية مجانية • مساعد SEO مدمج
→ مدمج أدناه
🌟 Get AI help with meta tag optimization |
`; document.getElementById('schema-output').textContent = schemaOutput; // Generate complete output generateAllFormats(); // Show results document.getElementById('resultContainer').style.display = 'block'; trackEvent('schema_generated', { type: schemaType }); showNotification('Schema markup generated successfully!', 'success'); } function generateAllFormats() { const htmlOutput = document.getElementById('html-output').textContent; const ogOutput = document.getElementById('og-output').textContent; const twitterOutput = document.getElementById('twitter-output').textContent; const schemaOutput = document.getElementById('schema-output').textContent; let completeOutput = ` \n\n\n \n \n\n`; if (htmlOutput && htmlOutput.trim() !== '') { completeOutput += ` ${htmlOutput.replace(/\n/g, '\n ')}\n`; } if (ogOutput && ogOutput.trim() !== '') { completeOutput += ` ${ogOutput.replace(/\n/g, '\n ')}\n`; } if (twitterOutput && twitterOutput.trim() !== '') { completeOutput += ` ${twitterOutput.replace(/\n/g, '\n ')}\n`; } if (schemaOutput && schemaOutput.trim() !== '') { completeOutput += ` ${schemaOutput.replace(/\n/g, '\n ')}\n`; } completeOutput += `\n\n \n \n`; document.getElementById('all-output').textContent = completeOutput; } // ========== BULK GENERATION ========== function handleCSVUpload(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { const csv = e.target.result; parseBulkCSV(csv); }; reader.readAsText(file); } function parseBulkCSV(csv) { const lines = csv.split('\n'); const headers = lines[0].split(',').map(h => h.trim().toLowerCase()); // Validate required columns const requiredColumns = ['title', 'description', 'url']; const missingColumns = requiredColumns.filter(col => !headers.includes(col)); if (missingColumns.length > 0) { showNotification(`Missing required columns: ${missingColumns.join(', ')}`, 'error'); return; } bulkData = []; for (let i = 1; i < lines.length; i++) { const line = lines[i].trim(); if (!line) continue; const values = parseCSVLine(line); if (values.length < headers.length) continue; const row = {}; headers.forEach((header, index) => { row[header] = values[index] || ''; }); bulkData.push(row); } if (bulkData.length === 0) { showNotification('لم يتم العثور على بيانات صالحة في ملف CSV', 'error'); return; } document.getElementById('bulkGenerateBtn').disabled = false; showNotification(`Loaded ${bulkData.length} rows from CSV`, 'success'); } function parseCSVLine(line) { const result = []; let current = ''; let inQuotes = false; for (let i = 0; i < line.length; i++) { const char = line[i]; if (char === '"') { inQuotes = !inQuotes; } else if (char === ',' && !inQuotes) { result.push(current.trim()); current = ''; } else { current += char; } } result.push(current.trim()); return result; } function processBulkGeneration() { if (bulkData.length === 0) { showNotification('يرجى تحميل ملف CSV أولاً', 'error'); return; } const siteName = document.getElementById('bulkSiteName').value.trim(); const defaultImage = document.getElementById('bulkOgImage').value.trim(); const schemaType = document.getElementById('bulkSchemaType').value; bulkResults = []; // Show progress document.getElementById('bulk-results').style.display = 'block'; document.getElementById('progress-text').textContent = 'Processing...'; let processed = 0; bulkData.forEach((row, index) => { setTimeout(() => { const result = generateMetaForRow(row, siteName, defaultImage, schemaType); bulkResults.push(result); processed++; const progress = (processed / bulkData.length) * 100; document.getElementById('progress-bar').style.width = progress + '%'; document.getElementById('progress-text').textContent = `Processed ${processed} of ${bulkData.length} pages`; if (processed === bulkData.length) { document.getElementById('downloadBtn').style.display = 'block'; showNotification('Bulk generation completed!', 'success'); trackEvent('bulk_generation_completed', { count: bulkData.length }); } }, index * 100); // Stagger processing for better UX }); } function generateMetaForRow(row, siteName, defaultImage, schemaType) { const title = row.title || ''; const description = row.description || ''; const url = row.url || ''; const keywords = row.keywords || ''; const author = row.author || ''; const image = row.image || defaultImage; let metaTags = ''; // Basic meta tags metaTags += `${escapeHtml(title)}\n`; metaTags += `\n`; if (keywords) { metaTags += `\n`; } if (author) { metaTags += `\n`; } metaTags += `\n\n`; // Open Graph metaTags += `\n`; metaTags += `\n`; metaTags += `\n`; metaTags += `\n`; if (image) { metaTags += `\n`; } if (siteName) { metaTags += `\n`; } metaTags += `\n`; // Twitter Cards metaTags += `\n`; metaTags += `\n`; metaTags += `\n`; if (image) { metaTags += `\n`; } // Schema markup if (schemaType !== 'none') { const schema = { "@context": "https://schema.org", "@type": schemaType, "name": title, "description": description, "url": url }; if (image) { schema.image = image; } if (author) { schema.author = { "@type": "Person", "name": author }; } metaTags += `\n\n`; } return { url: url, title: title, description: description, metaTags: metaTags }; } function downloadBulkResults() { if (bulkResults.length === 0) { showNotification('لا توجد نتائج للتحميل', 'error'); return; } let csvContent = 'URL,Title,Description,MetaTags\n'; bulkResults.forEach(result => { const metaTagsEscaped = result.metaTags.replace(/"/g, '""'); csvContent += `"${result.url}","${result.title}","${result.description}","${metaTagsEscaped}"\n`; }); const blob = new Blob([csvContent], { type: 'text/csv' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'meta-tags-results.csv'; a.click(); window.URL.revokeObjectURL(url); trackEvent('bulk_results_downloaded'); } function downloadSampleCSV() { const sampleData = `title,description,url,keywords,author "Best SEO Tips for 2025","Learn the latest SEO strategies and techniques to improve your website rankings in 2025","https://example.com/seo-tips-2025","SEO, tips, 2025, rankings","جون دو" "دليل منشئ العلامات الوصفية","دليل شامل لإنشاء علامات وصفية محسنة لتحسين الظهور في محركات البحث","https://example.com/meta-tag-guide","meta tags, SEO, optimization","جين سميث" "دليل ترميز المخطط","Step-by-step tutorial on implementing schema markup for rich snippets","https://example.com/schema-tutorial","schema markup, rich snippets, structured data","بوب جونسون"`; const blob = new Blob([sampleData], { type: 'text/csv' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'meta-tags-sample.csv'; a.click(); window.URL.revokeObjectURL(url); } // ========== SAMPLE TEMPLATES ========== function useSample(sampleType) { const samples = { 'blog': { title: 'الدليل الشامل لعلامات الميتا في 2025: أفضل ممارسات تحسين محركات البحث', description: 'تعلم كيفية إنشاء علامات ميتا محسنة لتحسين ترتيب البحث ومعدلات النقر. يتضمن أمثلة وأدوات وأفضل ممارسات 2025 لتحسين محركات البحث.', keywords: 'meta tags, SEO, search optimization, SERP, click-through rates', url: 'https://yoursite.com/meta-tags-guide-2025', author: 'خبير تحسين محركات البحث', ogTitle: 'Complete Guide to Meta Tags in 2025', ogDescription: 'Master meta tag optimization with our comprehensive 2025 guide. Boost your search rankings and CTR with proven strategies.', ogImage: 'https://yoursite.com/images/meta-tags-guide.jpg', siteName: 'مدونتك لتحسين محركات البحث', twitterCardType: 'summary_large_image', twitterSite: '@yourseosite', schemaType: 'مقال مدونة' }, 'product': { title: 'سماعات رأس لاسلكية فاخرة - إلغاء الضوضاء | متجرك', description: 'سماعات رأس لاسلكية فاخرة مع خاصية إلغاء الضوضاء النشط، عمر بطارية 30 ساعة، وجودة صوت متفوقة. شحن مجاني وضمان لمدة عامين.', keywords: 'wireless headphones, noise cancelling, premium audio, bluetooth headphones', url: 'https://yourstore.com/premium-wireless-headphones', author: 'فريق متجرك', ogTitle: 'Premium Wireless Headphones - Noise Cancelling', ogDescription: 'Experience superior sound with our premium wireless headphones. Active noise cancelling, 30-hour battery, free shipping.', ogImage: 'https://yourstore.com/images/headphones-hero.jpg', siteName: 'متجرك', twitterCardType: 'summary_large_image', twitterSite: '@yourstore', schemaType: 'Product' }, 'service': { title: 'خدمات تحسين محركات البحث الاحترافية - عزز ترتيبك | وكالة رقمية', description: 'خدمات احترافية لتحسين محركات البحث تحقق النتائج. زيادة الزيارات العضوية، تحسين ترتيب البحث، وتنمية عملك باستراتيجياتنا المثبتة.', keywords: 'SEO services, search engine optimization, digital marketing, organic traffic', url: 'https://agency.com/seo-services', author: 'فريق التسويق الرقمي', ogTitle: 'Professional SEO Services - Boost Your Rankings', ogDescription: 'Get professional SEO services that deliver real results. Increase traffic and rankings with our proven optimization strategies.', ogImage: 'https://agency.com/images/seo-services.jpg', siteName: 'وكالة رقمية', twitterCardType: 'summary_large_image', twitterSite: '@digitalagency', schemaType: 'WebPage' }, 'local': { title: 'أفضل مطعم بيتزا في وسط المدينة | ماريو's Pizzeria', description: 'بيتزا إيطالية أصلية محضرة يومياً. يقع في وسط المدينة، مفتوح 7 أيام في الأسبوع. اطلب عبر الإنترنت للتوصيل أو زر مطعمنا المريح.', keywords: 'pizza restaurant, Italian food, downtown dining, pizza delivery', url: 'https://mariospizza.com', author: 'Mario\'s Pizzeria', ogTitle: 'أفضل مطعم بيتزا في وسط المدينة', ogDescription: 'Authentic Italian pizza made fresh daily. Downtown location, open 7 days. Order online for delivery!', ogImage: 'https://mariospizza.com/images/pizza-hero.jpg', siteName: 'Mario\'s Pizzeria', twitterCardType: 'summary_large_image', twitterSite: '@mariospizza', schemaType: 'نشاط تجاري محلي' }, 'event': { title: 'قمة التسويق الرقمي 2025 - تعلم من خبراء الصناعة', description: 'انضم إلى أكثر من 500 مسوق في قمة التسويق الرقمي 2025. يومان من جلسات الخبراء والتواصل وأحدث رؤى الصناعة. سجل الآن!', keywords: 'digital marketing summit, marketing conference, industry experts, networking', url: 'https://marketingsummit.com/2025', author: 'منظمو القمة', ogTitle: 'Digital Marketing Summit 2025', ogDescription: 'Join 500+ marketers for two days of expert sessions and networking. Learn the latest digital marketing strategies and trends.', ogImage: 'https://marketingsummit.com/images/summit-2025.jpg', siteName: 'قمة التسويق', twitterCardType: 'summary_large_image', twitterSite: '@marketingsummit', schemaType: 'Event' }, 'howto': { title: 'كيفية تحسين العلامات الوصفية للحصول على ترتيب أفضل في محركات البحث', description: 'دليل خطوة بخطوة لتحسين علامات الميتا لتحسين ترتيب محركات البحث. تعلم أفضل ممارسات علامات العنوان، كتابة وصف الميتا، والمزيد.', keywords: 'meta tag optimization, SEO tutorial, search rankings, title tags', url: 'https://seoguide.com/optimize-meta-tags', author: 'فريق تعليم تحسين محركات البحث', ogTitle: 'كيفية تحسين العلامات الوصفية لتحسين محركات البحث', ogDescription: 'Complete step-by-step guide to meta tag optimization. Improve your search rankings with proven techniques and best practices.', ogImage: 'https://seoguide.com/images/meta-tags-tutorial.jpg', siteName: 'دليل تحسين محركات البحث', twitterCardType: 'summary_large_image', twitterSite: '@seoguide', schemaType: 'كيفية' } }; const sample = samples[sampleType]; if (!sample) return; // Fill basic fields document.getElementById('pageTitle').value = sample.title; document.getElementById('metaDescription').value = sample.description; document.getElementById('keywords').value = sample.keywords; document.getElementById('pageUrl').value = sample.url; document.getElementById('author').value = sample.author; // Fill social media fields if they exist if (document.getElementById('ogTitle')) { document.getElementById('ogTitle').value = sample.ogTitle; document.getElementById('ogDescription').value = sample.ogDescription; document.getElementById('ogImage').value = sample.ogImage; document.getElementById('siteName').value = sample.siteName; document.getElementById('twitterCardType').value = sample.twitterCardType; document.getElementById('twitterSite').value = sample.twitterSite; } // Update schema type if in schema tab if (document.getElementById('schemaType')) { document.getElementById('schemaType').value = sample.schemaType; updateSchemaFields(); } // Update character counts and previews updateCharCount('pageTitle', 'title-count', 60, 100); updateCharCount('metaDescription', 'desc-count', 160, 300); updatePreviews(); // Smooth scroll to action button document.querySelector('.btn').scrollIntoView({ behavior: 'smooth', block: 'center' }); showNotification(`${sampleType.charAt(0).toUpperCase() + sampleType.slice(1)} template loaded!`, 'success'); } // ========== UTILITY FUNCTIONS ========== function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // Copy to clipboard function copyToClipboard(elementId) { const element = document.getElementById(elementId); const text = element.textContent; navigator.clipboard.writeText(text).then(() => { showNotification('Copied to clipboard!', 'success'); }).catch(() => { // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); showNotification('Copied to clipboard!', 'success'); }); } // Show error function showError(elementId, message) { const errorElement = document.getElementById(elementId); if (errorElement) { errorElement.textContent = message; } } // Clear errors function clearErrors() { document.querySelectorAll('.error').forEach(el => el.textContent = ''); } // Show notification toast function showNotification(message, type = 'success') { const toast = document.createElement('div'); toast.className = `toast ${type}`; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.remove(); }, 3000); } // Analytics tracking function trackEvent(eventName, data = {}) { if (typeof gtag !== 'undefined') { gtag('event', eventName, { 'event_category': TOOL_CONFIG.category, 'event_label': TOOL_CONFIG.name, ...data }); } } // ========== AI ASSISTANT FUNCTIONS ========== // AI 모달 열기 function openAIModal() { const modal = document.getElementById('aiModal'); modal.classList.add('show'); // 현재 상태에 따라 적절한 화면 표시 if (aiModalState.apiKey && aiModalState.currentView === 'gemini') { showGeminiChat(); } else { showAISelector(); } updateAPIKeyStatus(); } // AI 모달 닫기 function closeAIModal() { const modal = document.getElementById('aiModal'); modal.classList.remove('show'); // 300ms 후 상태 리셋 (애니메이션 완료 후) setTimeout(() => { aiModalState.currentView = 'selector'; showAISelector(); }, 300); } // AI 선택 화면 표시 function showAISelector() { document.getElementById('aiModalTitle').textContent = 'Choose Your AI Assistant'; document.getElementById('aiSelector').style.display = 'flex'; document.getElementById('geminiChat').style.display = 'none'; document.getElementById('apiKeySetup').style.display = 'none'; aiModalState.currentView = 'selector'; } // Gemini 채팅 화면 표시 function showGeminiChat() { document.getElementById('aiModalTitle').innerHTML = '✨ Gemini AI Assistant'; document.getElementById('aiSelector').style.display = 'none'; document.getElementById('geminiChat').style.display = 'flex'; document.getElementById('apiKeySetup').style.display = 'none'; aiModalState.currentView = 'gemini'; // 초기 메시지가 없으면 추가 const chatMessages = document.getElementById('chatMessages'); if (!chatMessages.innerHTML.trim()) { addMessage('assistant', `Hello! I can help you with: • Meta tag optimization strategies • SEO best practices for 2025 • Open Graph and Twitter Cards setup • Schema markup implementation • Character limits and SERP previews • Bulk generation techniques What would you like to know about meta tag optimization?`); } } // API 키 설정 화면 표시 function showAPIKeySetup() { document.getElementById('aiModalTitle').textContent = 'إعداد واجهة برمجة تطبيقات Gemini'; document.getElementById('aiSelector').style.display = 'none'; document.getElementById('geminiChat').style.display = 'none'; document.getElementById('apiKeySetup').style.display = 'block'; aiModalState.currentView = 'setup'; } // AI 선택 처리 function selectAI(aiType) { switch(aiType) { case 'chatgpt': const toolContext = `I need help with meta tag optimization and SEO. I'm using a meta tag generator tool that creates HTML meta tags, Open Graph tags, Twitter Cards, and Schema markup. Please help me optimize my meta tags for better search engine rankings and social media sharing.`; const chatUrl = `https://chat.openai.com/?q=${encodeURIComponent(toolContext)}`; window.open(chatUrl, '_blank'); closeAIModal(); trackEvent('ai_selection', { ai_type: 'chatgpt' }); break; case 'claude': const claudeContext = `I need help with meta tag optimization and SEO. I'm using a meta tag generator tool that creates HTML meta tags, Open Graph tags, Twitter Cards, and Schema markup. Please help me optimize my meta tags for better search engine rankings and social media sharing.`; const claudeUrl = `https://claude.ai/chat?q=${encodeURIComponent(claudeContext)}`; window.open(claudeUrl, '_blank'); closeAIModal(); trackEvent('ai_selection', { ai_type: 'claude' }); break; case 'gemini': if (!aiModalState.apiKey) { showAPIKeySetup(); } else { showGeminiChat(); } trackEvent('ai_selection', { ai_type: 'gemini' }); break; } } // API 키 저장 function saveGeminiApiKey() { const apiKey = document.getElementById('geminiApiKeyInput').value.trim(); if (apiKey) { localStorage.setItem('geminiApiKey', apiKey); aiModalState.apiKey = apiKey; showGeminiChat(); updateAPIKeyStatus(); } else { alert('الرجاء إدخال مفتاح API صالح'); } } // API 키 상태 업데이트 function updateAPIKeyStatus() { const statusEl = document.getElementById('apiKeyStatus'); if (aiModalState.apiKey) { statusEl.innerHTML = 'تغيير مفتاح واجهة برمجة التطبيقات'; } else { statusEl.textContent = 'لم يتم تعيين مفتاح API'; } } // 채팅 메시지 추가 function addMessage(type, content) { const chatMessages = document.getElementById('chatMessages'); const messageDiv = document.createElement('div'); messageDiv.className = `message ${type}`; if (type === 'user') { messageDiv.innerHTML = `You: ${content}`; } else { messageDiv.innerHTML = `✨ Gemini:
${content.replace(/\n/g, '
')}`; } chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Gemini에 메시지 전송 async function sendToGemini() { const input = document.getElementById('geminiInput'); const message = input.value.trim(); if (!message) return; // 사용자 메시지 추가 addMessage('user', message); input.value = ''; // 로딩 표시 const loadingMsg = document.createElement('div'); loadingMsg.className = 'message assistant'; loadingMsg.innerHTML = '✨ Gemini:
Thinking...'; loadingMsg.id = 'loading-message'; document.getElementById('chatMessages').appendChild(loadingMsg); try { const currentData = getCurrentFormData(); const contextPrompt = `Context: User is using a meta tag generator tool. Current form data: ${JSON.stringify(currentData, null, 2)} Meta tag optimization knowledge: - Title tags should be 50-60 characters for optimal display - Meta descriptions should be 150-160 characters - Open Graph images should be 1200x630 pixels - Schema markup helps with rich snippets - Twitter Cards improve social sharing User question: ${message} Please provide helpful advice about meta tag optimization, SEO best practices, or how to improve their current meta tags.`; const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${aiModalState.apiKey}`, { method: 'نشر', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: contextPrompt }] }], generationConfig: { temperature: 0.7, maxOutputTokens: 1000 } }) }); const data = await response.json(); // 로딩 메시지 제거 document.getElementById('loading-message').remove(); if (data.candidates && data.candidates[0] && data.candidates[0].content) { const reply = data.candidates[0].content.parts[0].text; addMessage('assistant', reply); } else { addMessage('assistant', 'Sorry, I could not generate a response. Please try again.'); } } catch (error) { // 로딩 메시지 제거 document.getElementById('loading-message')?.remove(); if (error.message.includes('مفتاح API')) { addMessage('error', 'Invalid API key. Please check your API key and try again.'); showAPIKeySetup(); } else { addMessage('error', 'Failed to connect to Gemini. Please check your internet connection and try again.'); } } } function getCurrentFormData() { return { title: document.getElementById('pageTitle')?.value || '', description: document.getElementById('metaDescription')?.value || '', url: document.getElementById('pageUrl')?.value || '', keywords: document.getElementById('keywords')?.value || '', author: document.getElementById('author')?.value || '', language: document.getElementById('language')?.value || '', ogTitle: document.getElementById('ogTitle')?.value || '', ogDescription: document.getElementById('ogDescription')?.value || '', ogImage: document.getElementById('ogImage')?.value || '', siteName: document.getElementById('siteName')?.value || '', schemaType: document.getElementById('schemaType')?.value || '' }; } // ========== EVENT LISTENERS ========== // Enter key support for inputs document.addEventListener('DOMContentLoaded', function() { // Character count listeners document.getElementById('pageTitle').addEventListener('input', () => updateCharCount('pageTitle', 'title-count', 60, 100)); document.getElementById('metaDescription').addEventListener('input', () => updateCharCount('metaDescription', 'desc-count', 160, 300)); // Clear errors on input document.querySelectorAll('.input-field').forEach(input => { input.addEventListener('input', clearErrors); }); // AI 버튼 이벤트 document.getElementById('aiBtn').addEventListener('click', openAIModal); // 모달 외부 클릭시 닫기 document.getElementById('aiModal').addEventListener('click', function(e) { if (e.target === this) { closeAIModal(); } }); // 엔터 키 지원 및 ESC 키로 모달 닫기 document.addEventListener('keydown', function(e) { if (e.key === 'إدخال') { const geminiInput = document.getElementById('geminiInput'); if (document.activeElement === geminiInput) { sendToGemini(); } } // ESC 키로 모달 닫기 if (e.key === 'خروج') { closeAIModal(); } }); // 초기 API 키 상태 업데이트 updateAPIKeyStatus(); updateCurrentYear(); updateToolCount(); // Initialize schema fields updateSchemaFields(); }); // Track tool usage document.querySelectorAll('a[href*="wia"]').forEach(link => { link.addEventListener('click', function() { trackEvent('wia_link_click', { link: link.textContent }); }); }); // ========== DYNAMIC TOOL COUNT ========== // Update tool count dynamically async function updateToolCount() { try { const response = await fetch('/api/tool-count.php'); const data = await response.json(); // Update dynamic tools description document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${data.count}+ free online tools in 206 languages. No signup, no fees, just tools that work.`; }); // Update "All X+ Tools" links document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${data.count}+ ${suffix}`; }); } catch (error) { // Fallback: use current actual count from server const fallbackCount = 333; document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${fallbackCount}+ free online tools in 206 languages. No signup, no fees, just tools that work.`; }); document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${fallbackCount}+ ${suffix}`; }); console.log('Tool count API not available, using current count:', fallbackCount); } } // Update current year dynamically function updateCurrentYear() { const currentYear = new Date().getFullYear(); document.querySelectorAll('.current-year').forEach(el => { el.textContent = currentYear; }); } // ========== ANALYTICS ========== // Google Analytics window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXX'); // Track page view trackEvent('page_view', { tool: TOOL_CONFIG.name, category: TOOL_CONFIG.category });