> For the complete documentation index, see [llms.txt](https://marketing-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marketing-help.nhn-commerce.com/traffic-growth-strategies/how-to-rank-online-store-with-seo/onsite-seo.md).

# 온 사이트(On-Site) SEO

> On-page 또는 On-site SEO 최적화를 통해 검색엔진에 내 쇼핑몰(사이트), 브랜드를 알려요

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNL4CvR0EBv2oPHye7ORd%2Fuploads%2FqVPuypZh5e5BRYNHJFjA%2Fimage.png?alt=media&#x26;token=0e099d82-ea42-419b-b68c-3d85f001b15f" alt=""><figcaption><p>검색엔진 봇에게 내 쇼핑몰/웹사이트를 소개하는 메타태그</p></figcaption></figure>

* 혼선을 주는 URL을 지양해주세요.&#x20;
  * URL의 경우 검색엔진이 URL내 어떤 콘텐츠가 포함되어 있는지 예측 가능해야 합니다.
  * 아래와 같은 URL 구조는 검색엔진이 파악하기 어려운 구조입니다.
    * [www.example.com/contents/123456/22222.html](http://www.example.com/contents/123456/22222.html)
  * 정확한 리소스(resource)를 파악 할 수 있도록 구조화 하세요
    * [www.example.com/contents/bunny/small\\\_bunny\\\_collection.html](http://www.example.com/contents/bunny/small\\_bunny\\_collection.html)
* 키워드 구분은 밑줄(\_) 대신 하이픈(-)을 사용하는 것을 권장합니다.&#x20;
  * [ http://www.example.com/green-dress.html](< http://www.example.com/green-dress.html>) (0)
  * [ http://www.example.com/green\_dress.html](< http://www.example.com/green-dress.html>) (x)
* 대문자 보다는 소문자를 사용해주시는 게 좋아요.&#x20;
* **의미 있는 키워드 포함**
  * **관련 키워드 사용**: URL에 페이지와 관련된 주요 키워드를 포함해 검색 엔진이 페이지의 주제를 쉽게 파악할 수 있도록 합니다.
    * 예: `https://example.com/seo-tips` (O)
    * 예: `https://example.com/page1` (X)
* URL에 날짜나 불필요한 숫자를 포함시키지 않는 것이 좋아요.&#x20;
* Canonical 태그 사용
  * **중복 콘텐츠 해결**: 동일한 콘텐츠가 여러 URL에 존재하는 경우, canonical 태그를 사용하여 검색 엔진에게 하나의 기본 페이지를 알려줍니다.&#x20;
  * ```html
    <link rel="canonical" href="https://example.com/seo-tips">
    ```

## 이미지 SEO

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNL4CvR0EBv2oPHye7ORd%2Fuploads%2Ff9b63tZiF38wR4vpfm48%2Fimage.png?alt=media&#x26;token=8b64f931-e624-4a9e-ab3d-bc79c676d770" alt=""><figcaption><p>제대로 이미지를 파악할 수 없는 로봇</p></figcaption></figure>

* 로봇은 이미지/동영상 등을 정확하게 인식하지 못합니다. (아직까지는요 :joy:)
* 이미지 대체 텍스트(alt)를 지정하는 것은 매우 중요하답니다!
  * \<img src="example.jpg" alt="예시이미지에요" />
  * 위와 같이 대체 텍스트를 지정함으로써 검색엔진이 어떠한 이미지인지 구분할 수 있게  돼요.
  * 아래와 같이 이미지 검색에 노출 되기 위해서는 대체 텍스트는 필수!
    * ![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNL4CvR0EBv2oPHye7ORd%2Fuploads%2FXoa2gMCL8utLf3fsdF8g%2Fimage.png?alt=media\&token=66cb84df-3c2a-46fb-b2f9-4bb02cd72bf9)
* 의미 있는 파일 이름을 사용해주시는 게 좋아요.&#x20;
  * 이미지 파일 이름에 관련 키워드를 포함하여 이미지 내용을 설명합니다.
    * 예: `seo-tips-guide.png` (O)
    * 예: `IMG_1234.png` (X)
* 이미지 파일 크기 최적화
  * **이미지 압축**: 웹페이지 로딩 속도를 개선하기 위해 이미지를 압축합니다. TinyPNG, JPEGoptim 등의 도구를 사용하여 파일 크기를 줄입니다.
* CDN(Content Delivery Network) 사용
  * 이미지 파일을 전 세계 여러 서버에 분산하여 저장하고, 사용자와 가까운 서버에서 이미지를 제공하여 로딩 속도를 개선합니다.
  * 고도몰은 CDN이 매우 잘되어 있다는 점...! 😉