SEO Implementation Guide for Obsidian Blogger

#seo#optimization#guide

SEO Implementation in Obsidian Blogger

This guide explains how SEO is specifically implemented in Obsidian Blogger, showing you how to optimize your blog posts using the built-in features.

Frontmatter Configuration

In Obsidian Blogger, SEO starts with the frontmatter of your markdown files. Here’s how each frontmatter field affects your SEO:

---
title: 'Your Post Title'
description: 'Your post description'
meta_title: 'Custom SEO Title'
meta_description: 'Custom SEO Description'
keywords:
  - keyword1
  - keyword2
og_title: 'Custom Social Title'
og_description: 'Custom Social Description'
og_type: article
twitter_card: summary_large_image
---

Title Hierarchy

  1. meta_title: Used specifically for SEO (if provided)
  2. title: Falls back as SEO title if meta_title is not provided
  3. og_title: Custom title for social sharing
  4. twitter_title: Specific title for Twitter (falls back to og_title)

Description Hierarchy

  1. meta_description: Primary SEO description
  2. description: Falls back as SEO description
  3. og_description: Custom description for social sharing
  4. twitter_description: Specific for Twitter (falls back to og_description)

Technical Implementation

BaseHead Component

The BaseHead.astro component handles all SEO-related meta tags:

  1. Basic Meta Tags
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content={Astro.generator} />
  1. SEO Meta Tags
<title>{finalMetaTitle}</title>
<meta name="title" content={finalMetaTitle} />
<meta name="description" content={finalMetaDescription} />
<meta name="keywords" content={keywords.join(', ')} />
<meta name="author" content={author} />
  1. Open Graph Tags
<meta property="og:type" content={og_type} />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={finalOgTitle} />
<meta property="og:description" content={finalOgDescription} />
<meta property="og:image" content={absoluteOgImage} />
  1. Twitter Cards
<meta property="twitter:card" content={twitter_card} />
<meta property="twitter:title" content={finalTwitterTitle} />
<meta property="twitter:description" content={finalTwitterDescription} />
<meta property="twitter:image" content={absoluteTwitterImage} />

Image Optimization

  • Featured images are automatically optimized
  • Alt text is required for accessibility and SEO
  • Images are served with proper dimensions
  • Lazy loading is implemented for better performance
<img
    width={1020}
    height={510}
    src={featured_image}
    alt={featured_image_alt || ''}
/>

URL Structure

URLs are automatically optimized:

  1. Clean, descriptive URLs based on file names
  2. Proper handling of special characters
  3. SEO-friendly URL structure
  4. Automatic canonical URL generation
<link rel="canonical" href={canonical_url || canonicalURL} />

Performance Optimization

Built-in performance features that affect SEO:

  1. CSS Optimization
/* Efficient loading of fonts */
@import url('https://api.fontshare.com/v2/css?f[]=onest@400,500,600,700&f[]=sora@400,600,700&display=swap');
  1. Responsive Design
@media (max-width: 768px) {
    /* Mobile-friendly optimizations */
}

Content Structure

The blog automatically implements SEO-friendly content structure:

  1. Proper Heading Hierarchy
<h1>{title}</h1>
{subtitle && <div class="subtitle">{subtitle}</div>}
  1. Semantic HTML
<article>
    <div class="prose">
        <div class="title">
            <!-- Content -->
        </div>
    </div>
</article>

How to Use

  1. Create a New Post

    • Create a markdown file in src/content/blog/
    • Add the required frontmatter
    • Write your content using proper markdown structure

  2. Optimize Images

    • Place images in the public directory
    • Use relative paths in your markdown
    • Provide descriptive alt text

  3. Add Meta Information

    • Always include a description
    • Add relevant keywords
    • Customize social sharing metadata if needed

  4. Check Technical Aspects

    • Ensure proper heading hierarchy
    • Use descriptive links
    • Include alt text for all images

Best Practices

  1. Frontmatter

    • Always provide a unique title and description
    • Keep titles under 60 characters
    • Keep descriptions between 150-160 characters

  2. Content Structure

    • Use only one H1 per page
    • Structure content with proper heading hierarchy
    • Use descriptive anchor text for links

  3. Images

    • Always provide alt text
    • Use descriptive file names
    • Optimize image sizes before uploading

  4. URLs

    • Use descriptive file names for your markdown files
    • Avoid special characters in file names
    • Keep URLs concise and meaningful

Conclusion

Obsidian Blogger’s SEO implementation provides a robust foundation for search engine optimization. By properly utilizing the frontmatter fields and following the built-in conventions, your blog posts will be well-optimized for search engines and social sharing.