SEO Features Guide

Complete guide to optimizing your pages for search engines and social media using Aether’s built-in SEO tools.

Overview

Aether Visual Site Editor provides comprehensive SEO capabilities for every page you create. Access these features through the Settings Panel (left panel) when editing any page in the visual editor.

The SEO settings are organized into four sections:

Basic SEO - Core search engine optimization
Social Sharing (Open Graph) - How your pages appear on Facebook, LinkedIn, etc.
Twitter Card - Enhanced Twitter sharing appearance
Technical SEO - Advanced indexing controls

Basic SEO

Meta Title

Character Limit: 60 characters (live counter shown)

The meta title is the clickable headline that appears in search engine results. It’s one of the most important SEO elements.

Best Practices:

Keep it under 60 characters to avoid truncation in search results
Include your primary keyword near the beginning
Make it compelling and descriptive
Each page should have a unique meta title

Example:

✅ Good: "Aether CMS - Visual Site Editor for Modern Web Apps"
❌ Too Long: "Aether CMS - The Ultimate Visual Site Editor and Content Management System for Modern Web Applications and Headless CMS"

Meta Description

Character Limit: 160 characters (live counter shown)

The meta description is the brief summary that appears below the title in search results. While not a direct ranking factor, it significantly impacts click-through rates.

Best Practices:

Keep it under 160 characters
Write a compelling call-to-action
Include relevant keywords naturally
Accurately describe the page content
Make each description unique

Example:

✅ Good: "Build and edit modern websites visually with Aether. Drag-and-drop editor, real-time collaboration, and seamless GitHub integration. Start free today."
❌ Too Generic: "This is a page about our product. Click here to learn more."

Keywords

Format: Comma-separated list

Meta keywords have minimal impact on modern search engines but can be useful for internal site search and organization.

Best Practices:

Use 5-10 relevant keywords
Separate with commas
Include variations of your primary keywords
Focus on specific, long-tail keywords

Example:

visual editor, headless cms, content management, astro integration, github cms, no-code website builder

Open Graph meta tags control how your pages appear when shared on social media platforms like Facebook, LinkedIn, WhatsApp, and Slack.

OG Title

Character Limit: 60 characters (live counter shown)

The title shown when your page is shared on social media. If left empty, it will automatically use your Meta Title.

When to Use:

Use a different title for social sharing if your meta title is too SEO-focused
Make it more conversational and attention-grabbing
Can be slightly different from your meta title to better fit social context

Example:

Meta Title: "Aether CMS - Visual Site Editor | Documentation"
OG Title: "Build Beautiful Websites in Minutes with Aether"

OG Description

Character Limit: 200 characters (live counter shown)

The description shown when shared on social media. If left empty, it will automatically use your Meta Description.

Best Practices:

You have 200 characters (vs 160 for meta description)
Make it engaging and shareable
Focus on benefits rather than features
Can be more casual than meta description

Example:

Meta Description: "Aether Visual Site Editor provides drag-and-drop editing, GitHub integration, and real-time collaboration for modern web development."

OG Description: "Stop coding repetitive layouts! Aether's visual editor lets you build stunning websites by dragging and dropping components. Your clients can edit content directly—no developer needed. Try it free!"

Twitter Card

Twitter Cards provide rich media attachments to tweets, making your links more engaging and clickable.

Card Type

Choose the format for your Twitter card:

Summary (summary)

Standard card with small square thumbnail
Best for: Articles, blog posts, general content
Image appears on left side of card

Summary Large Image (summary_large_image) - Most Common

Large rectangular image that spans full width
Best for: Feature announcements, visual content, marketing pages
Image appears above text
Recommended for most use cases

App (app)

Specialized for mobile app promotion
Includes app name, description, and install button
Best for: Mobile app landing pages

Player (player)

For embedded media players (video/audio)
Includes play button directly in tweet
Best for: Video content, podcast episodes

Twitter Site

Format: @username

Your organization’s Twitter/X handle. This appears in the card footer and helps users find your brand.

Example:

@aethercms

Twitter Creator

Format: @username

The Twitter/X handle of the content author. Useful for attribution and connecting readers with the writer.

Example:

@johndoe

When to Use:

Set Twitter Site to your company/brand account
Set Twitter Creator to the author’s personal account
Both are optional but recommended for better attribution

Technical SEO

Advanced settings for controlling how search engines interact with your pages.

