From 1dac042d253ca289fbc8dfd392ba295fd2517dea Mon Sep 17 00:00:00 2001 From: mi Date: Sat, 15 Nov 2025 15:00:05 +1000 Subject: [PATCH] :memo: seo --- README.md | 204 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 204 insertions(+) diff --git a/README.md b/README.md index 95fd62e..980b459 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,12 @@ A Flask-based webcomic website with server-side rendering using Jinja2 templates - [Testing Accessibility](#testing-accessibility) - [Accessibility Best Practices for Comic Creators](#accessibility-best-practices-for-comic-creators) - [Accessibility Score](#accessibility-score) +- [Search Engine Optimization (SEO)](#search-engine-optimization-seo) + - [SEO Features](#seo-features) + - [Using SEO Features](#using-seo-features) + - [SEO Best Practices for Webcomics](#seo-best-practices-for-webcomics) + - [SEO Checklist for Launch](#seo-checklist-for-launch) + - [Common SEO Questions](#common-seo-questions) - [Project Structure](#project-structure) - [Setup](#setup) - [Environment Variables](#environment-variables) @@ -159,6 +165,7 @@ Don't have a server? No problem! Here are beginner-friendly options to get your - Open Graph and Twitter Card metadata for social sharing - Server-side rendering with Jinja2 - **Comprehensive accessibility features** (WCAG compliant) +- **Search engine optimized** (sitemap, robots.txt, meta tags, canonical URLs) ## Accessibility @@ -253,6 +260,203 @@ Sunday Comics follows WCAG 2.1 Level AA guidelines and scores **9.5/10** in acce - ARIA attributes ✅ - Semantic HTML ✅ +## Search Engine Optimization (SEO) + +Sunday Comics is built with SEO best practices to help readers discover your webcomic through search engines and social media. + +### SEO Features + +#### ✅ Sitemap & Crawling +- **XML Sitemap** - Automatically generated sitemap that includes all comics, archive, and about pages +- **Robots.txt** - Dynamically generated with correct URLs for your domain +- **Canonical URLs** - Every page has a canonical URL to prevent duplicate content issues +- **Semantic HTML** - Proper use of heading hierarchy (h1, h2, h3) for better indexing +- **Language declaration** - `lang="en"` attribute helps search engines understand your content + +#### ✅ Meta Tags & Descriptions +- **Meta descriptions** - Customizable descriptions for each page +- **Page titles** - SEO-friendly title format: "Comic Title - Your Comic Name" +- **RSS feed link** - Included in HTML head for feed discovery +- **Viewport meta tag** - Mobile-friendly configuration + +#### ✅ Social Media Sharing +- **Open Graph tags** - Optimized previews when sharing on Facebook, LinkedIn, Discord, etc. +- **Twitter Cards** - Rich media cards with images when sharing on Twitter/X +- **Custom preview images** - Set comic-specific images for social sharing +- **Shareable URLs** - Clean, readable URLs like `/comic/1` instead of query parameters + +#### ✅ Content Optimization +- **Alt text requirement** - All comics must have descriptive alt text (helps SEO and accessibility) +- **Structured data** - Semantic HTML provides context to search engines +- **Mobile-responsive** - Mobile-friendly design is a ranking factor for Google +- **Fast loading** - Server-side rendering provides quick initial page loads + +### Using SEO Features + +#### Generate Your Sitemap + +After adding or updating comics, regenerate your sitemap: + +```bash +python scripts/generate_sitemap.py +``` + +This creates `static/sitemap.xml` with: +- Homepage (priority: 1.0, updated weekly) +- Archive page (priority: 0.9, updated weekly) +- About page (priority: 0.7, updated monthly) +- Individual comic pages (priority: 0.8, never updated) + +**Submit your sitemap to search engines:** +- Google Search Console: `https://search.google.com/search-console` +- Bing Webmaster Tools: `https://www.bing.com/webmasters` + +Your sitemap URL will be: `https://yourdomain.com/sitemap.xml` + +#### Configure robots.txt + +The robots.txt file is automatically generated at `/robots.txt` with your correct domain from `SITE_URL` in `comics_data.py`. It includes: +- Sitemap location +- Allows all search engine crawlers +- No disallowed paths (everything is indexable) + +**Update your domain:** +```python +# In comics_data.py +SITE_URL = 'https://yourcomic.com' # Update this for production! +``` + +#### Customize Meta Descriptions + +By default, pages use a generic description. To customize, edit the templates: + +**templates/base.html** - Default description (line 9): +```html + +``` + +**templates/comic.html** - Comic-specific descriptions: +```html +{% block meta_description %}{{ comic.alt_text }}{% endblock %} +``` + +**templates/index.html** - Homepage description: +```html +{% block meta_description %}Read the latest comic from Your Comic Name{% endblock %} +``` + +#### Optimize Social Sharing + +**Set a default preview image:** + +1. Create a 1200x630px image (recommended size for Open Graph) +2. Save it in `static/images/` (e.g., `default-preview.png`) +3. Update `base.html` line 17: + ```html + + ``` + +**Comic-specific sharing images:** + +The `comic.html` template automatically uses each comic's image for social sharing. When someone shares a comic link, the actual comic image appears in the preview. + +#### Generate RSS Feed + +RSS feeds help readers subscribe and improve discoverability: + +```bash +python scripts/generate_rss.py +``` + +This creates `static/feed.rss` which is automatically linked in the HTML head. Readers can subscribe via: +- `https://yourdomain.com/static/feed.rss` + +RSS feeds also signal to search engines that your site has regularly updated content. + +### SEO Best Practices for Webcomics + +#### 1. Write Descriptive Alt Text +Alt text serves dual purpose - accessibility AND SEO: +- Include character names and actions +- Describe the scene setting +- Mention any important dialogue or text +- Keep it concise but informative (1-3 sentences) + +**Good examples:** +- ✅ "Sarah discovers her cat plotting world domination while reading a mysterious ancient book" +- ✅ "The hero confronts the villain in a dramatic rooftop battle at sunset" +- ❌ "Comic" (too vague) +- ❌ "Comic about a cat" (not descriptive enough) + +#### 2. Use Meaningful Comic Titles +If you set a title for each comic (optional), make it: +- Descriptive of the comic's content or theme +- Unique (don't reuse titles) +- Natural language (avoid "Comic #1" style) +- Under 60 characters for best search result display + +#### 3. Update Regularly +- Consistent publishing schedule signals quality to search engines +- Run `generate_sitemap.py` after each new comic +- Update your about page periodically + +#### 4. Build Backlinks +- List your comic in webcomic directories +- Use the shareable banner feature to encourage fan sites to link back +- Engage with other webcomic communities +- Share on social media regularly + +#### 5. Monitor Your SEO +Free tools to track your webcomic's search performance: +- **Google Search Console** - See how people find your site, track indexing issues +- **Bing Webmaster Tools** - Similar to Google, for Bing search +- **Google Analytics** - Track visitor behavior (requires separate setup) + +#### 6. Domain and URL Structure +- Use a memorable domain name +- Keep URLs clean: `yourcomic.com/comic/1` ✅ vs `yourcomic.com/?p=1` ❌ +- Sunday Comics uses SEO-friendly URLs by default + +#### 7. Page Speed +- Optimize comic images (use compression, appropriate file formats) +- Consider creating thumbnails for the archive page +- Use a CDN for static assets if you have high traffic +- Sunday Comics uses server-side rendering for fast initial loads + +### SEO Checklist for Launch + +Before going live with your webcomic: + +- [ ] Update `SITE_URL` in `comics_data.py` to your production domain +- [ ] Generate sitemap: `python scripts/generate_sitemap.py` +- [ ] Generate RSS feed: `python scripts/generate_rss.py` +- [ ] Customize meta description in `templates/base.html` +- [ ] Create a 1200x630px social preview image +- [ ] Write descriptive alt text for all comics +- [ ] Set up Google Search Console account +- [ ] Submit your sitemap to Google Search Console +- [ ] Submit your sitemap to Bing Webmaster Tools +- [ ] Test social sharing on Facebook, Twitter, Discord +- [ ] Update your about page with relevant keywords +- [ ] Set up RSS feed in Feedly or similar to verify it works + +### Common SEO Questions + +**Q: How long until my comic appears in Google?** +A: Typically 1-4 weeks after submitting your sitemap. You can request indexing in Google Search Console to speed this up. + +**Q: Should I include keywords in my comic alt text?** +A: Only naturally. Focus on accurate descriptions first. Keyword stuffing hurts SEO and accessibility. + +**Q: Do I need to regenerate the sitemap for every comic?** +A: Yes, run `python scripts/generate_sitemap.py` after adding new comics so search engines know about them. + +**Q: What about social media hashtags?** +A: Hashtags don't directly affect search engine SEO, but they help social media discoverability. Use relevant community hashtags like #webcomics #comics #indiecomics. + +**Q: Should I create a blog for my comic?** +A: Optional, but regular blog content about your comic's development can improve SEO through fresh content and more keywords. + ## Project Structure ```