Development
νμ΄μ§ μμΈμ΄ μμ±λμ§ μμ: μ¬μ©μκ° μ νν νμ€μ΄ μλ μ€λ³΅ νμ΄μ§
9/17/2024


μ λΈλ‘κ·Έμ κΈμ κ΅¬κΈ μμΉ μ½μμ λ±λ‘νλ κ³Όμ μμ 'νμ΄μ§ μμΈμ΄ μμ±λμ§ μμ: μ¬μ©μκ° μ νν νμ€μ΄ μλ μ€λ³΅ νμ΄μ§' λΌλ μ€λ₯λ₯Ό λ°κ²¬νμ΅λλ€. μ΄ μ€λ₯λ μ λ°μν κΉμ?

κ΅¬κΈ κ³΅μ λ¬Έμμ λ°λ₯΄λ©΄, μ λ¬Έμ λ κ΅¬κΈ μΈ‘μμ ν΄λΉ λ¬Έμκ° λ€λ₯Έ νμ΄μ§μ μ€λ³΅λμλ€κ³ νλ¨νμ¬ λ±λ‘μ κ±°μ ν κ²μ΄μμ΅λλ€. μ κ°μ΄λλΌμΈλλ‘ URL κ²μ¬λ₯Ό ν΅ν΄ Googleμμ μ νν νμ€ URLμ νμΈν΄λ³΄λ λΈλ‘κ·Έμ λ©μΈμΈ https://petefolio.xyz/ μ κ°μ νμ΄μ§λΌκ³ νλ¨ν κ²μΌλ‘ 보μμ΅λλ€.

ν νΈ, μ μμ μΌλ‘ λ±λ‘λ κΈμλ Googleμμ μ νν νμ€ URLμ 'κ²μ¬λ URL'μ΄λΌλ κ°μ΄ 보μ¬μ§λλ€.

λ κΈμ μλ‘ μΆ©λΆν λ€λ₯Έ μ£Όμ μ λν΄ μμ±λμλλ° νλλ μ μμ μΌλ‘ λ±λ‘λκ³ νλλ μ€ν¨ν μ΄μ κ° λ¬΄μμΌκΉμ? μ€μ μ λͺ¨λ₯΄κ² μ΅λλ€.
νμ€ URL μ§μ νκΈ°
νμ€ URLμ΄λ μ¬λ¬ κ°μ μ μ¬νκ±°λ λμΌν 컨ν μΈ λ₯Ό κ°μ§ νμ΄μ§μ λν΄μ κ²μ μμ§μ΄ λ±λ‘ν λν URLμ μλ―Έν©λλ€.
λ§μ½ example.com/page?sort=asc, example.com/page?sort=descλΌλ URLμ΄ μκ³ , μ΄λ€λ‘ 리λ€μ΄λ νΈλλ example.com/page-redirectλΌλ URLμ΄ μλ€κ³ κ°μ ν λ, ꡬκΈμ μ΄λ€μ λͺ¨λ μ μ¬ν 컨ν μΈ λ‘ νλ¨νκ³ λν URLμ example.com/pageλ‘ μ§μ νμ¬ κ²μ μμ§μ μ΅μ ν ν©λλ€.
μΉμ¬μ΄νΈ μμ μ μ μ₯μμλ μ΄λ¬ν λν URLμ μ§μ νλ κ²μ μ 리νκ² μμ©ν©λλ€. μΉμ¬μ΄νΈ μμ μλ νμ€ URLμ μ¬μ©ν¨μΌλ‘μ¨ μ΄λ€ URLμ΄ κ²μκ²°κ³Όμμ μ¬λλ€μκ² νμλ μ§ κ²°μ ν μ μκ³ , λ¨μΌ μ½ν μΈ λ₯Ό λ¨μΌ URLλ‘ λ ΈμΆν¨μΌλ‘μ¨ analyticsλ₯Ό λΉλ‘―ν μΈ‘μ λ° μΆμ μ νλ κΈ°λ₯μλ λ¨μνμ ν¨κ³Όλ₯Ό λ릴 μ μμ΅λλ€.
νμ€ URLμ κΈ°λ³Έμ μΌλ‘ Googleμμ νλ¨νμ¬ μ§μ ν΄μ£Όμ§λ§, μΉμ¬μ΄νΈ μμ μ μΈ‘μμ μ΄λ₯Ό μ§μ μ§μ ν μλ μμ΅λλ€. μ μ κ²½μ° κ΅¬κΈμ νλ¨ν λ΄μμ λν μμ μ νκΈ° μν΄, νμ€ URLμ μ§μ μ§μ νμ¬ μμΈ μμ±μ μ€ν¨ν κΈμ λν΄ λ€μκΈ λ±λ‘λ μ μλλ‘ μλν΄ λ³΄μμ΅λλ€.
canonical

