alanhc-til

title: "加入next-seo" date: "2023-08-26" tag: ["blog", "seo"]

使用 https://www.favicon.cc/ 從logo.png製作 favicon.ico

加入環境變數

• 在next.config.js新增

const nextConfig = {
...
	env: {
		baseUrl: isProd ? "https://alanhc.github.io" : "http://localhost:3000",
		NEXT_PUBLIC_GOOGLE_ANALYTICS: "G-L5Z3CY454S",
		config: {
			title: "Alan Tseng title",
			titleShort:"alanhc",
			description: "description",
			fqdn: isProd ? "https://alanhc.github.io" : "http://localhost:3000",
			social: {
			twitterID:"@alanhc316"
		},
		image: {
			logo: "/favicon.ico"
		}
	}
},
...

設定next-seo變數

• 新增 next-seo.config.js

export default {
	titleTemplate: `%s | ${process.env.config.titleShort}`,
	defaultTitle: process.env.config.title,
	canonical: process.env.config.fdqn,
	openGraph: {
		type: process.env.config.title,
		url: process.env.config.fdqn,
		siteName: process.env.config.title,
	},
	twitter: {
		handle: process.env.config.social.twitterID,
		site: process.env.config.social.twitterID,
		cardType: 'summary_large_image',
	},
	additionalLinkTags: [
		{rel: 'icon', href: process.env.config.image.logo}
	]
};

新增到頁面

• 在 _app.tsx

import SEO from '../../next-seo.config';
import { DefaultSeo } from "next-seo";
<DefaultSeo {...SEO} />

• 其他頁面：index.tsx

import { NextSeo } from 'next-seo';
import SEO from "../../../../next-seo.config";
<NextSeo
title={postData.title}
description={postData.content}
{...SEO}
/>

加入 rss

additionalLinkTags: [
...
	{ rel: "alternate", type: "application/rss+xml",href: "/feed.xml"},
	{ rel: "alternate", type: "application/atom+xml", href: "/atom.xml"},
]

ref

• https://www.npmjs.com/package/next-seo