feat(news): enhance SEO meta tags and add clarification article

- Update news detail page to use `useSeoMeta` for comprehensive Open Graph and Twitter Card support.
- Implement logic to prioritize `ogImage` and `seoTitle` with fallbacks to standard fields.
- Add new content article clarifying the distinction between the Alumni Association and the Alumni Liaison Office.
- Add documentation drafts for onboarding messages and announcement design.

docs/20251128-misunderstanding-yphsalumni-and-alumnigroup.md

@@ -0,0 +1,54 @@
+下面给你一个**实用、可直接交给设计师落地的公告封面设计方案**，基于你们「校友会 vs 校友联络处」容易混淆这一情境，重点是**清晰、正式、易识别、避免再次误会**。
+
+---
+
+# 🎨 公告封面设计方案（适用于官网首页 / Banner / WhatsApp 分享图）
+
+## **1. 视觉主题**
+
+**关键词：清晰区隔、正式感、组织可信度**
+色调保持学校主色系（如#fb9e3a、#fcef91），并加上一条亮色做强调，提升官方感。
+
+---
+
+## **2. 版式构成**
+
+### ### **A. 顶部：醒目的组织身份**
+
+**「永平中学校友会」**
+
+* 使用学校和校友会 logo（左） + 标题文字（右）
+* 字体使用较厚重、带权威感的 Serif / Sans Serif
+* 加上小字「官方公告」标签
+
+---
+
+### **B. 中间：公告主标题（视觉核心）**
+
+标题建议直接点出“澄清 & 提醒”的意图：
+
+* **《校友会与校友联络处群组区分公告》**
+
+字体加粗，居中，字号大，确保在手机上也能一眼看懂。
+
+---
+
+### **C. 配图 / 图标建议**
+
+#### **徽章背景淡化**
+
+校徽做 20% 透明大背景，体现官方权威。
+
+---
+
+## **3. 尺寸 & 格式（设计师直接可用）**
+
+* Website banner: **1920×1080**
+
+---
+
+## **4. 文案建议（印在封面下方的小字）**
+
+> “近期部分校友误将校友联络处群组误认为校友会官方群组，特此澄清。”
+
+---