javascript - 在 react.js 中加载页面后从 googleapis 加载字体-6ren

javascript - 在 react.js 中加载页面后从 googleapis 加载字体

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

我与 SEO 顾问合作进行 SEO 优化和更快的页面加载。他说字体和一些 javascript 库应该在页面加载后到达。因此，网站加载速度会更快，但是当我在互联网上查看它时，我找不到太多内容。我使用 React js 并且对 seo 改进一无所知。我在标题组件中按如下方式调用字体。 Header 组件被称为 HeaderLayout 组件的其他嵌套组件，调用 HeaderLayout 访问其他页面的组件被调用。有没有办法在页面加载后加载这些？

return (
    <Head>      
      <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossOrigin="anonymous"
      />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap"
      />

      <link
        rel="icon"
        type="image/x-icon"
        sizes="32x32"
        href="/icons/favico.ico"
      />
      <link rel="canonical" href={routerUrlWithoutQuery} />
      <meta name="color-scheme" content="light" />
    </Head>
  )

最佳答案

也许您可以将它附加到 useEffect 中的头部？
例子:

useEffect(() => {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href =
    "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
  link.integrity =
    "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z";
  link.crossOrigin = "anonymous";
  document.head.appendChild(link);
}, []);

关于javascript - 在 react.js 中加载页面后从 googleapis 加载字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66904966/

文章推荐： Angular 2 和 SEO 元标记

文章推荐： struts2 - 如何评估 struts 2 s :if?

文章推荐： regex - 在 Ruby 中是否有与 String.scan 等效的 Perl？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 react.js 中加载页面后从 googleapis 加载字体