♿ opengraph

README.md

@@ -9,6 +9,7 @@ A Flask-based webcomic website with server-side rendering using Jinja2 templates
 - Archive page with thumbnail grid
 - RSS feed support
 - JSON API for programmatic access
+- Open Graph and Twitter Card metadata for social sharing
 - Responsive design
 - Server-side rendering with Jinja2
 - Clean, comic-focused layout

templates/base.html

@@ -4,6 +4,24 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{{ title }}{% endblock %} - Sunday Comics</title>
+
+    <!-- SEO Meta Tags -->
+    <meta name="description" content="{% block meta_description %}A webcomic about life, the universe, and everything{% endblock %}">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{% block meta_url %}{{ request.url }}{% endblock %}">
+    <meta property="og:title" content="{% block og_title %}{{ self.title() }} - Sunday Comics{% endblock %}">
+    <meta property="og:description" content="{% block og_description %}{{ self.meta_description() }}{% endblock %}">
+    <meta property="og:image" content="{% block og_image %}{{ request.url_root }}static/images/default-preview.png{% endblock %}">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="{% block twitter_url %}{{ self.meta_url() }}{% endblock %}">
+    <meta property="twitter:title" content="{% block twitter_title %}{{ self.og_title() }}{% endblock %}">
+    <meta property="twitter:description" content="{% block twitter_description %}{{ self.og_description() }}{% endblock %}">
+    <meta property="twitter:image" content="{% block twitter_image %}{{ self.og_image() }}{% endblock %}">
+
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <link rel="alternate" type="application/rss+xml" title="Sunday Comics RSS Feed" href="{{ url_for('static', filename='feed.rss') }}">
     {% block extra_css %}{% endblock %}

templates/comic.html

@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 
+{% block meta_description %}{{ comic.alt_text }}{% if comic.author_note %} - {{ comic.author_note }}{% endif %}{% endblock %}
+
+{% block og_image %}{{ request.url_root }}static/images/thumbs/{{ comic.filename }}{% endblock %}
+
 {% block content %}
 <div class="comic-container" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}">
     <div class="comic-header">

templates/index.html

@@ -1,5 +1,11 @@
 {% extends "base.html" %}
 
+{% if comic %}
+{% block meta_description %}{{ comic.alt_text }}{% if comic.author_note %} - {{ comic.author_note }}{% endif %}{% endblock %}
+
+{% block og_image %}{{ request.url_root }}static/images/thumbs/{{ comic.filename }}{% endblock %}
+{% endif %}
+
 {% block content %}
 <div class="comic-container" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}">
     <div class="comic-header">