공부 모음집/WEB

검색엔진 최적화(SEO)와 OG 작업

leedaramji 2023. 10. 7. 17:39

 

  1. 검색엔진 최적화란?
  2. SEO를 위한 메타태그와 OG 작업
  3. 검색엔진

 

 

💡1. 검색엔진 최적화 (SEO)?

 

  • 검색 엔진이란 키워드를 검색해서 관련 있는 사이트를 들어갈 수 있게 하는 서비스를 말한다.
  • 검색 엔진 최적화란 Search Engine Optimization을 줄여서 'SEO'로 불린다.
  • SEO는 검색엔진에서 찾기 쉽도록 웹사이트의 트래픽의 품질과 양을 개선하는 프로세스이다.
  • 포털 또는 검색 사이트에서 사용자가 특정 키워드로 검색했을 때 검색 결과의 상위권에 나타나도록 관리하는 작업
  • 상위에 노출이 되면 방문 트래픽이 늘어나기 때문에 효과적이고, 비용 처리 없는 마케팅 수단이 된다.
  • 아무리 좋은 웹 사이트라도 SEO를 충족시키지 못하면 첫 페이지에 노출될 수 없고, 고객에게 존재를 알릴 수 없다. 

 

 

💡 SEO 작성할 때, 중요한 3가지

 

  • 타이틀 태그 
  • 메타 태그 
  • 헤드 태그 : 각각 Heading 태그마다 대상이랑 의도 키워드들이 들어가야 한다. 크롤러는 h1~h6 순서대로 읽는다. ⭐

 
 

 

2. SEO를 위한 메타태그와 OG 작업 

  같은 조건의 콘텐츠라도 <head> 태그 안에 <meta> 태그를 얼마나 잘 작성했는지는 굉장히 중요하다.
 

메타 데이터 MDN:
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

<meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN

HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

developer.mozilla.org

 

 

📑 메타태그 사용법 (크롤러가 정보 찾기 좋게 만드는 방법 )

 

  • 메타데이터는 UI상으로 보여지지 않는 정보들이지만, 웹 사이트에 대한 설명이라서 잘 작성해야 한다.

 
 

🖥️ [인코딩]

 

📁 meta charset="UTF-8"

 

  • 문자열 셋 UTF-8 인코딩
  • 다양한 언어 깨짐 없이 지원

 

🖥️ [IE 브라우저]

 

📁 <meta http-equiv="X-UA-compatible" content="IE=edge" />

<meta http-equiv="X-UA-compatible" content="IE=edge" />

 

  • IE 브라우저를 위한 설정
  • Edge 렌더링 엔진 사용

 

👆🏻 [반응형]

 

📁 meta name="viewport"

 

  • 반응형 웹 구현을 위한 메타 태그
  • viewport- 화면에 보이는 영역
  • 스크롤해서 봐야 하는 영역을 제외한, 보이는 그대로의 크기 영역

 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

  • 너비는 보고 있는 기기의 너비
  • 초기 화면 배율을 1로 지정한다는 의미

 

 
👉🏻 자동 작성되는 부분이다.

 

 

 

🌐[검색포털을 위한 태그]

 

 

📁 title

 



📁 meta name="description" 

 

  • 웹 페이지에 대한 설명 (제목 아래의 내용 요약)
  • 검색엔진에 영향 x
  • 클릭률이 더 중요



📁 meta name="author"

 

  • 웹 페이지의 소유자(또는 회사)

 

 

✅ 파비콘 

 

  • 이미지 폴더에 파비콘 이미지인 ico 파일 넣는다.
  • link:favicon 태그 사용하면 기본적인 골격이 만들어진다.
  • 이미지 경로를 넣는다.

 

📁 meta name="keywords"

 

  • 검색엔진을 위한 키워드(해시태그처럼 작성)
  • 중요한 키워드일수록 앞 쪽에 배치하는 것을 지향



📁 meta name="robots"

 

  • 검색 엔진 크롤러의 허용과 불허를 제어
  • robots.txt 파일로 제어하는 것이 일반적
  • content="ALL"은 모든 검색엔진 로봇의 방문을 허용한다는 뜻
  • content="(no) index, (no) follow"

 

 

🖼️ [OpenGraph]

 

 

  • 웹페이지가 SNS나 사이트에 공유될 때 사용되는 정보
  • 카카오톡에 링크를 공유할 때 제목, 설명, 이미지 미리보기

 

📁 meta name="og:title"

 

  • 페이지 제목

 

📁 meta name="og:type"

 

  • 사이트 타입



📁 meta name="og:description"

 

  • 페이지 설명



