Front End/HTML, CSS

SEO

🌐

SEO (Search Engine Optimization)

SEO(Search Engine Optimization, 검색 μ—”μ§„ μ΅œμ ν™”)λŠ” 검색 μ—”μ§„μ˜ μž‘λ™ 방식에 맞게 μ›Ή νŽ˜μ΄μ§€λ₯Ό μ΅œμ ν™”ν•΄μ£ΌλŠ” μž‘μ—…μ„ μ˜λ―Έν•˜λ©°, SEOλ₯Ό 톡해 검색 μ—”μ§„μ—μ„œ μ›Ή νŽ˜μ΄μ§€λ₯Ό 보닀 더 μƒμœ„μ— λ…ΈμΆœλ  수 μžˆκ²Œλ” λ§Œλ“€ 수 μžˆλ‹€. SEOλŠ” 크게 On-Page SEO와 OFF-Page SEO 두 κ°€μ§€λ‘œ λ‚˜λ‰œλ‹€.

On-Page SEO

νŽ˜μ΄μ§€ λ‚΄λΆ€μ—μ„œ μ§„ν–‰ν•  수 μžˆλŠ” SEO둜, 제λͺ©κ³Ό μ½˜ν…μΈ , 핡심 ν‚€μ›Œλ“œμ˜ 배치, 효율적인 HTML μš”μ†Œ μ‚¬μš©λ²• 등을 μ΄μš©ν•˜λŠ” 방법이닀.

<meta>, <title> μš”μ†Œλ₯Ό μ΄μš©ν•΄ 검색 ν‚€μ›Œλ“œλ₯Ό μΆ”κ°€ν•˜λŠ” 것이 λŒ€ν‘œμ μΈ μ˜ˆμ΄λ‹€.

Off-Page SEO

μ›Ή μ‚¬μ΄νŠΈ μ™ΈλΆ€μ—μ„œ μ΄λ£¨μ–΄μ§€λŠ” SEO둜, μ†Œμ…œ λ―Έλ””μ–΄ 홍보, 백링크(타 μ‚¬μ΄νŠΈμ—μ„œ μ—°κ²°λ˜λŠ” 링크) 등을 μ΄μš©ν•˜λŠ” 방법이닀. μ›Ή νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ΄λ‚˜ κ΅¬μ‘°μ™€λŠ” 관계 없이 μ™ΈλΆ€ μš”μΈμ„ μ΄μš©ν•˜λŠ” 방법이닀

검색 μ—”μ§„μ˜ κ΄‘κ³ λ‚˜ μƒμœ„ λ…ΈμΆœ μ„œλΉ„μŠ€λ₯Ό μ΄μš©ν•˜λŠ” 것도 Off-Page SEO의 μ‚¬λ‘€λ‘œ λ³Ό 수 μžˆλ‹€.

SEO에 영ν–₯을 λ―ΈμΉ˜λŠ” μš”μ†Œ

1. <title>

<title>은 검색 κ²°κ³Όμ°½μ—μ„œ 제λͺ©μ— ν•΄λ‹Ήν•˜λŠ” μš”μ†Œλ‘œ, <head>의 μžμ‹ μš”μ†Œλ‘œ μž‘μ„±ν•œλ‹€. 제λͺ©μ€ 검색 κ²°κ³Όμ—μ„œ μƒλ‹Ήνžˆ μ€‘μš”ν•œ 역할을 λ‹΄λ‹Ήν•œλ‹€.

  • <title>에 μ–΄λ–€ λ‚΄μš©μ„ μž‘μ„±ν•˜λŠ”κ°€μ— 따라 검색 ν›„ μœ μž…κΉŒμ§€ μœ λ„ν•  수 μžˆλ‹€. 제λͺ©μ΄ λ„ˆλ¬΄ κΈΈκ±°λ‚˜ μ§§μ•„ μ‚¬μš©μžκ°€ 제λͺ©μœΌλ‘œ μ‚¬μ΄νŠΈλ₯Ό νŒŒμ•…ν•˜κΈ° μ–΄λ €μ›Œμ§€λ©΄ μœ μž…λ₯ μ΄ λ–¨μ–΄μ§„λ‹€.
  • <title>에 핡심 ν‚€μ›Œλ“œκ°€ ν¬ν•¨λ˜λ©΄ μƒμœ„μ— λ…ΈμΆœλ  ν™•λ₯ μ΄ λ†’μ•„μ§„λ‹€. ν•˜μ§€λ§Œ 같은 ν‚€μ›Œλ“œλ₯Ό λ°˜λ³΅ν•˜λ©΄ 검색 μ‹œ λΆˆμ΄μ΅μ„ 받을 수 있기 λ•Œλ¬Έμ— 제λͺ©μ— 핡심 ν‚€μ›Œλ“œλŠ” ν•œ 번만 ν¬ν•¨μ‹œν‚€λŠ” 것이 μ’‹λ‹€.

