<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contents</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

使用 https://www.favicon.cc/ 從logo.png製作 favicon.ico
## 加入環境變數
- 在next.config.js新增
```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
```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`
```js
import SEO from '../../next-seo.config';
import { DefaultSeo } from "next-seo";
<div>
  ```
  - 其他頁面：index.tsx
  ```js
  import { NextSeo } from 'next-seo';
  import SEO from "../../../../next-seo.config";
  <div>
    ```
    ## 加入 rss
    ```js
    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
  </div>
</div>

</body>
</html>



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

## 加入環境變數
- 在next.config.js新增
```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
```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`
```js
import SEO from '../../next-seo.config';
import { DefaultSeo } from "next-seo";
<DefaultSeo {...SEO} />
```
- 其他頁面：index.tsx
```js
import { NextSeo } from 'next-seo';
import SEO from "../../../../next-seo.config";
<NextSeo
title={postData.title}
description={postData.content}
{...SEO}
/>

```
## 加入 rss
```js
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


加入next-seo

- [加入環境變數](#%E5%8A%A0%E5%85%A5%E7%92%B0%E5%A2%83%E8%AE%8A%E6%95%B8)
- [設定next-seo變數](#%E8%A8%AD%E5%AE%9Anext-seo%E8%AE%8A%E6%95%B8)
- [新增到頁面](#%E6%96%B0%E5%A2%9E%E5%88%B0%E9%A0%81%E9%9D%A2)
- [加入 rss](#%E5%8A%A0%E5%85%A5-rss)
- [ref](#ref)

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

[加入環境變數](#%E5%8A%A0%E5%85%A5%E7%92%B0%E5%A2%83%E8%AE%8A%E6%95%B8)

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變數](#%E8%A8%AD%E5%AE%9Anext-seo%E8%AE%8A%E6%95%B8)

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}
    ]
};


[新增到頁面](#%E6%96%B0%E5%A2%9E%E5%88%B0%E9%A0%81%E9%9D%A2)

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


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



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