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
283 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."
}
]
}