Eleventy에 사이트맵 추가하기
7166 단어 webdev
사이트맵은 검색 엔진이 웹사이트 구조를 이해하는 데 도움이 되는 필수 부분이며 사이트 SEO를 현명하게 최적화하는 가장 빠른 방법 중 하나입니다.
사이트맵을 사용하면 크롤링할 페이지를 검색 엔진에 알릴 수 있습니다. 이를 통해 배우고 사이트맵에 문서화되지 않은 페이지보다 이러한 페이지의 우선순위를 정합니다.
라이프스타일 블로그 시리즈를 위한
XML
기반 사이트맵을 만들 예정입니다.그러나 이러한 모든 항목을 수동으로 생성하고 싶지는 않으므로 이를 생성할 수 있는 사용자 지정 스크립트를 생성해 보겠습니다.
sitemap.xml
는 다음과 같이 표시됩니다.사이트맵은 어떤 모습이어야 합니까?
먼저 사이트맵이 어떻게 생겼는지 살펴보겠습니다.
XML
에 대한 Google의 요청 형식을 보면 다음과 같은 결과를 얻습니다.<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo.html</loc>
<lastmod>2018-06-04</lastmod>
</url>
</urlset>
내 웹 사이트에 Atom 피드를 사용하므로 형식에 대해 자세히 알아보려면 Google's article on Sitemap formats을 확인하십시오.
Eleventy 웹사이트에 XML 사이트맵 추가하기
src
라는 sitemap.njk
디렉토리에 파일을 생성하여 시작하겠습니다.궁금하실 텐데
XML
파일일 줄 알았어요? 그리고 당신 말이 맞습니다. 그러나 퍼머링크를 다음과 같이 조정하여 이를 수행할 수 있습니다.---
permalink: '/sitemap.xml'
---
좋습니다. 이것은 이미
sitemap.xml
라는 파일을 생성할 것이므로 이제 원하는 모든 항목을 추가하겠습니다.<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
<url>
<loc>{{ page.url | url }}</loc>
<lastmod>{{ page.date.toISOString() }}</lastmod>
</url>
{% endfor %}
</urlset>
그러면 다음과 같은 결과가 나타납니다.
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>/posts/article-1/</loc>
<lastmod>2020-07-12T03:00:00.000Z</lastmod>
</url>
<url>
<loc>/posts/article-2/</loc>
<lastmod>2020-08-12T03:00:00.000Z</lastmod>
</url>
<!-- more -->
<url>
<loc>/sitemap.xml</loc>
<lastmod>2021-01-24T11:59:09.087Z</lastmod>
</url>
</urlset>
꽤 멋지지만 보시다시피 전체 URL이 누락되어 있고 맨 아래에는 사이트맵 자체가 인덱싱되는 것도 볼 수 있습니다.
그것은 우리가 원하지 않는 것이므로 입력에서 사이트맵을 제외합시다.
--------
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
--------
이렇게 하면 이 페이지가 컬렉션에서 언급되지 않으므로 사이트맵에 표시되지 않습니다.
그런 다음 전체 URL을 추가하는 방법을 살펴봐야 합니다.
특정 변수를 저장할 수 있는 사이트 전체 변수를 만드는 것이 좋습니다.
site.json
폴더 안에 src/_data
라는 파일을 만들어 봅시다.{
"name": "The Todoist",
"url": "https://thetodoist.com"
}
거기에 있는 정보를 원하는 만큼 확장할 수 있습니다. 다음과 같은 방식으로 변수를 사용할 수 있습니다.
{{ site.url }}
사이트맵에 추가해 보겠습니다.
--------
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
--------
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
<url>
<loc>{{ site.url }}{{ page.url | url }}</loc>
<lastmod>{{ page.date.toISOString() }}</lastmod>
</url>
{% endfor %}
</urlset>
그게 다야. 이제 원하는 사이트맵 출력을 얻습니다!
Eleventy에 robots.txt 파일 추가하기
또 다른 좋은 SEO 추가는 robots.txt 파일입니다. 이 파일은 일반적으로 크롤러가 먼저 읽으며 사이트를 인덱싱해야 하는지 여부를 포함합니다.
그러나 여기에서 사이트맵이 있는 위치도 확인할 수 있습니다.
robots.njk
디렉토리 내에 src
라는 파일을 만듭니다.--------
permalink: '/robots.txt'
eleventyExcludeFromCollections: true
--------
User-agent: * Allow: / Sitemap: {{ site.url }}/sitemap.xml
여기서 우리는 파일이
robots.txt
이어야 하고 사이트맵에서 제외되어야 한다고 명시합니다.그런 다음 로봇의 콘텐츠를 배치합니다. 이 경우 모든 경로에서 모든 로봇을 허용합니다.
마지막 줄에는 크롤러가 사이트맵을 찾을 수 있는 위치를 명시합니다.
출력은 다음과 같습니다.
User-agent: *
Allow: /
Sitemap: https://thetodoist.com/sitemap.xml
시리즈를 따라가면 여기GitHub repo에서 전체 코드를 찾을 수 있습니다.
읽어주셔서 감사합니다. 연결해 봅시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(Eleventy에 사이트맵 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/adding-a-sitemap-in-eleventy-25j4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)