온 사이트(On-Site) SEO
온페이지(On-Page) SEO의 대표 예시를 공유합니다.
Last updated
온페이지(On-Page) SEO의 대표 예시를 공유합니다.
Last updated
On-page 또는 On-site SEO 최적화를 통해 검색엔진에 내 쇼핑몰(사이트), 브랜드를 알려요
메타태그(Meta Tags)는 HTML 문서의 헤드(Head) 부분에 위치하여 검색 엔진과 웹 브라우저에게 웹페이지에 대한 정보를 제공하는 태그예요.
메타태그의 <title></title>과 <meta description> 등을 사용함으로써 내 사이트를 검색엔진에게 소개할 수 있어요.
해당 메타태그를 통해서 검색엔진에 노출 되는 타이틀, 설명문구 등이 결정돼요.
검색 엔진 최적화: 메타태그는 검색 엔진이 페이지 내용을 이해하고, 인덱싱하며, 검색 결과에서 적절히 표시하는 데 도움을 줍니다.
클릭률(CTR) 향상: 메타 타이틀과 설명은 검색 결과에서 사용자 클릭을 유도하는 중요한 요소예요.
소셜 미디어 최적화: OG 태그와 트위터 카드 태그는 소셜 미디어에서 공유될 때 페이지가 어떻게 표시될지를 결정하여 더 나은 사용자 경험을 제공해요.
설정한 OG(Open Graph)태그에 따라 노출 되는 타이틀 등에 차이가 있어요.
모바일 최적화: 메타 뷰포트 태그는 모바일 기기에서 페이지의 가시성과 사용성을 향상시켜요.
메타 타이틀(Meta Title) 태그
정의: 페이지의 제목을 정의하는 태그로, 검색 엔진 결과 페이지(SERP)에 표시돼요.
중요성:
검색 결과에서 첫 번째로 사용자에게 보여요.
클릭률(CTR)에 직접적인 영향을 미치는 요소예요.
주요 키워드를 포함하여 작성하는 것이 좋아요.
메타 설명(Meta Description) 태그
정의: 페이지의 내용을 요약하는 태그로, 검색 엔진 결과 페이지에서 제목 아래에 표시돼요.
중요성:
페이지의 내용을 간략하게 설명하여 사용자가 클릭할지 결정하는 데 도움을 제공해요.
키워드를 포함하되 자연스럽게 작성해야 하는 것이 좋아요.
메타 키워드(Meta Keywords) 태그
정의: 페이지의 주요 키워드를 나열하는 태그입니다. 한때 검색 엔진 최적화에서 중요한 요소였으나, 현재는 대부분의 주요 검색 엔진에서 사용되지 않아요.
중요성:
구글은 더 이상 이 태그를 사용하지 않지만, 일부 다른 검색 엔진에서는 여전히 참조할 수 있어요.
메타 로봇(Meta Robots) 태그
정의: 검색 엔진 크롤러에게 페이지를 크롤링하고 인덱싱할지 여부를 지시하는 태그예요.
중요성:
특정 페이지를 검색 엔진에 인덱싱하지 않도록 할 때 사용해요.
검색 엔진이 페이지의 링크를 따라갈지 여부를 지정할 수 있어요.
예시:
혼선을 주는 URL을 지양해주세요.
URL의 경우 검색엔진이 URL내 어떤 콘텐츠가 포함되어 있는지 예측 가능해야 합니다.
아래와 같은 URL 구조는 검색엔진이 파악하기 어려운 구조입니다.
www.example.com/contents/123456/22222.html
정확한 리소스(resource)를 파악 할 수 있도록 구조화 하세요
www.example.com/contents/bunny/small_bunny_collection.html
키워드 구분은 밑줄(_) 대신 하이픈(-)을 사용하는 것을 권장합니다.
대문자 보다는 소문자를 사용해주시는 게 좋아요.
의미 있는 키워드 포함
관련 키워드 사용: URL에 페이지와 관련된 주요 키워드를 포함해 검색 엔진이 페이지의 주제를 쉽게 파악할 수 있도록 합니다.
예: https://example.com/seo-tips (O)
예: https://example.com/page1 (X)
URL에 날짜나 불필요한 숫자를 포함시키지 않는 것이 좋아요.
Canonical 태그 사용
중복 콘텐츠 해결: 동일한 콘텐츠가 여러 URL에 존재하는 경우, canonical 태그를 사용하여 검색 엔진에게 하나의 기본 페이지를 알려줍니다.
이미지 대체 텍스트(alt)를 지정하는 것은 매우 중요하답니다!
<img src="example.jpg" alt="예시이미지에요" />
위와 같이 대체 텍스트를 지정함으로써 검색엔진이 어떠한 이미지인지 구분할 수 있게 돼요.
아래와 같이 이미지 검색에 노출 되기 위해서는 대체 텍스트는 필수!
의미 있는 파일 이름을 사용해주시는 게 좋아요.
이미지 파일 이름에 관련 키워드를 포함하여 이미지 내용을 설명합니다.
예: seo-tips-guide.png (O)
예: IMG_1234.png (X)
이미지 파일 크기 최적화
이미지 압축: 웹페이지 로딩 속도를 개선하기 위해 이미지를 압축합니다. TinyPNG, JPEGoptim 등의 도구를 사용하여 파일 크기를 줄입니다.
CDN(Content Delivery Network) 사용
이미지 파일을 전 세계 여러 서버에 분산하여 저장하고, 사용자와 가까운 서버에서 이미지를 제공하여 로딩 속도를 개선합니다.
고도몰은 CDN이 매우 잘되어 있다는 점...! 😉
로봇은 이미지/동영상 등을 정확하게 인식하지 못합니다. (아직까지는요 )
