[TIL] 2022-11-04

H Kim·2022년 11월 4일
0

TIL

목록 보기
27/72
post-thumbnail

<meta>


SEO(검색엔진최적화)를 위해 메타 데이터 관련한 태그들을 잘 셋팅해야 한다.
구글이나 네이버 등에서 검색했을 때 사이트 이름 밑에 뜨는 문장들이 description안에 들어가 있는 문장들이 뜨는 것이다.


<meta name="description" content="">
<meta name="keywords" content="">

  • description : 웹 페이지를 요약한 내용을 적고 작성 길이의 기준은 "구글은 160자 미만, 네이버는 80자 미만"이다. 검색엔진은 이 요약문 메타 태그를 검색 결과 순위를 평가하는 항목으로서는 거의 무시하기 때문에 요약문에 노출을 목표로한 검색 키워드를 여러번 반복해서 넣어 순위를 올려보려는 노력은 애초에 하지 않는 것이 좋다. 그렇게하더라도 순위가 올라가지 않는다. 대신 검색자가 웹페이지를 인식하게 되는 가장 첫번째 관문이기 때문에 클릭율(Click Through Rate)에 영향을 미친다는 것을 항상 염두해 두어야 한다. 이를 위해 160자까지 넣을 수 있다 하더라도 트래픽 유입을 기대하는 키워드는 최초 50자 이전에 넣어주는 것이 좋다.
  • keyword : 더 이상 검색엔진최적화에서는 의미가 없는 메타 태그이다. 한 때 중요한 역할을 하기도 했지만 구글을 비롯해서 마이크로 소프트의 빙 그리고 야후의 경우도 키워드 메타 태그는 더 이상 사용하지 않는다. 이는 웹 페이지의 콘텐츠를 대표하는 키워드를 3개에서 10개 정도를 정의하는 것이 일반적인 기준임에도 많은 웹 사이트들이 실제 콘텐츠보다는 트래픽 유입을 만들고 싶은 타겟 키워드를 무리하게 많이 넣어 두는 경우가 많아 검색 결과에 혼란을 주었기 때문에 대부분의 검색엔진들을 이에 중요도를 주지 않기로 결정했다. 아주 작은 검색엔진들만이 여전히 키워드 메타를 참고하기는 하지만 각 페이지에 이를 정의하기 위해 들이는 노력에 비해 지나치게 작은 영향력을 가지고 있다는 점에서 키워드 메타 태그의 정의를 생략할 수 있다.

Open Graph 태그


SNS와 메신저를 통해 웹페이지의 링크를 공유하는 일이 잦아지면서 메타 태그가 넓은 분야에서 활용되고 있다. 대표적인 사례로 페이스북이나 카카오톡, 슬랙(Slack)과 같은 앱에서 웹페이지의 링크만 입력하더라도 해당 웹페이지의 콘텐츠의 미리보기를 카드 형태로 나타나는 것이다. 일반적으로 이러한 서비스들은 Open Graph 프로토콜이라고 불리는 업계 표준을 따라서 웹페이지 콘텐츠 미리보기를 지원하고 있다. 따라서 Open Graph 프로토콜에서 정의하고 있는 메타 태그를 적절히 사용하면 콘텐츠 미리보기에 원하는 내용을 표시되도록 어느정도 제어를 할 수 있다.

// 웹사이트 이름
<meta property="og:site_name" content=""/>

// 웹페이지 제목
<meta property="og:title" content=""/>

// 웹페이지 상세 설명
<meta property="og:description" content=""/>
  
// 웹페이지 유형
<meta property="og:type" content=""/>

// 웹페이지 주소
<meta property="og:url" content=""/>

// 웹페이지 썸네일(thumbnail) 권장크기 1200 x 630
<meta property="og:image" content=""/>

Meta Tag OG type 설정 관련 상세


Function 과 arrow function의 차이는 무엇인가?


  • this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
  • 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
  • 생성자(Constructor)로 사용할 수 없다.

화살표 함수가 나오기 전까지는, 모든 새로운 함수는, 어떻게 그 함수가 호출되는지에 따라 자신의 this 값을 정의했다,

  • 함수가 생성자인 경우는 새로운 객체
  • 엄격 모드 함수 호출에서는 undefined
  • 함수가 "객체 메서드"로서 호출된 경우 문맥 객체

이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않다.

화살표 함수는 자신의 this가 없습다. 대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용된다. 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따르기에 현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 된다.


화살표함수


함수와 화살표 함수가 완전히 같지 않음을 인지하고는 있을 것!

0개의 댓글