알고리아 Sending And Managing Data(2-20)

 

Generate a Sitemap from an Algolia Index

https://www.algolia.com/doc/guides/sending-and-managing-data/manage-your-indices/tutorials/generate-a-sitemap-from-an-algolia-index/

Generate a sitemap from an Algolia index | Algolia

 

 

Having great content and UX is only useful if people can find it. Search Engine Optimization (SEO) is a crucial traction strategy for most websites, and sitemaps play a significant role. A sitemap is a file that describes all the pages of your website, so that search engine bots can easily index your content. Sitemaps provide valuable information such as which pages to prioritize, or how often a page updates.

Sitemaps are particularly useful with sites or applications that load content asynchronously. That’s the case of most JavaScript-powered single-page applications and progressive web apps. That’s also the case when you’re using Algolia on the front-end.

Thanks to the flexibility of facets, Algolia can power navigation in addition to search result pages, which lets you implement dynamic category pages based on the data in your index. These are great candidates to add to your sitemap.

 

좋은 콘텐츠와 UX는 사람들이 찾을 수 있을 때만 유용하다. 검색 엔진 최적화(SEO)는 대부분의 웹사이트에서 중요한 추적 전략이며 사이트맵은 중요한 역할을 한다. 사이트맵은 검색 엔진 봇이 콘텐츠를 쉽게 인덱싱할 수 있도록 웹 사이트의 모든 페이지를 설명하는 파일입니다. 사이트맵은 우선순위를 지정할 페이지 또는 페이지 업데이트 빈도와 같은 중요한 정보를 제공합니다.
사이트맵은 콘텐츠를 비동기식으로 로드하는 사이트나 응용 프로그램에서 특히 유용합니다. 대부분의 자바스크립트 기반 단일 페이지 애플리케이션과 프로그레시브 웹 앱이 그렇다. 알골리아를 프런트 엔드로 사용할 때도 그렇습니다.
유연한 패싯 덕분에 Algolia는 검색 결과 페이지뿐만 아니라 인덱스의 데이터를 기반으로 동적 카테고리 페이지를 구현할 수 있는 강력한 탐색 기능을 제공합니다. 이것들은 당신의 사이트맵에 추가하기에 좋은 후보들이다.

 

Prerequisites(필수 조건)

Familiarity with Node.js#

This tutorial assumes you’re familiar with Node.js, how it works, and how to create and run Node.js scripts. Make sure to install Node.js (v6+) in your environment.

이 튜토리얼에서는 사용자가 Node.js, 작동 방식 및 Node.js 스크립트를 만들고 실행하는 방법에 대해 잘 알고 있다고 가정합니다. 환경에 Node.js(v6+)를 설치해야 합니다.

 

If you want to learn more about Node.js before going further, you can start with the following resources.

 

계속하기 전에 Node.js에 대해 자세히 알아보려면 다음 리소스로 시작할 수 있습니다.(홈페이지 참조할 것)

 

 

Have an Algolia account(알고리아 계정 갖기)

This tutorial assumes you already have an Algolia account. If not, you can create an account before getting started.

 

Dataset(데이터 세트)

For this tutorial, you’ll use an ecommerce dataset where each result is a product. All records have a categories attribute containing one or more categories.

To follow along, you can download the dataset and import it in your Algolia application.

이 튜토리얼에서는 각 결과가 제품인 전자 상거래 데이터 세트를 사용합니다. 모든 레코드에는 하나 이상의 카테고리를 포함하는 카테고리 속성이 있습니다.
따라서 데이터 세트를 다운로드하고 Algolia 애플리케이션에서 가져올 수 있습니다.

 

 

Install dependencies

Before starting, you need to install algolia-sitemap in your project. This open source wrapper for algoliasearch lets you dynamically generate sitemaps from your Algolia indices.

시작하기 전에 프로젝트에 알골리아 사이트맵을 설치해야 합니다. 이 Algoliasearch용 오픈 소스 래퍼를 사용하여 Algolia 색인에서 사이트맵을 동적으로 생성할 수 있습니다.

npm install algolia-sitemap

 

 

Create a sitemap of all the records in your index(인덱스에 있는 모든 레코드의 사이트맵 만들기)

First, you need to create a sitemap with all your catalog products to make sure search engines know where to find them. You need to provide your Algolia credentials (application ID and browse-capable API key). Make sure that the key has the browse permission. You can generate one from the API keys tab of your Algolia dashboard.

먼저, 검색 엔진이 검색된 카탈로그 제품을 찾을 수 있도록 모든 카탈로그 제품으로 사이트맵을 만들어야 합니다. Algolia 인증 정보(응용 프로그램 ID 및 탐색 가능 API 키)를 제공해야 합니다. 키에 찾아보기 권한이 있는지 확인하십시오. Algolia 대시보드의 API 키 탭에서 생성할 수 있습니다.

 

const algoliaSitemap = require('algolia-sitemap');

const algoliaConfig = {
  appId: 'YourApplicationID',
  apiKey: 'YourBrowseCapableAPIKey', // Must have a `browse` permission
  indexName: 'your_index_name',
};

algoliaSitemap({
  algoliaConfig,
});

Then, you need to provide a hitToParams callback. You want to call this function for each record, allowing you to map a record to a sitemap entry. The return value of your callback must be an object whose attributes are the same as those of a <url> entry in a sitemap.xml file.

그런 다음 hitToParams 콜백을 제공해야 합니다. 각 레코드에 대해 이 함수를 호출하여 레코드를 사이트맵 항목에 매핑할 수 있습니다. 콜백의 반환 값은 sitemap.xml 파일에 있는 <url> 항목의 속성과 속성이 동일한 개체여야 합니다.

