SEO & AIO Content Optimizer
Fill in the details below to generate optimized components for your image-centric blog posts.
document.addEventListener('DOMContentLoaded', function() {
// Set default creation date to today
const today = new Date().toISOString().split('T')[0];
document.getElementById('creationDate').value = today;
const form = document.getElementById('contentForm');
const addFaqButton = document.getElementById('addFaqButton');
const faqContainer = document.getElementById('faqContainer');
let faqCount = 0;
addFaqButton.addEventListener('click', addFaqItem);
form.addEventListener('submit', handleSubmit);
function addFaqItem() {
faqCount++;
const faqItemDiv = document.createElement('div');
faqItemDiv.classList.add('faq-item');
faqItemDiv.id = `faqItem-${faqCount}`;
faqItemDiv.innerHTML = `
`;
faqContainer.appendChild(faqItemDiv);
}
// Make removeFaqItem accessible globally for the inline onclick
window.removeFaqItem = function(faqId) {
const itemToRemove = document.getElementById(faqId);
if (itemToRemove) {
faqContainer.removeChild(itemToRemove);
}
}
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
// Collect FAQs
data.faqs = [];
for (let i = 1; i <= faqCount; i++) {
const q = document.getElementById(`faqQ-${i}`)?.value;
const a = document.getElementById(`faqA-${i}`)?.value;
if (q && a) {
data.faqs.push({ question: q, answer: a });
}
}
generateOutputs(data);
document.getElementById('outputContainer').style.display = 'block';
window.scrollTo(0, document.getElementById('outputContainer').offsetTop);
}
function escapeHtml(unsafe) {
if (unsafe === null || typeof unsafe === 'undefined') return '';
return unsafe
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function generateOutputs(data) {
// 1. Title Tag
const titleTag = `${escapeHtml(data.imageTheme)} - AI Art Prompt & ${escapeHtml(data.keyBenefit)} | ${escapeHtml(data.blogBrand)}`;
document.getElementById('outputTitleTag').textContent = titleTag;
// 2. Meta Description
const metaDescription = `Learn how to create ${escapeHtml(data.imageTheme).toLowerCase()} with this exact AI prompt for ${escapeHtml(data.aiTool)}. Get the methodology for ${escapeHtml(data.keyBenefit).toLowerCase()}.`;
document.getElementById('outputMetaDescription').textContent = metaDescription;
// 3. Image Schema (`ImageObject`)
const imageSchema = {
"@context": "https://schema.org",
"@type": "ImageObject",
"name": escapeHtml(data.imageTheme),
"description": `AI-generated image: ${escapeHtml(data.imageDescription)}. Prompt excerpt: ${escapeHtml(data.exactPrompt.substring(0, 100))}... Created with ${escapeHtml(data.aiTool)}.`,
"contentUrl": data.imageURL,
"url": data.postURL, // URL of the page where the image is published
"encodingFormat": data.imageFileName ? data.imageFileName.split('.').pop() : "webp", // Guess from filename or default
"uploadDate": data.creationDate,
"creator": {
"@type": "Organization", // Or "Person"
"name": escapeHtml(data.blogBrand)
},
"copyrightHolder": {
"@type": "Organization",
"name": escapeHtml(data.blogBrand)
},
"keywords": `${escapeHtml(data.primaryKeyword)}, ${escapeHtml(data.secondaryKeywords)}, ${escapeHtml(data.aiTool)}, AI generated, ${escapeHtml(data.imageTheme.split(" ")[0])}`, // Basic keywords
"text": `AI Prompt: ${escapeHtml(data.exactPrompt)}` // Embedding the prompt
};
document.getElementById('outputImageSchema').textContent = JSON.stringify(imageSchema, null, 2);
// 4. Alt Text
const altText = `${escapeHtml(data.imageDescription)} - AI art generated using ${escapeHtml(data.aiTool)} with prompt: '${escapeHtml(data.exactPrompt.substring(0, 70))}...' - ${escapeHtml(data.instructionalPurpose) || 'Illustrating AI art capabilities'}.`;
document.getElementById('outputAltText').textContent = altText;
// 5. AIO-Optimized Prompt Section
let promptParamsHtml = '';
if (data.promptParams) {
const paramsList = data.promptParams.split('\n').filter(p => p.trim() !== '');
if (paramsList.length > 0) {
promptParamsHtml += '/srcset if custom coding.`;
// 9. Social/Open Graph Tags
const socialTags = `
${data.blogBrand.startsWith('@') ? `` : ''}
${data.blogBrand.startsWith('@') ? `` : ''}`;
document.getElementById('outputSocialTags').textContent = socialTags.trim();
// 10. Semantic Keywords
document.getElementById('outputSemanticKeywords').textContent = `Primary: ${escapeHtml(data.primaryKeyword)}\nSecondary/LSI: ${escapeHtml(data.secondaryKeywords)}\nOther potential terms: image synthesis, generative art, prompt engineering, ${escapeHtml(data.aiTool)} prompts, digital art workflow, creative AI, visual storytelling, parameter tuning.`;
// 11. User Engagement Hook
const ctaButtonHtml = data.ctaText ? `` : "";
document.getElementById('outputEngagementHook').textContent = ctaButtonHtml;
// 12. AI Transparency Note
document.getElementById('outputTransparencyNote').textContent =
`
Key Parameters/Methodology:
- ';
paramsList.forEach(param => {
promptParamsHtml += `
- ${escapeHtml(param)} `; }); promptParamsHtml += '
AI Prompt & Methodology
Below is the exact prompt used to generate the image "${escapeHtml(data.imageTheme)}" using ${escapeHtml(data.aiTool)}.
${escapeHtml(data.exactPrompt)}Instructional Context: [Expand here with your full disclosure and instructional details about how the prompt works, the choices made, and how others can learn from it.]
`; document.getElementById('outputPromptSection').textContent = promptSectionHtml; // 6. "How-To" Schema Snippet const howToSteps = [ { "@type": "HowToStep", "name": `Access ${escapeHtml(data.aiTool)}`, "text": `Open or access the ${escapeHtml(data.aiTool)} platform/software.` }, { "@type": "HowToStep", "name": "Input the Prompt", "text": `Copy the exact prompt provided: "${escapeHtml(data.exactPrompt)}"` } ]; if (data.promptParams) { const paramsList = data.promptParams.split('\n').filter(p => p.trim() !== ''); if (paramsList.length > 0) { howToSteps.push({ "@type": "HowToStep", "name": "Understand Key Parameters/Methodology", "itemListElement": paramsList.map((param, index) => ({ "@type": "HowToDirection", "text": `${index + 1}. ${escapeHtml(param)}` })) }); } } howToSteps.push({ "@type": "HowToStep", "name": "Generate Image", "text": "Execute the prompt in the AI tool to generate the image." }); howToSteps.push({ "@type": "HowToStep", "name": "Review and Refine (Optional)", "text": "Review the generated image. You may need to iterate on the prompt or parameters for desired results." }); const howToSchema = { "@context": "https://schema.org", "@type": "HowTo", "name": `How to Generate "${escapeHtml(data.imageTheme)}" with an AI Art Prompt using ${escapeHtml(data.aiTool)}`, "description": `Step-by-step guide to using the provided AI art prompt to create '${escapeHtml(data.imageTheme)}'.`, "tool": [{"@type": "SoftwareApplication", "name": escapeHtml(data.aiTool)}], "step": howToSteps, "estimatedCost": { "@type": "MonetaryAmount", "currency": "USD", "value": "0" }, // Adjust if there's a cost "supply": [{"@type": "HowToSupply", "name": "AI Art Generator Access (e.g., subscription or credits)"}], "totalTime": "PT5M" // Estimated time, e.g., 5 minutes }; document.getElementById('outputHowToSchema').textContent = JSON.stringify(howToSchema, null, 2); // 7. FAQ Section & Schema let faqHtml = ''; const faqSchemaQuestions = []; if (data.faqs && data.faqs.length > 0) { faqHtml += 'Frequently Asked Questions
\n- \n';
data.faqs.forEach(faq => {
faqHtml += `
- ${escapeHtml(faq.question)} \n
- ${escapeHtml(faq.answer)} \n`; faqSchemaQuestions.push({ "@type": "Question", "name": escapeHtml(faq.question), "acceptedAnswer": { "@type": "Answer", "text": escapeHtml(faq.answer) } }); }); faqHtml += '
This image, "${escapeHtml(data.imageTheme)}," was ethically generated using ${escapeHtml(data.aiTool)}. The prompt and methodology are shared for educational and creative exploration. We encourage responsible use of AI tools. Learn more about our approach to AI content.
`; } // Copy to clipboard function window.copyToClipboard = function(elementId, isHtml = false) { const preElement = document.getElementById(elementId); let textToCopy = preElement.textContent; // For JSON-LD and simple text if (isHtml) { // For actual HTML content that we want to paste as HTML textToCopy = preElement.innerHTML; // Get the innerHTML // Basic unescaping for display purposes, might need to be more robust textToCopy = textToCopy.replace(/</g, "<") .replace(/>/g, ">") .replace(/&/g, "&"); } navigator.clipboard.writeText(textToCopy).then(() => { const originalButton = preElement.nextElementSibling; originalButton.textContent = 'Copied!'; setTimeout(() => { originalButton.textContent = isHtml ? 'Copy HTML' : 'Copy'; }, 2000); }).catch(err => { console.error('Failed to copy: ', err); alert('Failed to copy text. Please copy manually.'); }); } });