[HTML] Search Engine Optimization

HannahhhΒ·2022λ…„ 9μ›” 5일
html5
0

HTML5

λͺ©λ‘ 보기
8/9

πŸ” SEO(Search Engine Optimization)


검색 μ—”μ§„μ˜ μž‘λ™ 방식에 맞게 μ›Ή νŽ˜μ΄μ§€λ₯Ό μ΅œμ ν™”ν•˜λŠ” μž‘μ—…μ„ μ˜λ―Έν•˜λ©°, 크게 νŽ˜μ΄μ§€ λ‚΄λΆ€μ—μ„œ 진행할 수 μžˆλŠ” On-Page SEO와 μ™ΈλΆ€μ—μ„œ μ΄λ£¨μ–΄μ§€λŠ” Off-Page SEO둜 λ‚˜λˆŒ 수 μžˆλ‹€.

On-Page SEO의 경우, 제λͺ©, μ½˜ν…μΈ , 핡심 ν‚€μ›Œλ“œ, μ‹œλ§¨ν‹± μš”μ†Œ μ‚¬μš©μœΌλ‘œ λΆ€ν„° 이루어지며, Off-Page SEO의 경우, μ›Ή νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ΄λ‚˜ κ΅¬μ‘°μ™€λŠ” 관계없이 SNS 홍보, 백링크 등을 톡해 이루어진닀.

λ”°λΌμ„œ, HTML μš”μ†Œμ˜ μ’…λ₯˜μ™€ μš”μ†Œμ— λ“€μ–΄κ°€λŠ” λ‚΄μš©μ΄ 검색 결과에 영ν–₯을 μ£ΌλŠ” 것은 On-Page SEO에 ν•΄λ‹Ήλ˜λ©°, κ΄‘κ³ λΉ„λ₯Ό μ§€λΆˆν•˜κ³  검색 κ²°κ³Ό μƒμœ„μ— 뜨게 λ§Œλ“œλŠ” 것은 Off-Page SEO에 ν•΄λ‹Ήλœλ‹€.



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


βœ” <title> μš”μ†Œ


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

<title> μš”μ†Œμ— μž‘μ„±ν•˜λŠ” λ‚΄μš©μ— 따라, 검색 ν›„ μœ μž…μ„ μœ λ„ν•  수 있기 λ•Œλ¬Έμ— 제λͺ©μœΌλ‘œ μ‚¬μ΄νŠΈλ₯Ό νŒŒμ•…ν•˜κΈ° 쉽도둝 μ μ ˆν•œ 길이둜 μž‘μ„±ν•΄μ•Όν•œλ‹€.

λ˜ν•œ, <title> μš”μ†Œμ— 핡심 ν‚€μ›Œλ“œλ₯Ό ν¬ν•¨μ‹œμΌœ, μƒμœ„μ— λ…ΈμΆœλ  ν™•λ₯ μ„ 높일 수 μžˆλ‹€. 단, 핡심 ν‚€μ›Œλ“œλŠ” 쀑볡없이 ν•œ 번만 ν¬ν•¨μ‹œμΌœμ•Ό ν•œλ‹€.




βœ” <meta> μš”μ†Œ


메타 데이터λ₯Ό λ‹΄λŠ” μš”μ†Œλ‘œ, <title> μš”μ†Œμ™€ λ§ˆμ°¬κ°€μ§€λ‘œ <head> μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ‘œ μž‘μ„±ν•œλ‹€.

메타 λ°μ΄ν„°λŠ” μ›Ή νŽ˜μ΄μ§€κ°€ μ–΄λ–€ 데이터λ₯Ό 닀루고 μžˆλŠ” 지 μ„€λͺ…ν•˜λŠ” λ°μ΄ν„°λ‘œ, 검색 κ²°κ³Όμ°½μ—μ„œ 제λͺ© 밑에 λ”°λΌμ˜€λŠ” μ„€λͺ…글을 μ˜ˆμ‹œλ‘œ λ“€ 수 μžˆλ‹€.

<meta> μš”μ†Œμ— μž‘μ„±λœ λ‚΄μš©μ€ 검색 κ²°κ³Όμ°½ 뿐만 μ•„λ‹ˆλΌ SNS에 링크λ₯Ό κ³΅μœ ν–ˆμ„ λ•Œ λœ¨λŠ” 링크 λ―Έλ¦¬λ³΄κΈ°μ—μ„œλ„ 확인할 수 μžˆλ‹€.

단, 검색 κ²°κ³Όμ°½μ—μ„œλŠ” SEOλ₯Ό μœ„ν•œ λͺ©μ μœΌλ‘œ name 속성을, 링크 미리보기의 경우 곡유λ₯Ό λͺ©μ μœΌλ‘œ property 속성을 μ‚¬μš©ν•œλ‹€.

property λ₯Ό μ‚¬μš©ν•˜λŠ” κ²½μš°λŠ” μ˜€ν”ˆ κ·Έλž˜ν”„(Open Graph)라고 ν•˜λ©°, 속성값 μ•žμ— ogκ°€ λΆ™λŠ”λ‹€.

