오픈 그래프 태그, 메타 정보, 파비콘, SEO

오픈 그래프 태그

• 미리 보기 화면을 구성할 수 있도록 해주는 Meta태그
• 웹페이지가 sns에 공유될 때 우선적으로 활용되는 정보를 지정
• 링크 미리보기 정보

---

트위터 카드

• 트위터에 있는 기능
• 140자 텍스트만 표현할 수 있는 트위터의 제약을 풀어주는(?) 기능
• 추가적인 이미지/내용을 미리보기처럼 보여줄 수 있다
• 웹페이지가 트위터로 공유될 때 우선적으로 활용되는 정보를 메타태그에 설정해두는 것

---

메타 정보

• 기존의 데이터를 구조화한 데이터
• 다른 데이터를 설명해 주는 녀석
• 이녀석을 이용하면 검색엔진을 활용해서 특정 데이터를 쉽게 찾아낼 수 있음

---

파비콘, Favicon

• 웹페이지를 나타내는 아이콘, 웹페이지의 로고를 의미

• 기본적으로 root경로에 favicon.ico 파일을 두면 브라우저가 자동으로 로딩함

• 브라우저가 자동으로 읽으면 추가로 <link> 넣을 필요없음

• 추가적인 이미지(favicon.png)같은 것을 사용하려면 <link>를 사용해야 함

• 단, 파비콘 이미지는 root경로에 둘 것

    <!-- favicon.ico 64 x 64(px)
         또는 32 x 32나 16 x 16 -->
    <link rel="shortcut icon" href="favicon.ico">
  
    <!-- favicon.png 500 x 500(px) -->
    <link rel="icon" href="./favicon.png">
    // 

  
  

  ---

SEO검색엔진 최적화

• 구글, 네이버 등에 자신의 웹 사이트를 노출할 수 있도록 정보를 최적화하는 작업
• 검색 엔진으로부터 웹사이트/페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 것
• 웹 페이지의 검색엔진이 자료를 수집, 순위를 매기고 보여주게 되는 방식에 맞춰 웹 페이지를 검색 결과의 최상단에 나올 수 있게 하는것
• 결국 마케팅을 위한 것

---

참고

오픈그래프 작성법
오픈그래프
SEO