roqkf

[Web] SEO λ³Έλ¬Έ

πŸ’» Development/Web

[Web] SEO

ahyeon7 2023. 1. 17. 11:59

✨ Intro

λ„€μ΄λ²„λ‚˜ ꡬ글 같은 검색 엔진을 μ΄μš©ν•˜λ©΄μ„œ μ›ν•˜λŠ” κ²°κ³Όλ₯Ό λ°”λ‘œ μ°ΎκΈ° μ–΄λ €μ› λ˜ κ²½ν—˜κ³Ό λ°˜λŒ€λ‘œ μ›ν•˜λŠ” κ²°κ³ΌλŠ” μ°Ύμ•˜μ§€λ§Œ ꡳ이 λ§ˆμ§€λ§‰ νŽ˜μ΄μ§€κΉŒμ§€ 맀번 λ³΄λŠ” μœ μ €λŠ” 많이 없을 것이닀. 심지어 μ›ν•˜λŠ” κ²°κ³Όκ°€ μƒμœ„μ— μžˆλ‹€λ©΄ 검색 νŽ˜μ΄μ§€μ˜ 1 νŽ˜μ΄μ§€ μ‘°μ°¨ μ „λΆ€ ν™•μΈν•˜μ§€ μ•Šκ³  λ„˜μ–΄κ°€λŠ” κ²½μš°κ°€ λŒ€λΆ€λΆ„μΌ 것이닀. μš°λ¦¬κ°€ μ΄λ ‡κ²Œ μ—΄μ‹¬νžˆ ν•™μŠ΅ν•΄ μ›Ή νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ–΄λ„ μœ μ €κ°€ κ²€μƒ‰ν–ˆμ„ λ•Œ, 검색 결과의 μƒμœ„μ— μ—†κ±°λ‚˜ λ’· νŽ˜μ΄μ§€λ‘œ λ°€λ €λ‚˜κ²Œ λœλ‹€λ©΄ 아무도 찾지 μ•ŠλŠ” μ›Ή νŽ˜μ΄μ§€κ°€ λœλ‹€. μ΄λŸ¬ν•œ μ‚¬νƒœλ₯Ό λ°©μ§€ν•˜κΈ° μœ„ν•΄μ„œ 검색 μ—”μ§„μ˜ μž‘λ™ 방식에 맞게 μ›Ή νŽ˜μ΄μ§€λ₯Ό μ΅œμ ν™” ν•΄ μ£ΌλŠ” μž‘μ—… SEOκ°€ ν•„μš”ν•˜λ‹€.

❀️‍πŸ”₯ SEO

  • Search Engine Optimization의 μ•½μž, 검색 결과에 μƒμœ„μ— λ…ΈμΆœλ  수 μžˆλ„λ‘ λ‚΄ μ½˜ν…μΈ λ₯Ό μ΅œμ ν™”ν•˜λŠ” 방식
  • 검색 μ—”μ§„μ˜ μž‘λ™ 방식에 맞게 μ›Ή νŽ˜μ΄μ§€λ₯Ό μ΅œμ ν™” ν•΄ μ£ΌλŠ” μž‘μ—…
  • SEOλŠ” 검색 μœ μ €μ˜ μ˜λ„λ₯Ό 이해해, 이에 μΆ©μ‹€νžˆ 맞좰 μ›Ή νŽ˜μ΄μ§€μ˜ μ½˜ν…μΈ λ₯Ό μ œμž‘ν•˜λŠ” κ³Όμ •

πŸ”Ž On-Page SEO

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

πŸ”Ž Off-Page SEO

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

❀️‍πŸ”₯ SEO μ˜ˆμ‹œ | On-Page SEO

  • λ‚˜λ¬΄μœ„ν‚€μ˜ λΆ•μ–΄λΉ΅ κ²°κ³Όλ₯Ό μ•Œκ³  μ‹Άμ–΄μ„œ κ²€μƒ‰ν–ˆλ‹€κ³  κ°€μ •ν•΄ 보자, κ΄‘κ³ λ₯Ό μ œμ™Έν•˜κ³  λΆ•μ–΄λΉ΅ - λ‚˜λ¬΄μœ„ν‚€μ˜ μ›ΉνŽ˜μ΄μ§€κ°€ κ°€μž₯ 상단에 λ…ΈμΆœλΌ μžˆλ‹€.

