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.

app/pages/news/[slug].vue

@@ -18,16 +18,43 @@
 </template>
 
 <script lang="ts" setup>
-const route = useRoute()
-const { data: n } = await useAsyncData('new-detail', () =>
-  queryCollection('news')
-    .path(`/news/${route.params.slug}`)
-    .first()
-)
+const route = useRoute();
+const { data: n } = await useAsyncData("new-detail", () =>
+  queryCollection("news").path(`/news/${route.params.slug}`).first()
+);
 
-useHead({
-  title: n.value?.title
-})
+if (n.value) {
+  // 1. 确定图片：优先用 ogImage，没有就用 cover
+  const shareImage = n.value.ogImage || n.value.cover;
+
+  // 2. 确定标题和描述：优先用 seoTitle，没有就用 title
+  const shareTitle = n.value.seoTitle || n.value.title;
+  const shareDesc = n.value.seoDescription || n.value.description;
+
+  // 3. 注入 SEO
+  useSeoMeta({
+    // 基础
+    title: shareTitle,
+    description: shareDesc,
+
+    // Open Graph (Facebook / WhatsApp)
+    ogTitle: shareTitle,
+    ogDescription: shareDesc,
+    ogImage: shareImage,
+    ogType: "article",
+
+    // Twitter Card
+    twitterCard: "summary_large_image",
+    twitterTitle: shareTitle,
+    twitterDescription: shareDesc,
+    twitterImage: shareImage,
+  });
+
+  // 如果你用了 nuxt-og-image 模块生成动态图
+  if (shareImage) {
+    defineOgImage({ url: shareImage });
+  }
+}
 </script>
 
-<style></style>
+<style></style>