seo fixes

Author: alfg

src/App.vue

@@ -61,8 +61,14 @@ export default {
   head() {
     return {
       title: 'Open Drinks',
+      titleTemplate: '%s | Open Drinks',
       htmlAttrs: { lang: 'en' },
-      meta: [{ name: 'description', content: 'Open Source Drink Recipes' }],
+      meta: [
+        { name: 'description', content: 'Open Source Drink Recipes' },
+        { property: 'og:site_name', content: 'Open Drinks' },
+        { property: 'og:locale', content: 'en_US' },
+        { name: 'twitter:card', content: 'summary' },
+      ],
     };
   },
 };

src/components/Recipe.vue

@@ -209,22 +209,37 @@ export default {
       return 'Drink';
     };
     const imageUrl = this.drink.img ? `https://opendrinks.io${this.drink.img}` : undefined;
+    const url = `https://opendrinks.io${window.location.pathname}`;
     return {
       title: metaTitle,
-      titleTemplate: title => `${title} | Open Drinks`,
-      htmlAttrs: { lang: 'en' },
+      titleTemplate: '%s | Open Drinks',
+      link: [{ rel: 'canonical', href: url }],
       meta: [
+        // Basic SEO
         { name: 'description', content: metaDescription },
+        // Open Graph
         { property: 'og:title', content: metaTitle },
         { property: 'og:type', content: 'article' },
+        { property: 'og:url', content: url },
         { property: 'og:site_name', content: 'Open Drinks' },
-        { property: 'og:url', content: `https://opendrinks.io${window.location.pathname}` },
+        { property: 'og:locale', content: 'en_US' },
         { property: 'og:description', content: metaDescription },
-        { 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: imageUrl },
+        ...(imageUrl
+          ? [
+              { property: 'og:image', content: imageUrl },
+              { property: 'og:image:alt', content: metaTitle },
+            ]
+          : []),
+        // Twitter / X
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:title', content: metaTitle },
+        { name: 'twitter:description', content: metaDescription },
+        ...(imageUrl
+          ? [
+              { name: 'twitter:image', content: imageUrl },
+              { name: 'twitter:image:alt', content: metaTitle },
+            ]
+          : []),
       ],
       script: [
         {
@@ -233,7 +248,7 @@ export default {
             '@context': 'https://schema.org/',
             '@type': 'Recipe',
             name: this.drink.name,
-            url: `https://opendrinks.io${window.location.pathname}`,
+            url,
             description: metaDescription,
             image: imageUrl ? [imageUrl] : undefined,
             recipeIngredient,

src/views/ShotRecipes.vue

@@ -116,17 +116,23 @@ export default {
     const title = '50+ Best Shot Recipes (Easy Party & Bar Shots Guide)';
     const description =
       'Discover 50+ of the best shot recipes for parties and home bars. From sweet layered shots to strong classic shooters, find easy step-by-step recipes and ingredients.';
+    const url = `https://opendrinks.io${window.location.pathname}`;
     return {
       title,
-      titleTemplate: t => `${t} | Open Drinks`,
-      htmlAttrs: { lang: 'en' },
+      link: [{ rel: 'canonical', href: url }],
       meta: [
+        // Basic SEO
         { name: 'description', content: description },
+        // Open Graph
         { property: 'og:title', content: title },
         { property: 'og:type', content: 'website' },
-        { property: 'og:site_name', content: 'Open Drinks' },
-        { property: 'og:url', content: `https://opendrinks.io${window.location.pathname}` },
+        { property: 'og:url', content: url },
+        { property: 'og:locale', content: 'en_US' },
         { property: 'og:description', content: description },
+        // Twitter / X
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:title', content: title },
+        { name: 'twitter:description', content: description },
       ],
       script: [
         {