// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'Home Page',
      description: 'Welcome to our website!'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: 'About Us',
      description: 'Learn more about our company.'
    }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.afterEach((to) => {
  document.title = to.meta.title || 'Default Title';
  const metaDescription = document.querySelector('meta[name="description"]');
  if (metaDescription) {
    metaDescription.setAttribute('content', to.meta.description || 'Default Description');
  }
});

export default router;

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm run dev

export default defineNuxtConfig({
  ssr: true, // เปิดใช้งาน SSR
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'This is an example Nuxt.js application.' }
      ]
    }
  }
});

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "My Company",
  "url": "https://www.mycompany.com",
  "logo": "https://www.mycompany.com/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-800-555-5555",
    "contactType": "Customer Service"
  }
}
</script>

<template>
  <div>
    <img v-lazy="image.src" alt="Image Description" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: {
        src: 'https://via.placeholder.com/300'
      }
    };
  }
};
</script>

User-agent: *
Disallow: /admin
Allow: /
Sitemap: https://www.mywebsite.com/sitemap.xml

npm install vue-sitemap

const Sitemap = require('vue-sitemap');
const sitemap = new Sitemap('https://www.mywebsite.com')
  .add('/home')
  .add('/about')
  .build('dist/sitemap.xml');