기술적 SEO
기술적 SEO 는 웹사이트가 검색 엔진의 검색 결과에서 잘 보이도록 하는 여러 가지 기술적인 방법들을 말한다.
마치 웹사이트가 검색 엔진에게 “나는 여기 있어! 잘 찾아줘!”라고 말하는 것과 같다.
기술적 SEO 의 중요한 요소에는 어떤 기술적인 방법들이 있는지 중요도에 따라 순차적으로 살펴보자.
- SSL 인증서
SSL(보안 소켓 계층) 인증서는 웹사이트와 사용자 간의 데이터를 암호화하여 보안을 강화하는 프로토콜이다.
SSL 인증서를 설치한 웹사이트는 HTTP 대신 HTTPS 프로토콜을 사용한다.
HTTPS는 HyperText Transfer Protocol Secure의 약자로 보안된 HTTP라는 의미다.구글은 HTTPS를 사용하는 웹사이트에 대해 더 높은 순위를 부여하고 네이버, 다음, 카카오 역시 높은 신뢰도를 부여한다.
구글, 네이버, 다음, 카카오 모두 SSL 인증서를 사용하는 웹사이트에 대해 긍정적인 평가를 하므로 웹사이트의 보안과 신뢰성을 높이기 위해 SSL 인증서를 사용하는 것이 중요하다.
신뢰성 높은 사이트가 검색 엔진에 더 잘 노출되는 것은 매우 중요한 기술적 SEO 요소다.
- 페이지 속도
웹사이트가 얼마나 빨리 열리는지를 말한다.
만약 웹사이트가 너무 느리게 열리면 사람들이 기다리기 싫어서 다른 사이트로 갈 수 있다.코드 압축, 이미지 압축, 속도 빠른 호스팅 & CDN 사용, 프론트엔드 최적화 등을 통해 속도를 높일 수 있다.
자세한 방법은 아래 링크를 눌러서 확인해보자.
[ 웹사이트 속도를 빠르게 하기 - 01편 - 코드 압축 / 미니파이 (Minification) ]
[ 웹사이트 속도를 빠르게 하기 - 02편 - 이미지 압축 ]
- 모바일 최적화
모바일 최적화는 사용자가 웹사이트를 탐색하는 데 있어 편리함과 직관성을 제공한다.
모바일 최적화하여 이탈률을 줄이고 전환율을 높이는 데 기여한다.Google은 모바일 친화적인 웹사이트를 우선적으로 노출한다.
모바일 최적화가 이루어지지 않은 사이트는 검색 엔진 순위에서 불리할 수 있다.다양한 화면 크기와 해상도를 가진 기기에서의 접근성을 보장한다.
모바일 최적화 전략
- 반응형 웹 디자인
- 다양한 화면 크기에 자동으로 적응하는 웹 디자인이다.
- CSS 미디어 쿼리를 사용하여 레이아웃을 조정하고 이미지와 콘텐츠가 각 기기에 맞게 조정되도록 한다.
- 터치 최적화
- 모바일 사용자는 손가락으로 클릭하기 때문에 버튼과 링크는 충분히 큰 크기와 간격을 두어야 합니다.
- 스와이프, 핀치 줌 등의 제스처를 활용하여 사용자 경험을 개선합니다.
- 단순한 네비게이션
- 드롭다운 메뉴나 햄버거 메뉴를 사용하여 간편하게 탐색할 수 있도록 합니다.
- 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색 바를 배치합니다.
모바일 최적화 도구
- Google Mobile-Friendly Test
- Mobile-Friendly Test 도구를 사용하여 웹사이트의 모바일 친화성을 평가한다.
- PageSpeed Insights
- PageSpeed Insights 를 통해 페이지 속도를 분석하고 개선점을 찾는다.
- GTmetrix
- GTmetrix를 사용하여 웹사이트의 속도와 성능을 평가한다.
- 반응형 웹 디자인
- 사이트 구조
잘 구성된 사이트 구조는 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와주므로 웹사이트에 대한 긍정적인 경험을 제공한다.
또한, 검색 엔진은 웹사이트를 크롤링하여 정보를 수집하는데 구조가 잘 되어있으면 검색 엔진이 페이지를 더 쉽게 이해하고 인덱싱할 수 있어서 검색 결과에서의 순위에 긍정적인 영향을 미친다.사이트 구조의 유형
- 계층 구조 (Hierarchical Structure)
- 가장 일반적인 형태로 상위 페이지(메인 페이지)에서 하위 페이지로 연결되는 구조다.
- 홈페이지 » 카테고리 » 서브 카테고리 » 개별 제품 페이지
- 구글 (Google): 검색 결과에서 카테고리별로 정리된 결과를 보여준다.
- 네이버 (Naver): 메인 페이지에서 뉴스, 블로그, 카페 등의 하위 카테고리로 연결된다.
- 워드프레스의 구조는 기본적으로 여기에 속하지만 다양한 플러그인과 설정을 통해 브랜치 구조와 다중 구조의 요소도 포함할 수 있다.
- 브랜치 구조 (Tree Structure)
- 나무처럼 뻗어나가는 구조로 각 페이지가 다른 페이지와 연결되어 있다. 사용자에게 다양한 경로를 제공하여 정보를 탐색할 수 있게 한다.
- 위키 사이트는 사용자들이 콘텐츠를 추가하고 편집할 수 있는 구조로 다양한 주제에 대해 브랜치 형태로 내용을 탐색할 수 있다.
- 위키백과(Wikipedia): 다양한 주제에 대해 브랜치 형태로 내용을 탐색할 수 있다.
- Yelp: 사용자는 레스토랑, 카페, 상점 등 여러 카테고리에서 각 비즈니스에 대한 리뷰를 보고 다른 사용자 리뷰를 통해 다양한 정보를 쉽게 찾을 수 있다.
- 다중 구조 (Multiple Structures)
- 여러 경로로 접근할 수 있는 구조입니다. 예를 들어, 같은 정보에 대해 여러 카테고리에서 접근할 수 있는 경우다.
- 아마존(Amazon): 제품을 여러 카테고리로 나누고, 필터링 옵션을 통해 다양한 방식으로 탐색할 수 있다.
페이스북(Facebook): 사용자가 다양한 방법으로 콘텐츠를 탐색할 수 있도록 여러 구조를 제공한다.
- 계층 구조 (Hierarchical Structure)
- 플랫 구조 (Flat Structure)
플랫 구조는 웹사이트의 정보 계층을 최소화해서 사용자가 원하는 정보에 쉽고 빠르게 접근할 수 있게 하는 구조다.
일반적으로 3단계 이하의 구조가 이상적이다.사용자는 원하는 정보를 찾기 위해 최소한의 클릭만으로 이동할 수 있으므로 사용자 경험이 향상된다.
복잡한 메뉴나 하위 카테고리가 없기 때문에 사용자가 사이트를 탐색하는 데 혼란을 느끼지 않는다.검색 엔진은 플랫 구조를 선호하는 경향이 있고 페이지가 쉽게 크롤링될 수 있다.
만약,블로그 사이트에서 카테고리 메뉴가 “홈”, “블로그”, “연락처”와 같이 간단하게 구성되어 있다면 사용자는 몇 번의 클릭만으로 원하는 정보를 찾을 수 있다.
- 카테고리 및 태그 사용
콘텐츠를 카테고리와 태그로 잘 정리하여 사용자들이 쉽게 탐색할 수 있도록 하는 방법이다.카테고리는 관련된 콘텐츠를 그룹화하여 사용자가 유사한 정보를 쉽게 찾을 수 있게 한다.
태그는 더 세부적인 주제를 나타내어 검색을 용이하게 한다.사용자가 카테고리나 태그를 클릭하면 관련된 콘텐츠 목록이 표시되어 추가적인 탐색이 용이하다.
잘 정리된 카테고리와 태그는 검색 엔진 최적화에 도움이 되고 사용자들이 사이트에 머무르는 시간을 늘릴 수 있다.
예를들어, 온라인 쇼핑몰에서 “의류”, “신발”, “액세서리”와 같은 카테고리를 만들고 각 제품에 태그를 추가하여 “여름”, “세일”, “신상” 같은 키워드로 분류할 수 있다. - 사이트맵 제공
사이트맵은 웹사이트의 구조를 시각적으로 나타내는 파일로 XML 사이트맵과 HTML 사이트맵 두 가지 형태가 있다.
- XML 사이트맵
- 웹사이트의 모든 페이지를 나열한 파일로 검색 엔진에 제출하여 인덱싱을 돕는다.
- 검색 엔진이 모든 페이지를 쉽게 찾고 크롤링할 수 있게 하여 SEO 효과를 높인다.
- 다양한 온라인 도구를 사용하여 자동으로 생성할 수 있고 생성된 파일은 https://example.com/sitemap.xml 형태로 접근할 수 있다.
- HTML 사이트맵
- 사용자가 사이트의 모든 페이지를 한눈에 볼 수 있도록 시각적으로 나열한 페이지다.
- 사용자가 원하는 정보를 쉽게 찾을 수 있고 검색 엔진이 사이트 구조를 이해하는 데 도움을 준다.
워드프레스에서 SEO 플러그인을 사용하면 손쉽게 사이트맵을 만들 수 있다.
각 페이지에 대한 링크를 포함하고 카테고리별로 정리해서 사용자가 사용하기 편하게 구성해야 한다.
- XML 사이트맵
- robots.txt
웹 사이트에 로봇이 접근하는 것을 방지하기 위한 규약으로 일반적으로 접근 제한에 대한 설명을 robots.txt에 기재한다.
robots.txt 파일은 항상 사이트의 루트 디렉토리에 위치해야 한다.특정 페이지나 디렉토리를 차단하여 검색 엔진이 인덱싱하지 않도록 한다.
불필요한 페이지의 인덱싱을 방지해서 검색 엔진이 중요한 페이지에 더 많은 크롤링 리소스를 할당하도록 유도할 수 있다.웹페이지가 검색 엔진에 표시되지 않도록 하려면 noindex로 색인 생성을 차단하거나 비밀번호로 페이지를 보호해야 한다.
User-agent: *
Disallow: /private*/
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.phpSitemap: https://maz.kr/sitemap_index.xml
사용된 코드 설명User-agent: *:모든 검색 로봇을 지정한다.Disallow: /private*/:검색로봇에게 /private-image, /private-video 등은 수집하면 안 된다고 알려준다.Disallow: /wp-admin/:검색로봇에게 /wp-admin/은 수집하면 안 된다고 알려준다.Allow: /wp-admin/admin-ajax.php:특정 플러그인이나 테마가AJAXAJAX (Asynchronous JavaScript and XML).
페이지를 새로 고치지 않고도 데이터를 주고받을 수 있게 해주는 기술이다.기능을 사용하고 있을 수 있다. 그러므로, admin-ajax.php에 대한 크롤링은 예외적으로 허용하는 것이 좋다.