νμ€ URLμ μ¬λ¬κ°μ§ λ°©λ²μΌλ‘ λ±λ‘ν μ μμ΅λλ€. μμΈν λ΄μ©μ μ λ¬Έμμ μμΌλ©°, μ λ κ°μ₯ κ°λ¨ν <link> νκ·Έλ₯Ό μΆκ°νλ λ°©μμΌλ‘ URL νμ€νλ₯Ό μ§ννκ² μ΅λλ€.
νμ§λ§ link νκ·Έλ₯Ό javascriptλ₯Ό ν΅ν΄ μ½μ νλ κ²μ ν¬λ‘€λ§μ λΆλ¦¬ν©λλ€. νλμ ν¬λ‘€λ¬λ€μ javascriptλ₯Ό μ€ν ν λ€ μ 보λ₯Ό μ½κΈ°λ νμ§λ§, λ³΄λ€ λ€μν ν¬λ‘€λ¬μ link νκ·Έλ₯Ό μΈμμν€λ €λ©΄ link νκ·Έκ° μ μ νμΌμ ν¬ν¨λμ΄μλ κ²μ΄ μ 리ν©λλ€. μ λ νμ¬ κ΅¬κΈ κ²μ μμ§μλ§ νμ΄μ§λ₯Ό λ±λ‘νκ³ μκ³ , ꡬκΈμ ν¬λ‘€λ¬λ javascriptλ₯Ό μ€νμμΌ λ°μ΄ν°λ₯Ό μ½μΌλ―λ‘, μ€ννκ²½μμ νκ·Έλ₯Ό λ£λ λ°©μμΌλ‘λ§ κ΅¬ννλλ‘ νκ² μ΅λλ€.
react-helmetμ React component λ°©μμΌλ‘ html λ¬Έμμ νκ·Έλ₯Ό μΆκ°ν μ μλλ‘ λμμ£Όλ λΌμ΄λΈλ¬λ¦¬ μ λλ€.
npm i react-helmet @types/react-helmetimport React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};μμ κ°μ΄ Helmet μ»΄ν¬λνΈλ₯Ό κ°μ Έμ λ΄λΆμ canonical λ§ν¬ νκ·Έλ₯Ό λ£μ΄ μ¬μ©ν μ μμ΅λλ€. μ κ²½μ°λ hrefκ° λμ μΌλ‘ λ°λμ΄μΌ νλ―λ‘, κ²μκΈ νμ΄μ§ μ»΄ν¬λνΈμμ Helmet νκ·Έλ₯Ό μ¬μ©ν λ€ hrefμ window.location.href κ°μ λ£μ΄μ£Όμμ΅λλ€.

λ°°ν¬ μ΄ν URL κ²μ¬λ₯Ό μννλ©΄ μ¬μ©μκ° μ μΈν νμ€ URLμ ν΄λΉ νμ΄μ§μ μ£Όμκ° λ€μ΄κ° μλ κ²μ νμΈν μ μμ΅λλ€. μ΄ κ³Όμ μ ν΅ν΄ ꡬκΈμ΄ μ€μΈν νμ€ URLμ μλ§κ² μ μ ν μ΄ν, μΈλ±μ€ μ¬ μμ±μ μμ²νμ¬ μ μμ μΌλ‘ κ²μμμ§μ κΈμ λ±λ‘ν μ μμμ΅λλ€.