• loc (required): The URL of the detail page
• lastmod: The last modified date (ISO 8601)
• priority: The priority of this page compared to other pages in your site (between 0 and 1)
• changefreq: Describes how frequently the page is likely to change
• alternates: Alternate versions of this link
• alternates.languages: An array of enabled languages for this link
• alternates.hitToURL: A function to transform a language into a URL

In your case, you can keep it simple and only output the loc property for each product. Make sure to modify the hitToParams function to match the content of your records. You also need to create a /sitemaps directory to output all generated sitemaps.

당신의 경우 단순하게 유지하고 각 제품에 대한 loc 속성만 출력할 수 있습니다. 기록 내용과 일치하도록 hitToParams 함수를 수정하십시오. 또한 생성된 모든 사이트맵을 출력하려면 /sitemaps 디렉토리를 작성해야 합니다.

 

function hitToParams({ url }) {
  return { loc: url };
}

algoliaSitemap({
  algoliaConfig,
  hitToParams,
  sitemapLoc: 'https://example.com/sitemaps',
  outputFolder: 'sitemaps',
});

 

You can now run your script with Node.js to generate sitemaps in the /sitemaps directory. There are two types of sitemap files:

• the sitemap-index file with a link to each sitemap,
• and the sitemaps files with links to your products.

이제 Node.js로 스크립트를 실행하여 /sitemaps 디렉토리에 sitemaps를 생성할 수 있습니다. 사이트맵 파일에는 두 가지 유형이 있습니다.
-각 사이트맵에 대한 링크가 있는 사이트맵 인덱스 파일,
-제품에 대한 링크가 포함된 사이트맵 파일을 참조하십시오.

 

 

To ensure the generated sitemaps are correct, you can use any sitemap validator online such XML Sitemap Checker. Note that Algolia doesn’t run this website and can’t provide support for it.

생성된 사이트맵이 올바른지 확인하려면 XML 사이트맵 검사기와 같은 온라인 사이트맵 검사기를 사용할 수 있습니다. 알골리아는 이 웹사이트를 운영하지 않으며 지원을 제공할 수 없습니다.

Create a sitemap for categories(카테고리를 위한 사이트맵 만들기)

Now you can generate entries for category pages. Your records have a categories attribute that looks like the following:

이제 카테고리 페이지에 대한 항목을 생성할 수 있습니다. 레코드의 카테고리 속성은 다음과 같습니다.

 

{
  "categories": ["Mobile Phones", "Phones & Tablets"]
}

 

 

Here, the product belongs to two categories, so you can assume you can access each of them at https://example.com/CATEGORY_NAME.

You need to modify your hitToParams function so it returns an array of all the categories that belong to the given hit. Since categories likely apply to many records, you need to make sure not to add them to your sitemaps more than once.

여기서 제품은 두 가지 범주에 속하므로 https://example.com/CATEGORY_NAME에서 각각 액세스할 수 있다고 가정할 수 있습니다.
hitToParams 함수를 수정하여 지정된 히트에 속하는 모든 범주의 배열을 반환해야 합니다. 범주는 많은 레코드에 적용될 수 있으므로 사이트 맵에 범주가 두 번 이상 추가되지 않도록 해야 합니다.

 

 

const alreadyAdded = {};

function hitToParams({ categories }) {
  const newCategories = categories.filter(
    (category) => !alreadyAdded[category]
  );

  if (!newCategories.length) {
    return false;
  }

  const locs = [];

  newCategories.forEach((category) => {
    alreadyAdded[category] = category;

    locs.push({
      loc: `https://example.com/${category}`,
    });
  });

  return locs;
}

 

For each hit, you check if they contain categories that you didn’t add to the sitemap yet, and you add them. This lets you save all your category pages to your sitemap.

각 히트마다 사이트맵에 아직 추가하지 않은 범주가 포함되어 있는지 확인하고 추가합니다. 이렇게 하면 모든 카테고리 페이지를 사이트맵에 저장할 수 있습니다.

Create a sitemap for both products and categories(제품들과 카테고리 모두를 위한 사이트맵 만들기)

You can edit your script to generate a sitemap for both your products and categories. To do so, all you need to do is push the current product along with its categories.

스크립트를 편집하여 제품과 범주 모두에 대한 사이트 맵을 생성할 수 있습니다. 그러기 위해서는 현재 제품을 카테고리별로 밀어넣기만 하면 됩니다.

 

function hitToParams({ categories, url }) {
  // ...

  newCategories.forEach((category) => {
    alreadyAdded[category] = category;
    alreadyAdded[url] = url;

    locs.push(
      ...[
        {
          loc: `https://example.com/${category}`,
        },
        { loc: url },
      ]
    );
  });

  // ...
}

 

Notify search engines of sitemap changes(사이트맵 변경 사항에 대해 검색 엔진에 알림)

Finally, you can let search engines know that your sitemap changed. Most search engines have a ping mechanism to inform them of a new sitemap, so you can perform this directly from your script.

For Google and Bing, all you need to do is send a GET request to a specific endpoint.

마지막으로 검색 엔진에 사이트맵이 변경되었음을 알릴 수 있습니다. 대부분의 검색 엔진에는 새 사이트맵을 알려주는 핑 메커니즘이 있으므로 스크립트에서 직접 수행할 수 있습니다.
Google과 Bing의 경우 특정 엔드포인트에 GET 요청을 전송하기만 하면 됩니다.

 

const endpoints = [
  'http://www.google.com/webmasters/sitemaps/ping?sitemap=http://example.com/sitemap.xml',
  'http://www.bing.com/webmaster/ping.aspx?siteMap=http://example.com/sitemap.xml',
];

Promise.all(endpoints.map(fetch)).then(() => {
  console.log('Done');
});