📁 meta name="og:image"

 

  • 페이지 썸네일 이미지 주소
  • 배포 후 생성된 이미지 URL을 넣는다.
  • 권장 이미지 크기 1200 x 630 픽셀
  • 8 MB 초과되지 않도록 하는 것이 좋다.
  • 이미지 리사이즈, 크롭 해서 이미지 사용
  • PNG to WEBP 변환



📁 meta name="og:url"

 

  • 배포 후 생성된 페이지 URL





📺 카카오톡 대화창에 링크 공유하면 페이지에 대한 미리 보기가 나온다

 

<!-- 작성한 코드 -->

    <!-- SEO -->
    <title>Jieun&#39;s Portfolio</title>
    <meta 
    	name= "description"
    	content="portfolio for developer Jieun" 
    />
    <meta name="author" content="Jieun" />
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    
    <!-- OG (Open Graph Data) -->
    <meta property="og:title" content="Jieun&#39;s portfolio" />
    <meta property="og:type" content="website" />
    <meta 
        property="og:url" 
        content= "https://daramjieun.github.io/portfolio2/" 
    /> 
    <meta 
        property="og:image" 
        content="https://daramjieun.github.io/portfolio2/images/og.webp"
    />



 

3. 검색엔진

 

 

🔎 [검색엔진 용어]

 

 

index(색인)

 

  • 구글에서는 모든 웹페이지를 색인이라는 곳에 저장한다. (백과사전)

 

크롤링

 

  • 특정 웹 사이트에서 데이터를 추출해 내는 것, 크롤링을 하여 새 페이지를 찾으면 색인에 저장된다.
  • 사이트는 링크를 따라가거나, 사이트맵을 읽거나, 다른 여러 방법으로 URL을 찾아낸다.

 

 

크롤러

 

  • 크롤링을 하는 소프트웨어. 웹에서 페이지를 크롤링을 한 후에 색인을 생성하는 자동 소프트웨어

 

구글봇

  • 크롤러의 종류
  • 구글의 크롤러 '구글봇'

 

 

👷🏻‍♀️ [검색엔진 원리]

 

검색 엔진은 정보를 수집하는 크롤러가 존재한다. 크롤러는 여러 사이트를 돌아다니면서 각 사이트에서 얻은 정보들을 모아서 검색 엔진에 다시 돌려주게 된다. 각 사이트들은 크롤러를 부르는 별명도 있다. 그런데 크롤러가 무작위로 모든 사이트의 정보를 수집하게 되다면 숨기고 싶은 정보까지 공개될 것이다.

이러한 현상을 방지하기 위해서 검색 엔진은 특정한 약속이 생겼다. 그것은 바로 robots.txt 파일이다. 크롤러는 웹 사이트를 방문할 때 가장 먼저 robots.txt 파일을 열게 된다. 파일에 '로봇을 허용한다'라고 되어 있으면 크롤러가 접근하여 정보들을 가져오고, robots.txt에서 '크롤러를 거부한다!!!'라고 되어 있으면 이 사이트에 접근하지 못한다. sitemap.xml 파일도 있는데 웹사이트 내의 모든 페이지들을 나열한 파일이다. 우리 사이트를 더 정확하고 효율적으로 탐색할 수 있게 만들어 준다. robots.txt & sitemap.xml은 우리 사이트를 더 잘 찾을 수 있게 만들어 준다.
 

 

🌐 [검색엔진 알고리즘]

 

검색엔진이 선호하는 글을 쓰기 위해서는 구글, 네이버, 다음 등의 검색엔진이 어떤 원리로 동작하는지 알아야 한다.

먼저 네이버의 경우는 다른 검색엔진과 달리 네이버 블로그, 카페, 지식인 등 특수적인 카테고리가 많기 때문에 노출이 쉽지 않다. 즉 네이버는 하나의 SNS와 비슷하다.

하지만 구글의 경우 오직 검색에 집중을 하는 검색엔진이기 때문에 네이버처럼 복잡하지 않다. 더불어 전 세계 구글의 점유율은 무려 92%나 차지하고 있다.

 
 

저작자표시 비영리 변경금지 (새창열림)

'공부 모음집 > WEB' 카테고리의 다른 글

url 입력과정  (0) 2023.10.17
웹 서버와 호스팅 그리고 클라우드 호스팅/ FTP 프로그램  (1) 2023.10.13
브라우저 렌더링 과정  (0) 2023.08.20
크로스 브라우징이란? (웹 호환성🚥)  (0) 2023.08.14
웹 표준과 웹 접근성 (누구나, 어떤 환경에서나⭐)  (0) 2022.11.29

'공부 모음집/WEB'의 다른글

  • 현재글검색엔진 최적화(SEO)와 OG 작업

관련글

댓글

티스토리툴바