잘 μž‘μ„±λœ μ˜€ν”ˆ κ·Έλž˜ν”„λŠ” μœ μž…μ„ 늘릴 수 μžˆμ–΄ SEO와 κ°„μ ‘μ μœΌλ‘œ 연관이 μžˆλ‹€κ³  λ³Ό 수 있기 λ•Œλ¬Έμ—, SEO ν–₯상에 도움이 λœλ‹€.



<!-- SEOλ₯Ό μœ„ν•œ <meta> μš”μ†Œ -->
<meta name="속성값" content="λ‚΄μš©" />

<!-- μ˜€ν”ˆ κ·Έλž˜ν”„ (open graph) <meta> μš”μ†Œ -->
<meta property="속성값" content="λ‚΄μš©" />

⭐ name μ†μ„±κ°’μ˜ μ’…λ₯˜

  • description : μ½˜ν…μΈ μ— λŒ€ν•œ κ°„λž΅ν•œ μ„€λͺ…, 검색 κ²°κ³Όμ°½μ—μ„œ 제λͺ© 밑에 λ”°λΌμ˜€λŠ” μ„€λͺ…κΈ€

  • keywords : μ›Ή νŽ˜μ΄μ§€ κ΄€λ ¨ ν‚€μ›Œλ“œ λ‚˜μ—΄

  • author : μ½˜ν…μΈ  μ œμž‘μž ν‘œμ‹œ


⭐ property μ†μ„±κ°’μ˜ μ’…λ₯˜

  • og:url : νŽ˜μ΄μ§€μ˜ ν‘œμ€€ URL

  • og:site_name : μ‚¬μ΄νŠΈ 이름

  • og:title : μ½˜ν…μΈ  제λͺ©

  • og:description : μ½˜ν…μΈ μ— λŒ€ν•œ κ°„λž΅ν•œ μ„€λͺ…, 미리보기 제λͺ© 밑에 λ”°λΌμ˜€λŠ” μ„€λͺ…κΈ€

  • og:image : 미리보기 이미지

  • og:type : μ½˜ν…μΈ  λ―Έλ””μ–΄μ˜ μœ ν˜•(video, music λ“±, default = website)

  • og:locale : λ¦¬μ†ŒμŠ€μ˜ μ–Έμ–΄(ν•œκ΅­ = ko_KR, default = en_US)




βœ” <hgroup> μš”μ†Œ


μ½˜ν…μΈ μ˜ 제λͺ©μ„ ν‘œμ‹œν•˜λŠ” μš”μ†Œλ‘œ, 핡심 ν‚€μ›Œλ“œλ₯Ό ν¬ν•¨ν•˜κ³  μžˆμ„ κ°€λŠ₯성이 λ†’λ‹€.

λ”°λΌμ„œ, 검색 엔진도 hgroup μš”μ†Œμ˜ λ‚΄μš©μ„ μ€‘μš”ν•˜κ²Œ μ·¨κΈ‰ν•˜λ―€λ‘œ μž‘μ„±μ‹œ 핡심 ν‚€μ›Œλ“œλ₯Ό μ˜μ‹ν•˜λ©΄μ„œ μž‘μ„±ν•΄μ•Όν•œλ‹€.

단, 이미 핡심 ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν–ˆλ‹€λ©΄ λΉ„μŠ·ν•œ ν‚€μ›Œλ“œλ‘œ λŒ€μ²΄ν•˜μ—¬ μ‚¬μš©ν•˜κ±°λ‚˜ κ΄€λ ¨ ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 것이 μ’‹λ‹€.(핡심 ν‚€μ›Œλ“œ 쀑볡X)




