laravel - 如何使动态元数据更改 Vue 中 SEO 的实际页面源-6ren

laravel - 如何使动态元数据更改 Vue 中 SEO 的实际页面源

转载作者：行者123 更新时间：2023-12-04 16:32:04

24

4

我目前正在通过 Vue 路由器更改页面标题和(在不久的将来)元数据，如下所示:

$route (to, from){
    document.title = to.meta.title
}

当我检查标题时，这很好用:

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Updated Page Title</title>
        <link href=" /css/app.css?id=b21c63ebd0cb0655a4d8" rel="stylesheet">
    </head>

但是，当我查看页面源代码时，它会显示旧信息:

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        *** <title>Old Page Title</title> ***
        <link href=" /css/app.css?id=b21c63ebd0cb0655a4d8" rel="stylesheet">
    </head>

出于 SEO 的目的，我需要标题和元信息都是动态的。我的问题有两个:

使用 vue-meta 插件会解决原始来源的页面标题问题吗？

我是否必须使用诸如 SSR 或预渲染之类的东西来获取动态元信息，或者他们是否有任何其他类似于这种方法的路线来做到这一点？

最佳答案

vue-meta仅在执行 JavaScript 并呈现页面时应用。所以，不，当您查看页面源代码时，您不会看到这些元标记。

你需要 SSR 还是预渲染？也许。这取决于您想要实现的目标。如果在网络爬虫支持 JS 之前拥有出色的 SEO 对您的网站至关重要？好的。

当然，您仍然可以在后端添加一些元标记。根据您使用的语言/框架，有很多选项可以帮助实现这一目标。例如，对于 Laravel，您可以查看 this包出来。
此问题的另一个解决方法是将您的请求分类为来自前端的请求和来自爬虫的请求。例如，您可以通过检查请求中的用户代理来实现，然后您可以相应地调整爬虫的响应(例如，将元标记注入(inject) header )。

这是我建议的解决方法的示例:
IndexController.php

<?php

declare(strict_types=1);

namespace App\Http\Controllers;

use Butschster\Head\Facades\Meta;
use Butschster\Head\Packages\Entities\OpenGraphPackage;

class IndexController extends Controller
{
    const CRAWLERS = [
        'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',
        'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 (compatible; AdsBot-Google-Mobile; +http://www.google.com/mobile/adsbot.html)',
        'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Safari/537.36',
        'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',
        'Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)',
        'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534+ (KHTML, like Gecko) BingPreview/1.0b',
        'Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)',
        'Googlebot-Image/1.0',
        'Mediapartners-Google',
        'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)',
        'facebookexternalhit/1.1',
        'Twitterbot/1.0',
        'TelegramBot (like TwitterBot)',
    ];

    public function index()
    {
        if ($this->isACrawler()) {
            $this->applyMetaTags();

            return view('layouts.crawler');
        }

        return view('layouts.index');
    }

    public function isACrawler()
    {
        if (in_array(request()->userAgent(), self::CRAWLERS)) {
            return true;
        }

        return false;
    }

    private function applyMetaTags()
    {
        $title = 'Something';
        $description = 'Something else';

        Meta::prependTitle($title)
            ->addMeta('description', ['content' => $description]);

        $og = new OpenGraphPackage('some_name');

        $og->setType('Website')
            ->setSiteName('Your website')
            ->setTitle($title)
            ->setUrl(request()->fullUrl())
            ->setDescription($description);
        
        Meta::registerPackage($og);
    }
}

布局/crawler.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        @meta_tags

        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
    </head>
</html>

如您所见，我正在创建一个爬虫列表，然后检查请求以查看它是否来自爬虫，如果为真，则应用 metatags并返回我为此目的创建的特定布局。
注意事项:

这不会将元标记应用于您的正常请求。

您需要找到一种过滤请求 URL 并动态应用标签的方法。例如使用正则表达式。

关于laravel - 如何使动态元数据更改 Vue 中 SEO 的实际页面源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65150707/

24

4

0

文章推荐： .htaccess - 301 使用某些特定 URL 重定向到新域

文章推荐： html - 使用链接 rel "og:url"时可以省略 ="canonical"