2. <meta>

<meta>λŠ” 메타 데이터λ₯Ό λ‹΄λŠ” μš”μ†Œμ΄λ‹€. 메타 λ°μ΄ν„°λž€ ν•΄λ‹Ή μ›Ή μ‚¬μ΄νŠΈμ—μ„œ 닀루고 μžˆλŠ” 데이터가 무엇인지에 λŒ€ν•œ 데이터이며, <meta> μ—­μ‹œ <head>μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ‘œ μž‘μ„±ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€.

<meta>μš”μ†Œμ— λ“€μ–΄κ°€λŠ” λ‚΄μš©μ€ 검색 결과창의 description은 λ¬Όλ‘ , μ†Œμ…œ λ―Έλ””μ–΄λ‚˜ μ±„νŒ… μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ 링크λ₯Ό κ³΅μœ ν–ˆμ„ λ•Œ 링크 미리보기와 κ΄€λ ¨ 정보도 λ“€μ–΄κ°ˆ 수 μžˆλ‹€. 이 경우λ₯Ό μ˜€ν”ˆ κ·Έλž˜ν”„(Open Graph)라 λΆ€λ₯΄λ©° 페이슀뢁(ν˜„ Meta)μ—μ„œ κ²Œμ‹œλ¬Όμ„ κ³΅μœ ν•˜κΈ° μœ„ν•œ λͺ©μ μœΌλ‘œ λ§Œλ“€μ–΄μ‘Œλ‹€. 두 경우 λͺ¨λ‘ <meta>λ₯Ό μ‚¬μš©ν•˜μ§€λ§Œ, 각각의 λͺ©μ μ€ μ—„μ—°νžˆ λ‹€λ₯΄λ‹€.

  • SEOλ₯Ό μœ„ν•œ meta μš”μ†Œ

    name속성을 μ‚¬μš©ν•˜λ©°, SEOλ₯Ό μœ„ν•΄ μ‚¬μš©ν•œλ‹€.

    <meta name="속성값" content="λ‚΄μš©" />
    name 속성값섀λͺ…
    descriptionμ½˜ν…μΈ μ— λŒ€ν•œ κ°„λž΅ν•œ μ„€λͺ…. 검색 κ²°κ³Όμ—μ„œ 제λͺ© 밑에 λœ¨λŠ” μ„€λͺ…글이닀.
    keywordsμ›Ή νŽ˜μ΄μ§€μ˜ κ΄€λ ¨ ν‚€μ›Œλ“œλ“€μ„ λ‚˜μ—΄ν•  λ•Œ μ‚¬μš©ν•œλ‹€.
    authorμ½˜ν…μΈ μ˜ μ œμž‘μžλ₯Ό ν‘œμ‹œν•œλ‹€.
  • μ˜€ν”ˆ κ·Έλž˜ν”„(Open Graph)

    property속성을 μ‚¬μš©ν•˜λ©° λ‹€λ₯Έ μ‚¬λžŒμ—κ²Œ κ³΅μœ ν•˜κΈ° μœ„ν•œ 것이 λͺ©μ μ΄λ‹€. 특히 property속성을 μ‚¬μš©ν•˜λŠ” μ˜€ν”ˆ κ·Έλž˜ν”„μ˜ 속성값 μ•žμ—λŠ” μ˜€ν”ˆ κ·Έλž˜ν”„λ₯Ό λœ»ν•˜λŠ” og:κ°€ λΆ™λŠ”λ‹€.

    ν•˜μ§€λ§Œ μ˜€ν”ˆ κ·Έλž˜ν”„κ°€ SEO와 μ „ν˜€ 연관이 μ—†λŠ” 것은 μ•„λ‹ˆλ‹€. ν•΄λ‹Ή νŽ˜μ΄μ§€μ— 방문자 μˆ˜κ°€ λ§Žλ‹€λ©΄ κ²€μƒ‰μ‹œ μƒμœ„μ— λ…ΈμΆœλ  ν™•λ₯ μ΄ λ†’μ•„μ§€κΈ° λ•Œλ¬Έμ΄λ‹€. μ˜€ν”ˆ κ·Έλž˜ν”„λ₯Ό 잘 μž‘μ„±ν•˜λ©΄ 링크 곡유λ₯Ό 톡해 방문자 수λ₯Ό 늘릴 수 μžˆλŠ” λ°©μ•ˆμ΄ 될 수 μžˆμ–΄ κ·Έ 자체의 λͺ©μ μ΄ SEOκ°€ 아닐 뿐, κ°„μ ‘μ μœΌλ‘œ 연관이 μžˆλ‹€κ³  λ³Ό 수 μžˆλ‹€.

    <meta property="속성값" content="λ‚΄μš©" />
    property 속성값섀λͺ…
    og:urlνŽ˜μ΄μ§€μ˜ ν‘œμ€€ URL
    og:site_nameμ‚¬μ΄νŠΈμ˜ 이름
    og:titleμ½˜ν…μΈ μ˜ 제λͺ©
    og:descriptionμ½˜ν…μΈ μ— λŒ€ν•œ κ°„λž΅ν•  μ„€λͺ…. 곡유된 ν™”λ©΄μ—μ„œ 제λͺ© 밑에 λœ¨λŠ” μ„€λͺ…글이닀.
    og:image미리보기둜 ν‘œμ‹œλ  이미지
    og:typeμ½˜ν…μΈ  λ―Έλ””μ–΄μ˜ μœ ν˜•. κΈ°λ³Έ 값은 website둜, video, music λ“±μ˜ μœ ν˜•μ„ ν‘œμ‹œν•  수 μžˆλ‹€.
    og:localeλ¦¬μ†ŒμŠ€μ˜ μ–Έμ–΄. 기본값은 en_US이며, ν•œκ΅­μ€ ko_KR이닀.

