SEO 검색엔진 최적화

mangojang·2023년 1월 11일

seo

✍️ 이제는 SEO 는 웹사이트 제작 시 필수이다. 에이전시 회사 다녔을 때 정말 중요 하게 확인하던 부분 중 하나였다. 그 때 경험을 기반으로 고려해야 할 부분을 추려 보았다.

SEO 란?

검색엔진 최적화, 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스

왜 필요 한가?

검색 결과에서 얼마나 노출이 잘 되느냐의 문제는 마케팅으로 이어진다. 제품의 매출, 브랜드의 홍보와 밀접한 관련이 있기 때문에 요즈음은 사이트 제작 시 SEO 최적화는 필수 이다.

고려해야 하는 부분

1. < title >

<head>
	...
    <title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title>
    ...
</head>

문서 검색 시, 제목 링크로 표시 됨.
각 페이지 별로 고유한 제목이 있어야 함.

2. 메타 태그

<meta name="description" content="사이트 설명 입력">
<meta name="keywords" content="사이트 키워드 입력"> 
<link rel="canonical" href="대표 주소 입력" />
<!-- sns OpenGraph tag -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="사이트 이름 압력" /> 
<meta property="og:title" content="사이트 이름"/> 
<meta property="og:description" content="사이트 설명" /> 
<meta property="og:image" content="대표 이미지 경로(파일 형식 포함)"/> 
<meta property="og:url" content="사이트 주소 입력"/>
<link rel="shortcut icon" href="/public/favi.ico"></link>

3. url 구조

▶️ 단순 해야 함

링크의 흐름 체제가 복잡하지 않아야 함.
사이트의 url이 길지 않으며, 웹사이트 문서와 관련된 단어로 설정 해야 함.
디렉토리 구조를 간단 하게 만듦.
문서에 연결되는 url 은 하나의 버전만 있어야 함.

4. a태그 링크

링크가 깨진 곳이 없어야 함.
- 링크가 깨지는 곳은 404 페이지 처리

5. image

< img >, < picture > 태그 사용하기
< picture >

source의 media 에 설정한 넓이 값대로 보여줌.
img 태그는 가장 마지막에 위치해야 하며, source 요건을 충족 하지 못할 경우 img로 보여줌.

ie 지원 ❌.

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

의미 있는 이미지의 경우, alt 속성 적용하기
이미지 명 : 의미있는 단어로 명명, 너무 길어도 안됨.
표준 이미지 형식 사용 - jpg, png, gif

6. 모바일 최적화

반응형 웹 디자인 추천

7. 속도 최적화

css/js 공간 압축 - minify 화를 하여 크기를 줄임.
미디어, 기능으로 인한 과부하 ❌.
이미지 크기 최적화
폰트 1~2 개 사용

8. sitemap.xml

사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일
검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링 함.
사이트의 루트 디렉토리에 위치함.

기본형

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

<!-- url 단위로 사이트 경로마다 설정해준다. 경로마다 pritority를 조절해준다. -->
<url> <!--<url>과 <url>사이에 개별 URL정보를 작성한다.-->
   <loc>https://rmbtour.co.kr/</loc> <!--URL의 전체 경로를 작성한다.-->
   <!--<lastmod>2014-01-01</lastmod> 파일이나 소스의 최종 갱신일을 작성한다. 시간 부분을 생략하고 YYYY-MM-DD형식으로 작성한다. ※생략가능-->
   <!--<changefreq>monthly</changefreq> 업데이트 빈도를 지정한다. 값은 always/hourly/daily/weekly 및 monthly/yearly/never 중에서 선택한다. ※생략가능-->
   <priority>1.0</priority> <!--웹사이트 내의 모든 URL을 비교했을 때의 우선순위를 작성한다. 0.0~1.0의 값 내에서 설정한다. 예) 제1계층 1.0, 제2계층 0.8, 제3계층 0.5 ※생략가능-->
</url>

</urlset>

sitemap 자동 생성 해주는 사이트
Create your Google Sitemap Online - XML Sitemaps Generator

9. robots.txt

검색의 크롤링 로봇이 웹에 접근할 때 로봇이 지켜야하는 규칙과 sitemap.xml 파일의 위치를 알려주는 역할을 함.
크롤링을 차단할 페이지를 설정 할 수 있음.
사이트의 루트 디렉토리에 위치함.

기본형

User-agent: *
Disallow: /forbidden/
Allow: /
Sitemap: https://www.example.com/sitemap.xml

User-agent : 크롤러 지정
- '*' : 모두
- Googlebot : 구글
- Yeti : 네이버
- Daum: 다음
- Bingbot : 빙
Allow : 크롤링 허용할 경로
Disallow : 크롤링 제한할 경로
Sitemap: 사이트맵이 위치한 경로 전체 url

10. ssl 설정

SSL : 암호화 기반 인터넷 보안 프로토콜, https
ssl 인증서가 있어야 실행 시킬 수 있음.

11. 구글/네이버 search console/advisor

12. 구글/네이버 analytics

사이트 트래픽 및 통계에 대한 관리를 제공하는 웹사이트 분석 도구

구글

자세한 설정 방법 : 링크 확인

추가 할 코드

〈meta name="google-site-verification" content="구글추적코드"/〉

〈!-- Global site tag (gtag.js) - Google Analytics -->
〈script async src="https://www.googletagmanager.com/gtag/js?id=구글추적코드"〉〈/script〉
〈script〉
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '구글추적코드');
〈/script〉

네이버

자세한 설정 방법 : 링크 확인