update: OGP追加

TeamOpenWorld · Nov 30, 2020 · 01a1650 · 01a1650
1 parent c29f5d8
commit 01a1650
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 56 deletions.
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -1,50 +1,60 @@
 export default {
-  // Target (https://go.nuxtjs.dev/config-target)
-  target: 'static',
-
-  // Global page headers (https://go.nuxtjs.dev/config-head)
-  head: {
-    titleTemplate: '%s - TeamOpenWorld',
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' }
+    // Target (https://go.nuxtjs.dev/config-target)
+    target: "static",
+
+    // Global page headers (https://go.nuxtjs.dev/config-head)
+    head: {
+        titleTemplate: "%s - TeamOpenWorld",
+        meta: [
+            { charset: "utf-8" },
+            {
+                name: "viewport",
+                content: "width=device-width, initial-scale=1"
+            },
+            {
+                hid: "description",
+                name: "description",
+                content: "Official site of TeamOpenWorld."
+            },
+            {
+                hid: "og:site_name",
+                property: "og:site_name",
+                content: "TeamOpenWorld Official Site"
+            },
+            { hid: "og:type", property: "og:type", content: "website" },
+            { hid: "og:url", property: "og:url", content: "https://open-w.net" },
+            { hid: "og:image", property: "og:image", content: "https://i.gyazo.com/03d4e0f0958f116a0f6162bf2318a381.png" },
+            { name: "twitter:card", content: "summary" }
+        ],
+        link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
+    },
+
+    // Global CSS (https://go.nuxtjs.dev/config-css)
+    css: [],
+
+    // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
+    plugins: [],
+
+    // Auto import components (https://go.nuxtjs.dev/config-components)
+    components: true,
+
+    // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
+    buildModules: [],
+
+    // Modules (https://go.nuxtjs.dev/config-modules)
+    modules: [
+        // https://go.nuxtjs.dev/bootstrap
+        "bootstrap-vue/nuxt",
+        "nuxt-webfontloader",
+        "@nuxtjs/axios"
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
-  },
-
-  // Global CSS (https://go.nuxtjs.dev/config-css)
-  css: [
-  ],
-
-  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [
-  ],
-
-  // Auto import components (https://go.nuxtjs.dev/config-components)
-  components: true,
-
-  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
-  buildModules: [
-  ],
-
-  // Modules (https://go.nuxtjs.dev/config-modules)
-  modules: [
-    // https://go.nuxtjs.dev/bootstrap
-    'bootstrap-vue/nuxt',
-    'nuxt-webfontloader',
-    '@nuxtjs/axios'
-  ],
-
-  webfontloader: {
-    google: {
-      families: ['Noto+Sans+JP']
-    }
-  },
-
-  // Build Configuration (https://go.nuxtjs.dev/config-build)
-  build: {
-  }
-}
+
+    webfontloader: {
+        google: {
+            families: ["Noto+Sans+JP"]
+        }
+    },
+
+    // Build Configuration (https://go.nuxtjs.dev/config-build)
+    build: {}
+};
diff --git a/pages/index.vue b/pages/index.vue
@@ -17,20 +17,34 @@
         <div class="footer mt-5 py-3">
             <b-container>
                 <p>&copy; TeamOpenWorld 2020</p>
-                <a href="https://twitter.com/openworld_net" target="_blank">Twitter</a>
+                <a href="https://twitter.com/openworld_net" target="_blank"
+                    >Twitter</a
+                >
             </b-container>
         </div>
     </div>
 </template>
 
 <script>
 export default {
-  head() {
-    return {
-      title: 'Top'
+    head() {
+        return {
+            title: "Top",
+            meta: [
+                {
+                    hid: "og:title",
+                    property: "og:title",
+                    content: "Top - TeamOpenWorld"
+                },
+                {
+                    hid: "og:description",
+                    property: "og:description",
+                    content: "Official site of TeamOpenWorld."
+                }
+            ]
+        };
     }
-  }
-}
+};
 </script>
 
 <style scoped>
@@ -40,10 +54,10 @@ export default {
 
 .header {
     padding: 10vh 0;
-    background: linear-gradient(-135deg,#e1f6ff, #47c551);
+    background: linear-gradient(-135deg, #e1f6ff, #47c551);
 }
 
 .footer {
-    border-top:2px solid black;
+    border-top: 2px solid black;
 }
 </style>