3. <hgroup>

<hgroup>은 μ»¨ν…μΈ μ˜ 제λͺ©μ„ ν‘œμ‹œν•˜λŠ” μš©λ„μΈ 만큼 핡심 ν‚€μ›Œλ“œλ₯Ό ν¬ν•¨ν•˜κ³  μžˆμ„ κ°€λŠ₯성이 λ†’μ•„ 검색 엔진도 <hgroup>μš”μ†Œμ˜ λ‚΄μš©μ„ μ€‘μš”ν•˜κ²Œ μ·¨κΈ‰ν•œλ‹€. λ”°λΌμ„œ 컨텐츠λ₯Ό μž‘μ„±ν•  λ•Œ 핡심 ν‚€μ›Œλ“œλ₯Ό μ˜μ‹ν•΄μ„œ <hgroup>μš”μ†Œμ— λ„£μ–΄μ£ΌλŠ” 것도 SEO에 도움이 λœλ‹€. ν•˜μ§€λ§Œ λ˜‘κ°™μ€ ν‚€μ›Œλ“œλ§Œ λ°˜λ³΅ν•΄μ„œ λ„£λŠ” 것은 μ—­νš¨κ³Όλ₯Ό 뢈러올 수 있기 λ•Œλ¬Έμ—, 이미 μ‚¬μš©ν•œ 핡심 ν‚€μ›Œλ“œλ₯Ό κ·ΈλŒ€λ‘œ μ‚¬μš©ν•˜κΈ° λ³΄λ‹€λŠ” λΉ„μŠ·ν•œ ν‚€μ›Œλ“œλ‘œ λŒ€μ²΄ν•˜μ—¬ μ‚¬μš©ν•˜κ±°λ‚˜ κ΄€λ ¨ ν‚€μ›Œλ“œλ₯Ό ν¬ν•¨μ‹œν‚€λŠ” 것이 μ’‹λ‹€.

