Laravel+Vue项目多分类标签SEO优化：URL调整方案咨询

为实现SEO优化，我需要在选择分类或标签时调整页面URL。当前项目基于Laravel后端与Vue前端开发，现有相关代码如下：

路由定义 #

Route::post('/filter', [GalleryController::class, 'getByFilter'])->name('filter');

Vue端筛选方法 #

filter() {
    let vm = this
    vm.showLoader = true;
    const filters = {
        tags: vm.selectedTags,
        categories: vm.selectedCategories
    }
    axios.post('/gallery/filter', filters).then(response => {
        vm.showLoader = false;
        console.log(response);
        vm.products = response.data.data;
    })

},

Laravel端数据筛选方法 #

public function getByFilters($slugs)
{
    $categories = $slugs['categories'] ?? [];
    $tags = $slugs['tags'] ?? [];
    return Model::query()
        ->where('is_active', true)
        ->when($categories, function ($query) use ($categories) {
            $query->whereHas('categories', fn (Builder $query) => $query->whereIn('slug', $categories));
        })
        ->when($tags, function ($query) use ($tags) {
            $query->whereHas('tags', fn (Builder $query) => $query->whereIn('slug', $tags));
        })
        ->paginate(self::PAGINATE_LIMIT);
}

我已尝试在Laravel端构建带参数的URL并跳转，代码如下：

$urlParameters = [];

if (!empty($categories)) {
    $urlParameters['categories'] = implode(',', $categories);
}

if (!empty($tags)) {
    $urlParameters['tags'] = implode(',', $tags);
}

$finalUrl = "/gallery/filter?" . http_build_query($urlParameters);
$testUrl = '/gallery/filter/test';
return redirect($testUrl);

但我不确定在Laravel端还是Vue端调整URL的方式更合适、更规范，希望得到专业指导。

核心原则：优先前端控制URL，后端配合处理GET请求 #

SEO要求URL可被爬虫抓取，而POST请求的参数不会出现在URL中，爬虫无法识别，所以首先要把筛选请求从POST改成GET，让筛选参数暴露在URL里。

具体方案： #

1. 调整后端路由与处理逻辑

   • 将POST路由改为GET：

     Route::get('/filter', [GalleryController::class, 'getByFilter'])->name('filter');
     

   • 修改getByFilter方法，从请求的Query参数中获取筛选条件：

     public function getByFilter(Request $request)
     {
         $categories = $request->query('categories') ? explode(',', $request->query('categories')) : [];
         $tags = $request->query('tags') ? explode(',', $request->query('tags')) : [];
         
         return Model::query()
             ->where('is_active', true)
             ->when($categories, function ($query) use ($categories) {
                 $query->whereHas('categories', fn (Builder $query) => $query->whereIn('slug', $categories));
             })
             ->when($tags, function ($query) use ($tags) {
                 $query->whereHas('tags', fn (Builder $query) => $query->whereIn('slug', $tags));
             })
             ->paginate(self::PAGINATE_LIMIT);
     }
     

2. 前端控制URL更新与数据获取

   • 筛选时，先构建包含参数的URL，更新浏览器地址栏，再发送GET请求获取数据：

     filter() {
         let vm = this
         vm.showLoader = true;
         
         // 构建URL参数
         const params = new URLSearchParams();
         if (vm.selectedTags.length) {
             params.append('tags', vm.selectedTags.join(','));
         }
         if (vm.selectedCategories.length) {
             params.append('categories', vm.selectedCategories.join(','));
         }
         
         // 更新地址栏URL（如果使用Vue Router）
         if (this.$route) {
             this.$router.push({ 
                 path: '/gallery/filter', 
                 query: {
                     tags: vm.selectedTags.join(','),
                     categories: vm.selectedCategories.join(',')
                 }
             });
         } else {
             // 原生方式更新URL
             window.history.pushState({}, '', `/gallery/filter?${params.toString()}`);
         }
         
         // 发送GET请求
         axios.get(`/gallery/filter?${params.toString()}`).then(response => {
             vm.showLoader = false;
             vm.products = response.data.data;
         })
     },
     

为什么选前端控制URL？ #

• 避免不必要的页面跳转：后端跳转会导致页面刷新，用户体验差，前端更新URL是无刷新的，同时能保留筛选状态。
• 更灵活的状态管理：前端可以直接根据URL参数初始化筛选状态（比如页面刷新时，从URL解析参数还原选中的分类和标签），这对SEO和用户体验都很重要。
• 符合SPA设计逻辑：Vue作为前端框架，SPA的状态与URL同步是最佳实践，能让页面状态与URL一一对应，方便分享和爬虫抓取。

额外优化点 #

• 页面刷新时，在Vue组件的created或mounted钩子中解析URL的query参数，设置selectedTags和selectedCategories，还原筛选状态。
• 后端返回的分页链接要带上当前筛选参数，确保分页时URL保持正确的筛选状态。

内容的提问来源于stack exchange，提问作者Olexandr Lytvynenko