Optimizing Vue Applications for SEO

Best practices for enhancing the search engine visibility of Vue applications through proper routing, metadata management, and performance optimization.
0 likes
10 views
Rule Content

{
  "title": "Optimizing Vue Applications for SEO",
  "description": "Best practices for enhancing the search engine visibility of Vue applications through proper routing, metadata management, and performance optimization.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-seo-routing",
      "description": "Ensure Vue Router is configured to use 'history' mode to create clean, SEO-friendly URLs without hash fragments.",
      "severity": "error",
      "pattern": "new VueRouter({ mode: 'hash' })",
      "replacement": "new VueRouter({ mode: 'history' })",
      "message": "Use 'history' mode in Vue Router to generate clean URLs for better SEO."
    },
    {
      "id": "vue-seo-meta-tags",
      "description": "Implement dynamic meta tags using vue-meta to manage page titles and descriptions for improved SEO.",
      "severity": "warning",
      "pattern": "export default {.*}",
      "replacement": "export default {\n  metaInfo: {\n    title: 'Your Page Title',\n    meta: [\n      { name: 'description', content: 'Your page description' }\n    ]\n  },\n  // other component options\n}",
      "message": "Add dynamic meta tags using vue-meta to enhance search engine visibility."
    },
    {
      "id": "vue-seo-lazy-loading",
      "description": "Utilize lazy loading for components to improve page load times and SEO performance.",
      "severity": "info",
      "pattern": "import ComponentName from '.*'",
      "replacement": "const ComponentName = () => import('path/to/ComponentName.vue')",
      "message": "Implement lazy loading for components to optimize performance and SEO."
    },
    {
      "id": "vue-seo-ssr-prerender",
      "description": "Consider using server-side rendering (SSR) or pre-rendering to ensure search engines can index your Vue application effectively.",
      "severity": "info",
      "pattern": "new Vue({.*})",
      "replacement": "// Consider using Nuxt.js for SSR or prerendering solutions like prerender-spa-plugin\nnew Vue({\n  // Vue instance options\n})",
      "message": "Implement SSR or pre-rendering to enhance SEO by making content accessible to search engines."
    },
    {
      "id": "vue-seo-structured-data",
      "description": "Include structured data markup (Schema.org) in your Vue application to provide search engines with detailed information about your content.",
      "severity": "info",
      "pattern": "<head>.*</head>",
      "replacement": "<head>\n  <!-- Other head elements -->\n  <script type=\"application/ld+json\">\n    {\n      \"@context\": \"http://schema.org\",\n      \"@type\": \"WebPage\",\n      \"name\": \"Your Page Name\",\n      \"description\": \"Your page description\",\n      \"url\": \"https://www.example.com/your-page-url\"\n    }\n  </script>\n</head>",
      "message": "Add structured data markup to provide search engines with detailed information about your content."
    },
    {
      "id": "vue-seo-image-optimization",
      "description": "Optimize images by adding descriptive alt attributes and implementing lazy loading to improve SEO and performance.",
      "severity": "info",
      "pattern": "<img src=\".*\">",
      "replacement": "<img src=\"your-image.jpg\" alt=\"Descriptive text\" loading=\"lazy\">",
      "message": "Add descriptive alt attributes and enable lazy loading for images to enhance SEO and performance."
    }
  ]
}
Optimizing Vue Applications for SEO

Rule Content

Categories

Tags
