所有现代框架都越来越关注 SEO 以及如何让开发人员更容易将其整合到他们的网站中。

SEO代表搜索引擎优化,归结为您为搜索引擎优化网站的程度。

注意:查看这五个标签以开始使用 SEO。

Remix 在哪里渲染 SEO 标签

Remix 有一个超级漂亮的钩子来设置你的元数据,这一切都从root.tsx文件开始。

您可以以该函数的形式在那里找到基本的元设置器:

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: 'Remix Notes',
  viewport: 'width=device-width,initial-scale=1',
});

进入全屏模式 退出全屏模式

如您所见,我们在这里只设置了一些基础知识。我们将在后续部分中更深入地更改此设置。

然后在下面的渲染中,我们使用<Meta />元素来渲染实际的部分,如下所示:

export default function App() {
  return (
    <html lang='en' className='h-full'>
      <head>
        <Meta />
        <Links />
      </head>
      ...
    </html>
  );
}

进入全屏模式 退出全屏模式

这个设置很酷的部分是我们可以在我们的应用程序的任何地方使用这个MetaFunction。

当我们检查任何页面的源代码时,我们至少应该看到以下内容。

<head>
  <meta charset="utf-8" />
  <title>Remix Notes</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
</head>

进入全屏模式 退出全屏模式

在单个页面上设置元道具

让我们以我们的Pokémon 示例作为基线。

打开routes/pokemon/index.tsx文件,让我们在其中添加元函数:

export const meta: MetaFunction = () => ({
  title: 'The complete Pokémon list',
  description: 'This is the list with all existing Pokémon.',
});

进入全屏模式 退出全屏模式

您可能已经发现我们添加了一个我们以前没有使用过的描述。

这对于 Remix 来说不是问题,因为它只会将其单独添加到此页面。

它会为此/pokemon页面生成以下 HTML 输出。

<head>
  <meta charset="utf-8" />
  <title>The complete Pokémon list</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
  <meta
    content="This is the list with all existing Pokémon"
    name="description"
  />
</head>

进入全屏模式 退出全屏模式

Remix 中的动态 SEO 标签

到目前为止,我们使用了一些静态标签,在这里我们定义了我们想要设置的字符串。

但是如果我们想在我们的单个神奇宝贝页面上添加动态 SEO 标签会发生什么?

还记得我们是如何在这个单页上使用加载器功能的吗?

我们可以通过简单地传递它来在我们的元函数中使用返回的数据。

export const meta: MetaFunction = ({
  data,
}: {
  data: LoaderData | undefined,
}) => {
  if (!data) {
    return {
      title: 'Pokémon not found',
      description: 'We could not find this Pokémon',
    };
  }

  const name = data.pokemon.name;
  return {
    title: `This is the amazing ${name}`,
    description: `We caught the Pokémon with the name: ${name}`,
  };
};

进入全屏模式 退出全屏模式

在这里,我们得到了加载器提供的数据属性。

然后,我们可以确定数据是否可用,甚至在我们找不到数据时添加备用。

假设我们打开/pokemon/charizard页面,然后我们得到以下元标记:

<head>
  <meta charset="utf-8" />
  <title>This is the amazing charizard</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
  <meta
    content="We caught the Pokémon with the name: charizard"
    name="description"
  />
</head>

进入全屏模式 退出全屏模式

完美的!我们现在让它充满活力。

混音 SEO 选项

到目前为止,我们只涉及了一些可以使用 Remix 设置的非常基本的 SEO 标签,但是我们可以使用这个元功能设置很多。

如果您需要,我们可以使用所有元标记,甚至可以设置我们的自定义标记。

要查找所有元标记的完整列表,请访问以下网站:元标记概述。

举个例子,我们可以设置:

export const meta: MetaFunction = () => {
  return {
    charset: 'utf-8',
    description: 'Welcome to our Remix app',
    keywords: 'Remix,app',
    'twitter:image': 'https://remix.app/social.png',
    'twitter:card': 'summary_large_image',
    'twitter:creator': '@DailyDevTips1',
    'twitter:site': '@DailyDevTips1',
    'twitter:title': 'Remix app',
    'twitter:description': 'Chris created this Remix app, check it out',
    custom: 'Something custom you like.',
  };
};

进入全屏模式 退出全屏模式

这将导致以下 HTML:

<head>
  <meta charset="utf-8" />
  <meta content="Welcome to our Remix app" name="description" />
  <meta content="Remix,app" name="keywords" />
  <meta content="https://remix.app/social.png" name="twitter:image" />
  <meta content="summary_large_image" name="twitter:card" />
  <meta content="@DailyDevTips1" name="twitter:creator" />
  <meta content="@DailyDevTips1" name="twitter:site" />
  <meta content="Remix app" name="twitter:title" />
  <meta
    content="Chris created this Remix app, check it out"
    name="twitter:description"
  />
  <meta content="Something custom you like" name="custom" />
</head>

进入全屏模式 退出全屏模式

我必须说,Remix 开箱即用地设置这些 SEO 属性给我留下了深刻的印象。

你也可以在 GitHub](https://github.com/rebelchris/remix-starter/tree/seo)上查看我的[源代码。

感谢您的阅读,让我们联系吧!

感谢您阅读我的博客。随时订阅我的电子邮件通讯并联系Facebook或Twitter

# reactnative
Logo
React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。 企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

avatar React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。 为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。 我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。 你可以在这里找到 repo u003d>githu

avatar React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子 有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。 反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

avatar React