❗광고비λ₯Ό μ§€λΆˆν•˜κ³  검색 상단에 κ΄‘κ³ λ₯Ό κ²Œμž¬ν•˜μ—¬ 뜨게 ν•˜λŠ” 것은 Off-Page-SEO의 μ˜ˆμ‹œμ΄λ‹€.

  • λ‚˜λ¬΄μœ„ν‚€μ˜ 링크λ₯Ό 타고 λ“€μ–΄κ°€ μ‹€μ œ ν™ˆνŽ˜μ΄μ§€μ˜ HTML μš”μ†Œλ₯Ό 확인해 보자!

Element 탭을 확인해 λ³΄λ‹ˆ, title μš”μ†Œμ— 검색 ν‚€μ›Œλ“œλ₯Ό 확인할 수 μžˆλ‹€. μ΄λŠ” SEO에 영ν–₯을 μ£ΌλŠ” 수 λ§Žμ€ μš”μ†Œ 쀑 μΌλΆ€μ§€λ§Œ, 이처럼 μ›Ή νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©ν•˜λŠ” HTML μš”μ†Œ μ’…λ₯˜μ™€ μš”μ†Œμ— λ“€μ–΄κ°€λŠ” λ‚΄μš©μ΄ 검색 결과에 영ν–₯을 μ£ΌλŠ” 것을 μ•Œ μˆ˜μžˆλ‹€. λ˜ν•œ μ›Ή νŽ˜μ΄μ§€λ₯Ό μž‘μ„±ν•˜λ©΄μ„œ ν™œμš©ν•  수 μžˆλŠ” On-Page-SEO의 μ˜ˆμ‹œμ΄κΈ°λ„ ν•˜λ‹€.

πŸ”Ž On-Page-SEO | On-Pageμ—μ„œ ν†΅μ œν•  수 μžˆλŠ” μš”μ†Œ

1. <title> μš”μ†Œ

 

  • 검색 κ²°κ³Όμ°½μ—μ„œ 제λͺ©μ— ν•΄λ‹Ήν•˜λŠ” μš”μ†Œ
  • 일반적으둜 <head> μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ‘œ μž‘μ„±
  • 검색 μ—”μ§„μ—μ„œ 검색 ν›„, 제λͺ©μ„ μ‚΄νŽ΄λ³΄λ©΄μ„œ μ–΄λ–€ νŽ˜μ΄μ§€λ‘œ λ“€μ–΄κ°ˆμ§€ κ²°μ •ν•˜λŠ” κ²½μš°κ°€ λ§Žμ„ 것이닀. 이처럼 제λͺ©μ€ 검색 결과에 μ€‘μš”ν•œ 역할을 ν•œλ‹€.

<title> μš”μ†Œμ— μ–΄λ–€ λ‚΄μš©μ„ μž‘μ„±ν•˜λŠ”κ°€μ— 따라 검색 ν›„ μœ μž…κΉŒμ§€ μœ λ„ν•  수 μžˆλ‹€.

제λͺ©μ΄ λ„ˆλ¬΄ κΈΈκ±°λ‚˜ 짧을 경우 μ‚¬μš©μžκ°€ μ‚¬μ΄νŠΈλ₯Ό 제λͺ©μœΌλ‘œ νŒŒμ•…ν•˜κΈ° μ–΄λ €μ›Œμ Έ μœ μž…λ₯ μ΄ 떨어진닀.

<title> μš”μ†Œμ— 핡심 ν‚€μ›Œλ“œλ₯Ό ν¬ν•¨μ‹œν‚€λ©΄ μƒμœ„μ— λ…ΈμΆœλ  ν™•λ₯ μ΄ 높아진닀.