βœ” Contents


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


    ν•΄λ‹Ή μ›Ήμ‚¬μ΄νŠΈλ§Œ κ²€μƒ‰λ˜λ„λ‘ λ˜λŠ” μ΅œμƒμœ„κΆŒμ— 뜰 수 μžˆλ„λ‘, μ•„μ΄λ””μ–΄λ‚˜ 이름이 겹치치 μ•Šλ„λ‘ κ΅¬μƒν•œλ‹€.
    독창적인 μ΄λ²€νŠΈλ‚˜ μ½˜ν…μΈ λ₯Ό κ΅¬μƒν•˜λŠ” 것도 μ’‹λ‹€.

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


    쀑볡 λ¬Έμ„œλ‘œ 취급될 κ°€λŠ₯성이 맀우 λ†’κΈ° λ•Œλ¬Έμ— 검색 κ²°κ³Όμ—μ„œ μƒλž΅λ  수 있으며, λ¨Όμ € μž‘μ„±λœ 글듀이 μžˆμœΌλ―€λ‘œ μƒμœ„κΆŒμ— 뜰 κ°€λŠ₯성이 적닀.
    λ”°λΌμ„œ, 타 μ‚¬μ΄νŠΈμ˜ 글을 μΈμš©ν•˜κ³  μ‹Άλ‹€λ©΄ μΌλΆ€λ§Œ κ°€μ Έμ˜€κ³  링크λ₯Ό μ²¨λΆ€ν•˜λŠ” μ‹μœΌλ‘œ 좜처λ₯Ό ν‘œκΈ°ν•œλ‹€.

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


    검색 ν›„ μœ μž…μ„ μœ λ„ν•  수 있기 λ•Œλ¬Έμ— 제λͺ©κ³Ό μ„€λͺ…κΈ€λ§ŒμœΌλ‘œ μ‚¬μ΄νŠΈλ₯Ό νŒŒμ•…ν•˜κΈ° 쉽도둝 μ μ ˆν•œ 길이둜 μž‘μ„±ν•΄μ•Όν•œλ‹€.

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


    κ²€μƒ‰μ—”μ§„μ˜ 경우 이미지λ₯Ό 읽을 수 μ—†κΈ° λ•Œλ¬Έμ— μ΅œλŒ€ν•œ ν…μŠ€νŠΈλ‘œ μž‘μ„±ν•˜λŠ” 것이 μ’‹λ‹€.
    단, κΌ­ 이미지가 ν•„μš”ν•˜λ‹€λ©΄ alt 속성을 μ‚¬μš©ν•˜μ—¬ 이미지에 λŒ€ν•œ μ„€λͺ…을 κ°„κ²°ν•˜κ²Œ ν…μŠ€νŠΈλ‘œ μž‘μ„±ν•˜μž.

    <img src="이미지.png" alt="이미지에 λŒ€ν•œ κ°„κ²°ν•œ μ„€λͺ…" />




이 μ™Έμ˜ SEO에 영ν–₯을 μ£ΌλŠ” μš”μ†Œλ₯Ό 찾아보고 μ‹Άλ‹€λ©΄,




πŸ”₯ μ‹€μŠ΅ μ˜ˆμ‹œ


  • κΈ°λ³Έ μ½”λ“œ 및 좜λ ₯ ν™”λ©΄
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>링크λ₯Ό λ³΅μ‚¬ν•΄μ„œ κ³΅μœ ν•΄λ³΄μž!</h1>
  </body>
</html>


  • <title> μš”μ†Œ μž‘μ„±
    <title>μ‹€μŠ΅ μ˜ˆμ‹œ</title>


  • μ˜€ν”ˆ κ·Έλž˜ν”„ og:title μΆ”κ°€(10κΈ€μž 이내)
<meta property="og:title" content="μ½˜ν…μΈ  제λͺ©" />


  • μ˜€ν”ˆ κ·Έλž˜ν”„ og:description μΆ”κ°€(10κΈ€μž 이내)
<meta property="og:description" content="μ½˜ν…μΈ  μ„€λͺ…" />


  • μ˜€ν”ˆ κ·Έλž˜ν”„ og:description λ³€κ²½(30κΈ€μž 이상)
 <meta
      property="og:description"
      content="μ½˜ν…μΈ μ— λŒ€ν•œ κ°„λž΅ν•œ μ„€λͺ…, 미리보기 제λͺ© 밑에 λ”°λΌμ˜€λŠ” μ„€λͺ…κΈ€λ‘œ μ μ ˆν•œ 길이둜 μž‘μ„±ν•΄μ•Ό 접근성을 ν–₯μƒμ‹œν‚¬ 수 μžˆλ‹€. μ•„λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄λ₯΄γ…‘λ₯΄"
    />


  • μ˜€ν”ˆ κ·Έλž˜ν”„ og:title λ³€κ²½(30κΈ€μž 이상)
    <meta property="og:title" content="μ½˜ν…μΈ  제λͺ©: SEO μ‹€μŠ΅ 예제, 쑸리닀... μ–‘ ν•œ 마리, μ–‘ 두 마리, μ–‘ μ„Έ 마리, μ–‘ λ„€ 마리, μ–‘ λ‹€μ„― 마리" />

μ•„λž˜μ™€ 같이 제λͺ©μ˜ 길이가 κΈΈμ–΄μ Έ, description ν•­λͺ©μ΄ 보이지 μ•ŠλŠ”λ‹€.


  • <body> μš”μ†Œ μ•ˆμ— <img> μš”μ†Œ μΆ”κ°€
<img
      src="http://t1.daumcdn.net/friends/prod/editor/dc8b3d02-a15a-4afa-a88b-989cf2a50476.jpg"
    />


  • μ˜€ν”ˆ κ·Έλž˜ν”„ og:image μΆ”κ°€
<meta
      property="og:image"
      content="https://t1.daumcdn.net/cfile/tistory/992FA9345AB64A0D19"
    />

μ•„λž˜μ™€ 같이 미리보기 이미지가 λ³€κ²½λœλ‹€.




Reference: μ½”λ“œμŠ€ν…Œμ΄μΈ 

profile
Hannahhh
이전 포슀트

[HTML] μ›Ή ν‘œμ€€

λ‹€μŒ 포슀트

[HTML] μ›Ή μ ‘κ·Όμ„±

0개의 λŒ“κΈ€