4. 컨텐츠

  • κ°œμ„±μžˆλŠ” λΈŒλžœλ”©

    μ•„μ΄λ””μ–΄λ‚˜ 이름이 κ²ΉμΉ˜μ§€ μ•ŠμœΌλ©΄ κ΄€λ ¨ ν‚€μ›Œλ“œλ₯Ό κ²€μƒ‰ν–ˆμ„ λ•Œ λΉ„μŠ·ν•œ λ‚΄μš©μ„ ν¬ν•¨ν•˜λŠ” 타 μ‚¬μ΄νŠΈκ°€ λ§Žμ§€ μ•ŠκΈ° λ•Œλ¬Έμ— ν•΄λ‹Ή μ›Ή μ‚¬μ΄νŠΈκ°€ μƒμœ„κΆŒμ— 뜰 κ°€λŠ₯성이 맀우 λ†’λ‹€. λ”°λΌμ„œ ν•΄λ‹Ή μ›Ή μ‚¬μ΄νŠΈλ§Œ 검색될 수 밖에 μ—†λŠ” 아이디어λ₯Ό λ‚΄λŠ” 것도 쒋은 SEO μ „λž΅μ΄λ‹€. μ΄λŠ” μ΄λ¦„μ΄λ‚˜ μ„œλΉ„μŠ€μ˜ μ’…λ₯˜ 뿐만 μ•„λ‹ˆλΌ, μ›Ή μ‚¬μ΄νŠΈλ§Œμ˜ λ…νŠΉν•œ μ΄λ²€νŠΈλ‚˜ 컨텐츠λ₯Ό λ§Œλ“œλŠ” 것도 ν•΄λ‹Ήλœλ‹€.

  • 볡사 + λΆ™μ—¬λ„£κΈ° κΈˆμ§€

    λ°˜λŒ€λ‘œ 타 μ‚¬μ΄νŠΈμ˜ 글을 κ·ΈλŒ€λ‘œ λ³΅λΆ™ν•˜λ©΄ 검색 엔진은 쀑볡 λ¬Έμ„œλ‘œ νŒλ‹¨ν•˜μ—¬ 검색 κ²°κ³Όμ—μ„œ μƒλž΅ν•΄λ²„λ¦¬κΈ°λ„ ν•˜λ©°, μ• μ΄ˆμ— λ¨Όμ € μž‘μ„±λœ 글이 λ¨Όμ € 뜰 ν™•λ₯ μ΄ λ†’κΈ° λ•Œλ¬Έμ— 검색 κ²°κ³Ό μƒμœ„κΆŒμ„ κΈ°λŒ€ν•˜κΈ° μ–΄λ ΅λ‹€. κΈ€λž˜μ„œ 글을 κ·ΈλŒ€λ‘œ λ³΅λΆ™ν•˜λŠ” λ°©μ‹μœΌλ‘œ 컨텐츠λ₯Ό μž‘μ„±ν•˜λŠ” 것은 μ§€μ–‘λ˜μ–΄μ•Ό ν•˜λ©°, 타 μ‚¬μ΄νŠΈμ˜ 글을 μΈμš©ν•˜κ³  μ‹Άλ‹€λ©΄ μΌλΆ€λ§Œ κ°€μ Έμ˜€κ³  링크λ₯Ό 첨뢀해 좜처λ₯Ό ν‘œκΈ°ν•˜λŠ” 것이 μ’‹λ‹€.

  • κ°„κ²°ν•œ 제λͺ©κ³Ό μ„€λͺ…κΈ€

    νŽ˜μ΄μ§€ 제λͺ©κ³Ό μ„€λͺ…글에 이것 저것 많이 적어 λ„£λŠ”λ‹€κ³  ν•΄μ„œ 검색이 잘 λ˜λŠ” 것은 μ•„λ‹ˆλ©°, 검색 μ—”μ§„ λ…ΈμΆœ 횟수λ₯Ό 늘리기 μœ„ν•΄ μ „ν˜€ κ΄€λ ¨ μ—†κ±°λ‚˜ μ‹€μ‹œκ°„μœΌλ‘œ 많이 κ²€μƒ‰λ˜λŠ” ν‚€μ›Œλ“œλ₯Ό λ„£μ–΄λ΄€μž μ‚¬μ΄νŠΈλ₯Ό λ°©λ¬Έν•œ μ‚¬μš©μžκ°€ κ΄€λ ¨ μ—†λŠ” 컨텐츠λ₯Ό 보고 μ‚¬μ΄νŠΈμ— μ•ˆμ’‹μ€ 이미지λ₯Ό κ°–κ²Œ 될 수 μžˆλ‹€.

    λ˜ν•œ μ›Ή μ‚¬μ΄νŠΈμ™€ 관련이 μžˆλŠ” ν‚€μ›Œλ“œλΌ 해도 λ„ˆλ¬΄ 많이 λ°˜λ³΅ν•΄μ„œ μž‘μ„±ν•˜λŠ” 것은 μ’‹μ§€ μ•Šλ‹€. μ΅œμ•…μ˜ 경우 슀팸 μš”μ†Œκ°€ μžˆλŠ” μ‚¬μ΄νŠΈλ‘œ λΆ„λ₯˜λ  수 있고, μ‚¬μš©μž μž…μž₯μ—μ„œλ„ λ§Œμ‘±λ„κ°€ λ†’μ§€ μ•Šμ„ κ°€λŠ₯성이 λ†’λ‹€.

  • μ΅œλŒ€ν•œ ν…μŠ€νŠΈλ‘œ μž‘μ„±

    μ μ ˆν•œ μ΄λ―Έμ§€μ˜ μ‚¬μš©μ€ μ»¨ν…μΈ μ˜ ν’ˆμ§ˆμ„ λ†’μ—¬μ£Όμ§€λ§Œ, κΈ€μžλ‘œ 적어도 될 λ‚΄μš©μ„ 이미지라 μž‘μ„±ν•˜λŠ” 것은 SEO에 도움이 λ˜μ§€ μ•ŠλŠ”λ‹€. 검색 엔진은 μ΄λ―Έμ§€λ‘œ μž‘μ„±λœ ν…μŠ€νŠΈλ₯Ό 읽을 수 μ—†κΈ° λ•Œλ¬Έμ΄λ‹€. κΌ­ 이미지λ₯Ό λ„£μ–΄μ•Ό ν•œλ‹€λ©΄ alt속성을 μ΄μš©ν•΄ ν•΄λ‹Ή 이미지에 λŒ€ν•œ μ„€λͺ…을 ν…μŠ€νŠΈλ‘œ μž‘μ„±ν•˜λŠ” 것이 μ’‹λ‹€. ν•˜μ§€λ§Œ 이 μ—­μ‹œ λ„ˆλ¬΄ 길게 μž‘μ„±ν•˜λ©΄ 슀팸 μš”μ†Œλ‘œ 인식할 수 μžˆμœΌλ‹ˆ ν•„μš”ν•œ μ„€λͺ…λ§Œ μž‘μ„±ν•˜λŠ” 것이 μ’‹λ‹€.


Uploaded by N2T