같은 ν‚€μ›Œλ“œλ₯Ό λ°˜λ³΅ν•˜λ©΄ 검색 μ‹œ λΆˆμ΄μ΅μ„ 받을 수 μžˆλ‹€. 제λͺ©μ—λŠ” 핡심 ν‚€μ›Œλ“œλ₯Ό ν•œ 번만 ν¬ν•¨μ‹œν‚€μž.

2. <meta> μš”μ†Œ

 

  • 메타 데이터λ₯Ό λ‹΄λŠ” μš”μ†Œ
  • 메타 데이터: ν•΄λ‹Ή μ›Ή μ‚¬μ΄νŠΈμ—μ„œ 닀루고 μžˆλŠ” 데이터가 무엇인가에 λŒ€ν•œ 데이터
  • 일반적으둜 <head> μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ‘œ μž‘μ„±
  • 검색 κ²°κ³Όμ°½μ—μ„œ 제λͺ© 밑에 λ”°λΌμ˜€λŠ” μ„€λͺ…글이 <meta> μš”μ†Œ μ•ˆμ— λ“€μ–΄μžˆλŠ” λ‚΄μš©μ΄λ‹€. ν•΄λ‹Ή μ›Ή νŽ˜μ΄μ§€κ°€ μ–΄λ–€ 데이터λ₯Ό 닀루고 μžˆλŠ”μ§€λ₯Ό μ„€λͺ…ν•˜λŠ” 메타 데이터가 λ“€μ–΄μžˆμŒμ„ μ•Œ 수 μžˆλ‹€. μ΄μ™€ 같은 κ²½μš°μ—λŠ” name μ†μ„±μ„ μ‚¬μš©ν•œλ‹€.
  • μ†Œμ…œ λ―Έλ””μ–΄, μ±„νŒ… μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λ“± 링크λ₯Ό κ³΅μœ ν–ˆμ„ λ•Œ 미리보기에 λœ¨λŠ” κ΄€λ ¨ 정보도 <meta> μš”μ†Œμ— λ“€μ–΄κ°€ μžˆλŠ” λ‚΄μš©μ΄λ‹€. μ΄μ™€ 같은 κ²½μš°μ—λŠ” property μ‚¬μš©ν•œλ‹€.

❗property μ†μ„±μ„ μ‚¬μš©ν•˜λŠ” κ²½μš°λŠ” μ˜€ν”ˆ κ·Έλž˜ν”„λΌκ³  ν•˜λ©°, νŽ˜μ΄μŠ€λΆμ—μ„œ κ²Œμ‹œλ¬Όμ„ κ³΅μœ ν•˜κΈ° μœ„ν•œ λͺ©μ μœΌλ‘œ λ§Œλ“€μ–΄μ‘ŒμœΌλ©°, 각 속성 μ•žμ—λŠ” μ˜€ν”ˆ κ·Έλž˜ν”„λ₯Ό λœ»ν•˜λŠ” "og" κ°€ λΆ™λŠ”λ‹€.

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

<meta name="속성값" content="λ‚΄μš©" />

μ£Όμš” 속성값 | name

name 속성값섀λͺ…
description μ½˜ν…μΈ μ— λŒ€ν•œ κ°„λž΅ν•œ μ„€λͺ…, 검색 κ²°κ³Όμ—μ„œ 제λͺ© 밑에 λœ¨λŠ” λ‚΄μš©
keywords μ›Ή νŽ˜μ΄μ§€μ˜ κ΄€λ ¨ ν‚€μ›Œλ“œλ“€μ„ λ‚˜μ—΄ν•  λ•Œ μ‚¬μš©
author μ½˜ν…μΈ μ˜ μ œμž‘μžλ₯Ό ν‘œμ‹œ

μ˜€ν”ˆ κ·Έλž˜ν”„ (open graph)

<meta property="속성값" content="λ‚΄μš©" />

μ£Όμš” 속성값 | property

