Remix SEO优化 #

import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction = () => {
  return [
    { title: "我的网站 - 首页" },
    { name: "description", content: "这是我的网站描述" },
    { name: "keywords", content: "关键词1, 关键词2" },
  ];
};

import type { MetaFunction, LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await getPost(params.id);
  return json({ post });
}

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [
    { title: `${data?.post.title} - 我的博客` },
    { name: "description", content: data?.post.excerpt },
    { name: "keywords", content: data?.post.tags?.join(", ") },
  ];
};

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [
    { title: data?.post.title },
    { property: "og:title", content: data?.post.title },
    { property: "og:description", content: data?.post.excerpt },
    { property: "og:image", content: data?.post.coverImage },
    { property: "og:type", content: "article" },
    { property: "og:url", content: `https://example.com/posts/${data?.post.id}` },
  ];
};

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:title", content: data?.post.title },
    { name: "twitter:description", content: data?.post.excerpt },
    { name: "twitter:image", content: data?.post.coverImage },
  ];
};

export default function Post() {
  const { post } = useLoaderData<typeof loader>();
  
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage,
    author: {
      "@type": "Person",
      name: post.author.name,
    },
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
  };
  
  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

export default function Product() {
  const { product, category } = useLoaderData<typeof loader>();
  
  const breadcrumbData = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      {
        "@type": "ListItem",
        position: 1,
        name: "首页",
        item: "https://example.com",
      },
      {
        "@type": "ListItem",
        position: 2,
        name: category.name,
        item: `https://example.com/categories/${category.slug}`,
      },
      {
        "@type": "ListItem",
        position: 3,
        name: product.name,
      },
    ],
  };
  
  return (
    <div>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbData) }}
      />
      {/* 页面内容 */}
    </div>
  );
}

import type { LoaderFunctionArgs } from "@remix-run/node";

export async function loader({}: LoaderFunctionArgs) {
  const posts = await getPosts();
  const pages = await getPages();
  
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  ${posts.map((post) => `
    <url>
      <loc>https://example.com/posts/${post.slug}</loc>
      <lastmod>${post.updatedAt}</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
    </url>
  `).join("")}
  ${pages.map((page) => `
    <url>
      <loc>https://example.com/${page.slug}</loc>
      <lastmod>${page.updatedAt}</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.6</priority>
    </url>
  `).join("")}
</urlset>`;
  
  return new Response(sitemap, {
    headers: {
      "Content-Type": "application/xml",
    },
  });
}

import type { LoaderFunctionArgs } from "@remix-run/node";

export async function loader({}: LoaderFunctionArgs) {
  const robots = `User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml`;

  return new Response(robots, {
    headers: {
      "Content-Type": "text/plain",
    },
  });
}

export const links: LinksFunction = () => [
  { rel: "canonical", href: "https://example.com/posts/my-post" },
];

export const links: LinksFunction = () => [
  { rel: "alternate", hrefLang: "en", href: "https://example.com/en/post" },
  { rel: "alternate", hrefLang: "zh", href: "https://example.com/zh/post" },
  { rel: "alternate", hrefLang: "x-default", href: "https://example.com/post" },
];

export const headers = () => ({
  "Cache-Control": "public, max-age=3600, s-maxage=86400",
});

export const links: LinksFunction = () => [
  {
    rel: "preload",
    href: "/images/hero.webp",
    as: "image",
  },
];