Git 元数据 - 有没有办法添加独立于每个分支的 git 元数据？
最终目标:我想要由 Git 跟踪的文件，但让这些文件对于所有分支都是相同的版本。如果您使用 gitignore 文件，则所有分支的文件都是相同的，但不幸的是不会被跟踪。当我跑 git push或类似的
pdf - 删除 PDF 元数据(删除完整的 PDF 元数据)
我想从 PDF 文件中删除元数据。我已经尝试使用“exiftool”、“pdftk”和“qpdf”来删除元数据(建议的方法 - https://gist.github.com/hubgit/60783
amazon-web-services - AWS Lambda 元数据，如用于 lambda 的 EC2 元数据
AWS EC2 元数据从 EC2 提供了有关其自身的必要信息(废话!) - 是否有任何与 lambda 等效的信息。我了解与 EC2 不同的 lambda 函数的 Multi-Tenancy 和短期
ffmpeg 元数据
我正在使用 libavformat(即 C 库)将 MPEG4/H264 编码为 mp4 文件，我想在 MP4 文件中添加一些元数据，例如日期/时间。有人可以告诉我如何做到这一点吗？谢谢。最佳答案
Java从jpg图像中提取exif(元数据)
有谁知道任何允许从 .jpg 图像中提取 java 元数据的类？或者可能是一些有用的代码？谢谢! 最佳答案我维护着一个库，正是这样做的。 https://github.com/drewnoakes
JavaFX 元数据
我尝试找出如何从媒体获取元数据有一段时间了，但到目前为止没有任何效果。我有类 Song，其中有 SimpleStringProperties，如标题、艺术家等。我尝试在类构造函数中为它们设置值: pr
c# - 您将如何引用查找/元数据？
我已经多次遇到这个问题，并且从不喜欢所选择的解决方案。假设您在数据库中有一个状态列表(作为一个简单的示例)。在您的代码隐藏中，您希望能够通过 ID 引用状态并通过 Intellisense 获得状态列
ios - 谷歌身份验证时苹果应用被拒绝(元数据)
我在我的应用程序中使用 google 登录并从 google 获取用户个人资料信息。我已经测试过，它在我这边工作正常，但苹果拒绝了它。我没有发现任何错误。苹果拒绝原因:“Verify is you
MySQL 元数据(使用情况和性能统计)
我正在开发一个基于 MySQL 数据库的 Web 应用程序。我需要收集和分析使用情况和性能统计数据。统计数据将针对非技术人员。如何实现此功能？您应该将我的问题视为编程问题，但如果您知道合适的工具或扩
表行的 MySQL 元数据
我对如何保存表格行的元数据有疑问。例如，我有一个表，其中包含有关图像 items_images 的数据。编号，整数(20)标题，VARCHAR(255)添加日期，DATETIME... 现在我想添加
java - <元数据>是什么意思？
我不明白为什么我必须在 list 中使用两个元数据元素才能开始运行我的 Google Maps API v2 项目。这些标签的用途是什么？最佳答案元数据是指有关数据的数据。关于java -
c# - 获取项目的内容类型列/元数据
如何获取 SharePoint 文档库中项目的内容类型列或元数据？此链接提供了我不需要的文件属性 http://msdn.microsoft.com/en-us/library/microsoft.
c# - 向文件添加评论 [元数据]
我很确定这是可能的，只是不确定它的术语是什么以及如何去做。基本上，如果您右键单击任何文件并转到属性，然后转到摘要，您可以向文件添加评论等。我想知道的是，您将如何从 C# 中有问题地执行此操作。此外，
iphone - UIImage 元数据
在我的应用程序中，我正在从 Assets 库中检索 UIImage，该图像具有元数据。然后，该应用程序会调整图像大小并旋转图像，从而创建新图像。新图像没有预期的原始元数据，但如何在上传前将元数据添加回
浅谈 JDBC 元数据
Java 通过JDBC获得连接以后，得到一个Connection 对象，可以从这个对象获得有关数据库管理系统的各种信息，包括数据库中的各个表，表中的各个列，数据类型，触发器，存储过程等各方面的信息。
breeze - 是否可以扩展从服务器接收到的 Breeze 元数据？
想知道是否有人知道扩展或配置 Breeze 以便服务器返回实体元数据中的附加信息的任何方法？我想使用这些附加数据来协助验证。假设我有一个应用了一些数据注释的实体模型: public class Pe
metadata - 来自导出部件的 MEF 元数据
我正在寻找将 MEF 用于我正在构建的应用程序的插件系统。我希望每个组件在(GUID)上都有一个我希望能够查找的标识符。但是，此 ID 在处理导出部件时也很有用。有没有一种方法可以让我在导出的部分上
video - 修复错误的 MP4 元数据
我对不完整的视频有疑问。例如上传失败的视频。如果您使用 ffmpeg -i 检查其元数据您将获得 1 小时的持续时间，但实际上只有 10mb 已上传到服务器，实际持续时间约为 7 分钟。查找这些视频
video - 无法覆盖 ffmpeg 元数据
我在使用 FFmpeg 覆盖视频文件上的元数据时遇到了一些问题，这些文件之前已经添加了元数据(FFmpeg 也添加了以前的元数据)。所以我使用ffmpeg -i path/to/video file
collections - 加入的项目组上的 MSBuild 元数据
我有两个项目组想要加入: A B 使用常规连接会给我一个包含 4 个项目的集合: ServerA with Metadata A; ServerB with Metad

首页

博学

6Ren·AI

商城

laravel - 如何使动态元数据更改 Vue 中 SEO 的实际页面源