property 속성값섀λͺ…
og:url νŽ˜μ΄μ§€μ˜ ν‘œμ€€ URL
og:site_name μ‚¬μ΄νŠΈμ˜ 이름
og:title μ½˜ν…μΈ μ˜ 제λͺ©
og:description μ½˜ν…μΈ μ— λŒ€ν•œ κ°„λž΅ν•  μ„€λͺ…, 검색 κ²°κ³Όμ—μ„œ 제λͺ© 밑에 λœ¨λŠ” λ‚΄μš©
og:image 미리보기둜 ν‘œμ‹œλ  이미지
og:type μ½˜ν…μΈ  λ―Έλ””μ–΄ μœ ν˜•, κΈ°λ³Έκ°’: website
og:locale λ¦¬μ†ŒμŠ€ μ–Έμ–΄, κΈ°λ³Έκ°’: en_US

πŸ”” SEOκ°€ λͺ©μ μ΄λΌλ©΄ name μ†μ„±μ„ μ‚¬μš©ν•˜λŠ” <meta> μš”μ†Œμ— 더 쀑점을 λ‘λ˜, μ˜€ν”ˆ κ·Έλž˜ν”„λ„ 잘 μž‘μ„±ν•˜λŠ” 것이 μ’‹λ‹€!

3. <hgroup> μš”μ†Œ

  • μ½˜ν…μΈ μ˜ 제λͺ©μ„ ν‘œμ‹œν•˜λŠ” μš©λ„μΈλ§ŒνΌ 핡심 ν‚€μ›Œλ“œλ₯Ό ν¬ν•¨ν•˜κ³  μžˆμ„ κ°€λŠ₯성이 λ†’λ‹€.
  • 검색 엔진도 <hgroup> μš”μ†Œμ˜ λ‚΄μš©μ„ μ€‘μš”ν•˜κ²Œ μ·¨κΈ‰ν•˜κΈ° λ•Œλ¬Έμ— μ½˜ν…μΈ λ₯Ό μž‘μ„±ν•  λ•ŒλŠ” 핡심 ν‚€μ›Œλ“œλ₯Ό μ˜μ‹ν•΄μ„œ <hgroup> λ₯Ό λ„£μ–΄μ£ΌλŠ” 것이 SEO에 도움이 λœλ‹€.
  • λ˜‘κ°™μ€ ν‚€μ›Œλ“œλ§Œ λ°˜λ³΅ν•΄μ„œ 넣기보단 이미 μ‚¬μš©ν•œ ν‚€μ›Œλ“œλŠ” μ€‘λ³΅ν•΄μ„œ μ‚¬μš©ν•˜μ§€ μ•Šκ³ , λΉ„μŠ·ν•œ ν‚€μ›Œλ“œλ‘œ λŒ€μ²΄ν•΄ μ‚¬μš©ν•˜κ±°λ‚˜, ν•΄κΉ€ ν‚€μ›Œλ“œμ˜ κ΄€λ ¨ ν‚€μ›Œλ“œλ“€μ„ ν¬ν•¨μ‹œν‚€λŠ” 것이 μ’‹λ‹€.

