react 에서 title 바꾸기
head
html <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭 보이는 문서 제목을 정의한다.
<head> 안에서 사용해야 한다.
사용해야 하는 이유
SEO
페이지 제목은 SEO(검색엔진)에 큰영향을 준다. 상세한 제목이 더 좋은 검색 결과를 가져온다.
검색엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이다.
react 에서 사용 하는 방법
1. head tag 안에 title, meta tag
public/index.html 에 <head>태그 안에 홈페이지의 제목을 지정할수 있는 <title></title> 와 홈페이지를 설명할수 있는<meta name="description" content="~~~"/> 가 있다.
그 부분을 수정해 주면 된다.
2. 각 page의 title 변경하기
각 page의 title을 수정하기 위해서는 src/pages/Home.js 같이 src/pages의 각 page에 작성하면 된다.
useEffect(()=>{
const titleElement = document.getElementByTagName('title')[0]
title.Element.innerHTML = `my diary`
},[])index.html의 title 태그를 변경할 수 없으니 react가 마운트 됐을 때 title이라는 태그를 불러온다. title의 배열중 첫번째 title 태그를 가져와서 텍스트를 변경해준다.
각 페이지 마다 변경해주면 페이지를 이동할때 마다 아래와 같이 변경된다.
3. favicon 변경
public/favicon.ico 의 이미지를 favicon.ico 동일한 이름으로 이미지를 변경한다.
favicon을 만들어 주는 방법은 따로 있다!(구글링)
그냥하기.😎
useEffect(()=>{
const titleElement = document.getElementByTagName('title')[0]
title.Element.innerHTML =
my diary// titleElement 로 변경하셔야 할 것 같아요},[])