Canonical URL

Format: Full URL (https://example.com/page)

The canonical URL tells search engines which version of a page is the “primary” one, preventing duplicate content issues.

When to Use:

You have multiple URLs showing the same content
You’ve republished content from another source
You have URL parameters that create duplicate pages
You want to consolidate SEO value to one URL

Best Practices:

Use absolute URLs (include https://)
Point to the preferred version of your page
Most pages should use their own URL as canonical
Leave empty if this IS the primary version

Example Scenarios:

Scenario 1: Duplicate Content

Your page: https://example.com/blog/seo-guide
Original: https://otherblog.com/ultimate-seo-guide

Canonical URL: https://otherblog.com/ultimate-seo-guide
(Gives credit to original source)

Scenario 2: URL Parameters

Your URLs:
- https://example.com/products
- https://example.com/products?sort=price
- https://example.com/products?filter=new

All three should use:
Canonical URL: https://example.com/products
(Consolidates SEO value to main URL)

No Index

Type: Checkbox

When enabled, this adds a noindex meta tag that tells search engines NOT to include this page in search results.

When to Use:

Thank you pages
Admin or login pages
Duplicate content pages
Pages under construction
Internal-only pages
Temporary landing pages

Example Use Cases:

✅ Should be No Index:
- /thank-you
- /admin/dashboard
- /confirmation?order=12345
- /internal-team-resources

❌ Should NOT be No Index:
- Homepage
- Product pages
- Blog articles
- Marketing landing pages

Important: This removes the page from search engines. Only use if you genuinely don’t want traffic from Google, Bing, etc.

No Follow

Type: Checkbox

When enabled, this adds a nofollow meta tag that tells search engines not to follow links on this page (links won’t pass SEO value).

When to Use:

User-generated content pages (to prevent spam)
Pages with paid links
Untrusted content
Login/registration pages

Rarely Needed: Most pages should NOT use nofollow. Only use if you have a specific reason to prevent search engines from following your links.

SEO Workflow Best Practices

1. Start with Page Title and Slug

1. Enter a descriptive Page Title
2. Set a clean Page Slug (lowercase, hyphens, no special chars)
3. This forms the foundation for your SEO

2. Complete Basic SEO First

1. Write a compelling Meta Title (50-60 chars)
2. Craft an engaging Meta Description (150-160 chars)
3. Add 5-10 relevant Keywords
4. Preview how it looks in search results

1. Decide if OG Title should differ from Meta Title
2. Write a more engaging OG Description if needed
3. Choose Twitter Card type (usually "Summary Large Image")
4. Add your Twitter handles

4. Handle Technical SEO (If Needed)

1. Set Canonical URL only if you have duplicates
2. Enable No Index only for non-public pages
3. Leave No Follow unchecked in most cases

5. Test Before Publishing

1. Use Google's Rich Results Test: https://search.google.com/test/rich-results
2. Use Twitter Card Validator: https://cards-dev.twitter.com/validator
3. Use Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/

Character Limits Quick Reference

Field	Limit	What Happens If Too Long
Meta Title	60	Truncated with ”…” in search results
Meta Description	160	Cut off in search results
OG Title	60	May be truncated on social media
OG Description	200	Platform may truncate or ignore
Keywords	None	N/A - but keep reasonable (5-10 keywords)

Common SEO Mistakes to Avoid

❌ Duplicate Meta Titles

Problem: Using the same meta title across multiple pages Solution: Make each page’s meta title unique and descriptive

❌ Keyword Stuffing

Problem: “Buy Shoes, Best Shoes, Cheap Shoes, Shoes Online, Shoes Store” Solution: Write naturally for humans first, search engines second

❌ Leaving Fields Empty

Problem: Not filling in meta descriptions Solution: Every public page should have meta title and description

❌ Being Too Generic

Problem: Meta Description: “Learn more about our products and services” Solution: Be specific about what’s on the page and why it matters

❌ No Index on Important Pages

Problem: Accidentally enabling No Index on your homepage or key landing pages Solution: Double-check Technical SEO settings before publishing

Problem: Not setting OG tags, leading to ugly social previews Solution: At minimum, ensure OG title and description are set (or will fall back to meta tags)

SDK Implementation (For Developers)

If you’re implementing SEO features in your site’s codebase using the Aether SDK:

Install Latest SDK

npm install @aether-official/sites-sdk@latest

SEO Meta Tags Output

The SDK automatically includes SEO meta tags in your page renders. Ensure you’re using SDK v1.0.20 or higher for full SEO support.

Accessing SEO Data

import { getPage } from '@aether-official/sites-sdk';

const page = await getPage(organizationId, siteId, pageSlug);

// Access SEO fields
const seo = {
  metaTitle: page.metaTitle,
  metaDescription: page.metaDescription,
  keywords: page.keywords,
  ogTitle: page.ogTitle || page.metaTitle, // Fallback
  ogDescription: page.ogDescription || page.metaDescription, // Fallback
  twitterCard: page.twitterCard || 'summary_large_image',
  twitterSite: page.twitterSite,
  twitterCreator: page.twitterCreator,
  canonicalUrl: page.canonicalUrl,
  noIndex: page.noIndex,
  noFollow: page.noFollow,
};

HTML Meta Tags Example

<head>
  <title>{seo.metaTitle}</title>
  <meta name="description" content={seo.metaDescription} />
  <meta name="keywords" content={seo.keywords} />

  <!-- Open Graph -->
  <meta property="og:title" content={seo.ogTitle} />
  <meta property="og:description" content={seo.ogDescription} />

  <!-- Twitter Card -->
  <meta name="twitter:card" content={seo.twitterCard} />
  <meta name="twitter:site" content={seo.twitterSite} />
  <meta name="twitter:creator" content={seo.twitterCreator} />

  <!-- Technical SEO -->
  {seo.canonicalUrl && <link rel="canonical" href={seo.canonicalUrl} />}
  {seo.noIndex && <meta name="robots" content="noindex" />}
  {seo.noFollow && <meta name="robots" content="nofollow" />}
</head>

Astro Integration Example

---
import { AetherPageLoader } from '@aether-official/sites-sdk/astro';

const page = await AetherPageLoader.getPage(
  import.meta.env.AETHER_ORG_ID,
  import.meta.env.AETHER_SITE_ID,
  Astro.params.slug || 'index'
);

const seo = {
  title: page.metaTitle || page.title,
  description: page.metaDescription || '',
  ogTitle: page.ogTitle || page.metaTitle || page.title,
  ogDescription: page.ogDescription || page.metaDescription || '',
  // ... other SEO fields
};
---

<html>
  <head>
    <title>{seo.title}</title>
    <meta name="description" content={seo.description} />
    <meta property="og:title" content={seo.ogTitle} />
    <meta property="og:description" content={seo.ogDescription} />
    <!-- ... -->
  </head>
  <body>
    <!-- Your page content -->
  </body>
</html>

Support and Resources

Testing Tools

Google Rich Results Test: https://search.google.com/test/rich-results
Twitter Card Validator: https://cards-dev.twitter.com/validator
Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/

Learning Resources

Google Search Central: https://developers.google.com/search
Moz Beginner’s Guide to SEO: https://moz.com/beginners-guide-to-seo
Open Graph Protocol: https://ogp.me/

Getting Help

If you have questions about SEO features or need assistance:

Check the Aether documentation
Contact support through your dashboard
Review the SDK examples on GitHub

Changelog

v1.0.20 (Latest)

Full SEO meta tags support
Character counters for title/description fields
Fallback logic for OG tags
Enhanced Technical SEO options

Last Updated: November 10, 2025 SDK Version: 1.0.20+

SEO Features Guide

SEO Features Guide

Overview

Basic SEO

Meta Title

Meta Description

Keywords

Social Sharing (Open Graph)

OG Title

OG Description

Twitter Card

Card Type

Twitter Site

Twitter Creator

Technical SEO

Canonical URL

No Index

No Follow

SEO Workflow Best Practices

1. Start with Page Title and Slug

2. Complete Basic SEO First

3. Optimize for Social Sharing

4. Handle Technical SEO (If Needed)

5. Test Before Publishing

Character Limits Quick Reference

Common SEO Mistakes to Avoid

❌ Duplicate Meta Titles

❌ Keyword Stuffing

❌ Leaving Fields Empty

❌ Being Too Generic

❌ No Index on Important Pages

❌ Ignoring Social Meta Tags

SDK Implementation (For Developers)

Install Latest SDK

SEO Meta Tags Output

Accessing SEO Data

HTML Meta Tags Example

Astro Integration Example

Support and Resources

Testing Tools

Learning Resources

Getting Help

Changelog