4. μ½˜ν…μΈ 

  • κ°œμ„±μžˆλŠ” λΈŒλžœλ”©μ•„μ΄λ””μ–΄λ‚˜ 이름이 κ²ΉμΉ˜μ§€ μ•ŠλŠ”λ‹€λ©΄, κ΄€λ ¨ ν‚€μ›Œλ“œλ₯Ό κ²€μƒ‰ν–ˆμ„ λ•Œ ν•΄λ‹Ή μ›Ή μ‚¬μ΄νŠΈκ°€ μƒμœ„κΆŒμ— 뜰 κ°€λŠ₯성이 맀우 λ†’λ‹€.
  • 볡사 + λΆ™μ—¬λ„£κΈ° κΈˆμ§€νƒ€ μ‚¬μ΄νŠΈμ˜ 글을 κ·ΈλŒ€λ‘œ λ³΅μ‚¬ν•΄μ„œ μ‚¬μš©ν•˜λ©΄ 검색 엔진은 쀑볡 λ¬Έμ„œλ‘œ νŒμ •ν•˜μ—¬ μ•„μ˜ˆ 검색 κ²°κ³Όμ—μ„œ μƒλž΅ν•΄λ²„λ¦¬κΈ°λ„ ν•œλ‹€. μ• μ΄ˆμ— λ¨Όμ € μž‘μ„±λ˜μ—ˆλ˜ 글이 λ¨Όμ € 뜰 ν™•λ₯ μ΄ λ†’κΈ° λ•Œλ¬Έμ—, 검색 κ²°κ³Ό μƒμœ„κΆŒμ΄ 뜰 κ°€λŠ₯성도 κ·Έλ ‡κ²Œ 높지 μ•Šλ‹€. λ”°λΌμ„œ 글을 κ·ΈλŒ€λ‘œ 볡사 λΆ™μ—¬λ„£κΈ° ν•˜λŠ” λ°©μ‹μœΌλ‘œ μ½˜ν…μΈ λ₯Ό μž‘μ„±ν•˜λŠ” 것은 μ§€μ–‘ν•΄μ•Όν•˜λ©°, 타 μ‚¬μ΄νŠΈμ˜ 글을 μΈμš©ν•˜κ³  μ‹Άλ‹€λ©΄, μΌλΆ€λ§Œ κ°€μ Έμ˜€λ©΄μ„œ 링크λ₯Ό μ²¨λΆ€ν•˜μ—¬ 좜처λ₯Ό ν‘œκΈ°ν•˜λŠ” 것이 μ’‹λ‹€
  • κ°„κ²°ν•œ 제λͺ©κ³Ό μ„€λͺ…κΈ€νŽ˜μ΄μ§€ 제λͺ©κ³Ό μ„€λͺ…글에 이것 저것 많이 적어 λ„£λŠ”λ‹€κ³  ν•΄μ„œ 검색이 잘 λ˜λŠ” 것은 μ•„λ‹ˆλ‹€.
  • μ΅œλŒ€ν•œ κΈ€μžλ‘œ μž‘μ„±ν•˜κΈ°μ μ ˆν•œ μ΄λ―Έμ§€μ˜ μ‚¬μš©μ€ μ½˜ν…μΈ μ˜ ν’ˆμ§ˆμ„ λ†’μ—¬μ€€λ‹€. ν•˜μ§€λ§Œ κΈ€μžλ‘œ 적어도 될 λ‚΄μš©μ„ ꡳ이 μ΄λ―Έμ§€λ‘œ λ§Œλ“€μ–΄μ„œ μž‘μ„±ν•˜λŠ” 것은 SEOμ—λŠ” 도움이 λ˜μ§€ μ•ŠλŠ”λ‹€. μ‚¬μš©μžλŠ” 이미지에 적힌 글을 읽을 수 μžˆμ§€λ§Œ, 검색 엔진은 그렇지 μ•ŠκΈ° λ•Œλ¬Έμ΄λ‹€. λ”°λΌμ„œ 검색 μ—”μ§„μ˜ 선택을 λ°›μ„λ§Œν•œ 글을 μ΄λ―Έμ§€λ‘œ λŒ€μ²΄ν•˜μ—¬ 기회λ₯Ό λ°•νƒˆν•˜λŠ” 일은 μ—†μ–΄μ•Ό ν•œλ‹€.

'πŸ’» Development > Web' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[Web] μ›Ή ν‘œμ€€ & μ ‘κ·Όμ„±  (0) 2023.01.09
[Web] Cross Browsing  (1) 2023.01.09
[Web] 자주 ν‹€λ¦¬λŠ” Markup  (0) 2023.01.09
[Web] μ›Ή ν‘œμ€€ & Semantic HTML  (0) 2023.01.09
wireframe & prototype  (0) 2022.12.18
'πŸ’» Development/Web' Related Articles more