구매자의 모든 기능 구현은 끝내고, 이제 판매자 상품 올리기 부분 구현만 남았다.
이번 개인 프로젝트에서는 사이트의 기능 뿐만 아니라 성능과 사용자의 편의성을 고려하여 제작하는 것이 목표였다.
중간 점검으로 Lighthouse를 사용하여 성능을 검사해보았는데, 여러 점수 중 SEO 점수가 82점이 나왔다.
그래서 SEO를 개선해 100점까지 높여보려고 한다.
📌 SEO (검색엔진 최적화)
웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정
🔷 구글 서치 콘솔에 등록
URL을 등록하기 위해서는 먼저 위에 사이트에 접속 후 URL의 소유권을 확인하는 절차를 거쳐야 한다.
다양한 방법들이 있지만 HTML의 태그를 이용해 소유권을 확인해 주었다.
🔷 사이트맵 제작 및 제출
사이트맵이란❓
웹 사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일로
Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링한다.
위의 사이트에 접속해 싸커 마켓의URL을 입력해주면 자동으로 sitemap을 만들어준다.
그렇게 만들어진 sitemap을 다운받아 Public 폴더에 넣어준다.
마지막으로 Google Search Console에 알맞은 사이트맵의 링크를 넣어주면 끝이다.
하지만 난 여기서 엄청나게 해맸는데..
바로 바보같은 실수 때문이었다.
sitemap.xml 파일은 Public > sitemaps 안에 있기 때문에
https://soccer-market.vercel.app/sitemaps/sitemap.xml 링크를 이렇게 작성해주었어야했는데
중간에 sitemaps 폴더가 빠진 https://soccer-market.vercel.app/sitemap.xml 링크를 추가해서 자꾸 오류가 발생했었다ㅜ
다른 분들은 꼭 제대로 확인하고 작성하시길 바란다❗
🔷 robots.txt 작성
robots.txt란❓
웹 사이트의 루트 디렉토리에 위치한 텍스트 파일로, 웹 크롤러에게 웹 사이트의 크롤링 규칙을 알려주는 파일이다.
User-agent: *
Allow: /
Disallow: /private*/
Sitemap: https://soccer-market.vercel.app/sitemap.xml이렇게 작성해주었는데 설명해보자면 다음과 같다.
User-agent: 모든 크롤러에게 규칙이 적용됨Allow: 모든 크롤러에게 모든 페이지에 대한 액세스를 허용함Disallow: 모든 크롤러에게 /private로 시작하는 모든 경로에 대한 액세스를 차단함Sitemap: 사이트맵의 위치
🔷 메타 데이터 추가
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="Agku1mf5vXinYE7S59MVZUYL_8F8h1ZZJv4e_MAz5zA" />
<meta name="title" content="Soccer Market">
<meta name="description" content="축구와 관련된 모든 것을 사고 팔 수 있는 쇼핑몰입니다⚽🛒" />
<meta property="og:title" content="Soccer Market">
<meta property="og:description" content="축구와 관련된 모든 것을 사고 팔 수 있는 쇼핑몰입니다⚽🛒">
<meta property="og:image" content="https://velog.velcdn.com/images/yunbiyomi/post/4d6d339e-38d9-4e61-8bc5-1421b34ccae7/image.png">
<meta property="og:url" content="https://soccer-market.vercel.app/">
<meta property="og:type" content="website">
<title>Soccer Market</title>
</head>이런 메타 태그들을 추가해주었다.
여러 메타 태그 중 op: 은 Open Graph Protocol의 줄임말로 웹 페이지가 소셜 미디어 플랫폼에서 보여지는 방식을 제어하기 위한 메타 데이터이다.
그렇게 적용한 op 메타 데이터들을 카카오톡을 이용해 확인해보았더니
제대로 적용되었음을 확인할 수 있었다.
🔷 최종 점수
각 항목들을 수정한 결과, 최종적으로 SEO 점수를 100점으로 향상시킬 수 있었다.
이번 경험을 통해 앞으로의 프로젝트에서도 SEO를 최적화하여 최상의 결과를 얻을 수 있도록 노력할 것이다.
참고
https://fe-developers.kakaoent.com/2022/221208-basic-seo-guide/
