How to Write SEO Meta Tags for AI-Generated Websites
Your AI-generated website can look stunning and load fast — but if the meta tags are missing or generic, Google will not rank it and searchers will not click it. Meta tags are the interface between your site and every search result page, and they require deliberate human input to work correctly.
What Are Meta Tags?
Meta tags are HTML elements in the `` of your page that describe the page to search engines and social media platforms. The two that matter most for SEO are:
Title tag (`
`) — displayed as the blue headline in Google search results. This is the single most important on-page SEO element.</p>
<p class="text-white/55 leading-relaxed mb-4"><strong class="text-white font-semibold">Meta description</strong> — displayed as the grey summary text below the title in search results. It does not directly affect rankings but has a significant effect on click-through rate.</p>
<h2 class="text-2xl font-bold text-white mt-10 mb-4">Writing an Effective Title Tag</h2>
<p class="text-white/55 leading-relaxed mb-4">A well-written title tag:</p>
<ul class="my-4 space-y-1"><li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">Leads with the primary keyword</strong> — the phrase your target audience actually types into Google</li>
<li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">Includes your brand name at the end</strong> — separated by a pipe or dash (e.g. "Coffee Roastery in Delhi | Ember & Ash")</li>
<li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">Is under 60 characters</strong> — Google truncates titles longer than approximately 600 pixels (roughly 60 characters)</li>
<li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">Is unique for every page</strong> — duplicate titles signal that pages have duplicate content</li>
</ul>
Example:
<ul class="my-4 space-y-1"><li class="ml-5 list-disc text-white/60 mb-1">❌ "Home | Ember & Ash Coffee"</li>
<li class="ml-5 list-disc text-white/60 mb-1">✅ "Specialty Coffee Roastery in Delhi | Ember & Ash"</li>
</ul>
<h2 class="text-2xl font-bold text-white mt-10 mb-4">Writing an Effective Meta Description</h2>
<p class="text-white/55 leading-relaxed mb-4">A good meta description:</p>
<ul class="my-4 space-y-1"><li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">States clearly what the page is about and why it matters</strong> — treat it as ad copy for the page</li>
<li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">Includes a natural mention of the primary keyword</strong> — Google bolds matching terms in search results, improving visual prominence</li>
<li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">Has a soft CTA</strong> — "Book a free consultation", "Explore the collection", "See our packages"</li>
<li class="ml-5 list-disc text-white/60 mb-1"><strong class="text-white font-semibold">Is under 160 characters</strong> — Google truncates longer descriptions</li>
</ul>
Example:
<ul class="my-4 space-y-1"><li class="ml-5 list-disc text-white/60 mb-1">❌ "We are a coffee roastery based in Delhi offering the best coffee."</li>
<li class="ml-5 list-disc text-white/60 mb-1">✅ "Specialty-grade coffee roasted in small batches in Delhi. Direct-trade beans from Colombia and Ethiopia. Order online or visit our Hauz Khas café."</li>
</ul>
<h2 class="text-2xl font-bold text-white mt-10 mb-4">Setting Meta Tags in Draftly</h2>
<p class="text-white/55 leading-relaxed mb-4">Draftly generates default meta tags from your brand name and site description. To customise them:</p>
<ul class="my-4 space-y-1"><li class="ml-5 list-decimal text-white/60 mb-1">Open the builder and click <strong class="text-white font-semibold">Site Settings → SEO</strong></li>
<li class="ml-5 list-decimal text-white/60 mb-1">Edit the <strong class="text-white font-semibold">Page title</strong> and <strong class="text-white font-semibold">Meta description</strong> fields for each page</li>
<li class="ml-5 list-decimal text-white/60 mb-1">Upload a <strong class="text-white font-semibold">Social sharing image</strong> (1200×630px) for WhatsApp, LinkedIn, and Twitter previews</li>
</ul>
For a full guide to Draftly's SEO panel, read How to Use Draftly's Built-In SEO Panel.
<h2 class="text-2xl font-bold text-white mt-10 mb-4">Page-Level vs. Site-Level Meta Tags</h2>
<p class="text-white/55 leading-relaxed mb-4">Every page needs its own unique title and description. A blog post, a services page, and a pricing page each serve different search intents and should target different keywords. Reusing the same meta tags across pages is one of the most common SEO mistakes on AI-generated sites.</p>
<h2 class="text-2xl font-bold text-white mt-10 mb-4">Open Graph Tags for Social Sharing</h2>
<p class="text-white/55 leading-relaxed mb-4">When your pages are shared on social platforms, Open Graph tags control what title, description, and image appears in the preview card. Draftly automatically generates Open Graph tags from your SEO settings — but make sure you have uploaded a social sharing image, as pages without one will show a blank card.</p>
<h2 class="text-2xl font-bold text-white mt-10 mb-4">Checking Your Meta Tags</h2>
<p class="text-white/55 leading-relaxed mb-4">After publishing, use a free tool like Screaming Frog, Ahrefs' SEO toolbar, or simply view the page source (Ctrl+U) to verify your meta tags are rendering correctly. For ongoing monitoring, Google Search Console shows you when titles or descriptions are being overridden by Google's own rewrites — a signal that your tags need improvement.</p>
