seo fixes

alfg · alfg · commit 74d8acc1a94d · 2026-02-26T13:04:30.000+09:00
diff --git a/src/components/Recipe.vue b/src/components/Recipe.vue
@@ -197,6 +197,18 @@ export default {
           .filter(Boolean)
           .map((text, i) => ({ '@type': 'HowToStep', position: i + 1, text }))
       : [];
+    const drinkKeywords = Array.isArray(this.drink.keywords)
+      ? this.drink.keywords.map(k => k.toLowerCase())
+      : [];
+    const getRecipeCategory = () => {
+      if (drinkKeywords.includes('alcoholic')) return 'Cocktail';
+      if (drinkKeywords.includes('smoothie')) return 'Smoothie';
+      if (drinkKeywords.includes('coffee')) return 'Coffee Drink';
+      if (drinkKeywords.includes('tea')) return 'Tea';
+      if (drinkKeywords.includes('juice')) return 'Juice';
+      return 'Drink';
+    };
+    const imageUrl = this.drink.img ? `https://opendrinks.io${this.drink.img}` : undefined;
     return {
       title: metaTitle,
       titleTemplate: title => `${title} | Open Drinks`,
@@ -208,11 +220,11 @@ export default {
         { property: 'og:site_name', content: 'Open Drinks' },
         { property: 'og:url', content: `https://opendrinks.io${window.location.pathname}` },
         { property: 'og:description', content: metaDescription },
-        { property: 'og:image', content: `https://opendrinks.io${this.drink.img}` },
+        { property: 'og:image', content: imageUrl },
         { property: 'og:image:alt', content: this.drink.name },
         { itemprop: 'name', content: this.drink.name },
         { itemprop: 'description', content: metaDescription },
-        { itemprop: 'image', content: `https://opendrinks.io${this.drink.img}` },
+        { itemprop: 'image', content: imageUrl },
       ],
       script: [
         {
@@ -223,9 +235,10 @@ export default {
             name: this.drink.name,
             url: `https://opendrinks.io${window.location.pathname}`,
             description: metaDescription,
-            image: `https://opendrinks.io${this.drink.img}`,
+            image: imageUrl ? [imageUrl] : undefined,
             recipeIngredient,
             recipeInstructions,
+            recipeCategory: getRecipeCategory(),
             keywords: Array.isArray(this.drink.keywords)
               ? this.drink.keywords.join(', ')
               : undefined,
diff --git a/src/main.js b/src/main.js
@@ -3,8 +3,9 @@ import 'bootstrap-icons/font/bootstrap-icons.css';
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 import './assets/css/main.css';
 
-import { createApp, computed, getCurrentInstance } from 'vue';
-import { createUnhead, useHead } from '@unhead/vue';
+import { createApp } from 'vue';
+import { createHead } from '@unhead/vue/legacy';
+import { VueHeadMixin } from '@unhead/vue';
 import {
   createBootstrap,
   Components as BVNComponents,
@@ -19,20 +20,9 @@ import i18n from './i18n';
 
 const app = createApp(App);
 
-// @unhead/vue — manages <head> reactively
-const head = createUnhead();
-app.use(head);
-
-// Global mixin so Options API components can define a head() function
-app.mixin({
-  setup() {
-    const inst = getCurrentInstance();
-    if (inst?.type?.head) {
-      const headFn = inst.type.head;
-      useHead(computed(() => headFn.call(inst.proxy)));
-    }
-  },
-});
+// @unhead/vue/legacy — proper Vue plugin with Options API head() support
+app.use(createHead());
+app.mixin(VueHeadMixin);
 
 app.use(createBootstrap());
 
