SEO part.1

Doyeon Kim·2021년 8월 9일
0

SEO적용

목록 보기
1/1
  1. meta data?

    1. 태그 내에 html문서에 대한 정보를 제공할 수 있다
    2. 메타태그는 html문서의 요소 내부에 속한다,
      1. HTML문서를 렌더링하는 방법에 대한 브라우저 정보
      2. 정보를 해석하고 표시하는 방법에 대한 검색 엔진 지침
      3. 링크가 공유될 때 귀하의 정보를 표시하는 방법을 소셜 미디어 플랫폼에 설명
    3. 메타데이터는 페이지에 표시되지 않는다
    4. 브라우저와 검색엔진 크롤러에 의해 구문이 분석된다
    5. 해당 페이지에서 웹페이지를 검사학 사용할 수 있는 모든 헤더에 있는 메타태그를 확인할 수 있다.
    6. 메타태그 내부 데이터는 숨겨져있지 않고, 확인 가능하다
  2. open graph? (og)

    1. og는 페이스북에서 만든 프로토콜이자, 소셜 미디어 플랫폼에서 공유되는 링크의 정보를 전달하는 목적으로 만들어진 구조이다.?
    2. 작성자가 링크를 공유 시, 미리보기에 표시할 컨텐츠를 결정할 수 있다
      1. og:title
      2. og:description
      3. og:url
      4. og:image
    3. 트위터에는 메타 데이터를 설정하기 위한 자체 태그가 존재한다
      1. twitter:card
      2. twitter:creator
      3. twitter:description
  3. Nuxt.js 에서 메타데이터를 설정하는 방법
    1. Nuxt.js에서 nuxt.config 에서 default값으로 header 값을 설정 가능하다.
    2. 각 페이지에서 head 에 대한 메타 데이터를 리턴하는 방법으로도 설정 가능하다.
    3. 메인페이지 기본설정과 달리, 추가적으로 노출하고 싶은 데이터를 동적으로 표현하는 방법은 hid를 고유식별자로 사용하면, 하위구성요소에서 사용될때, 메타태그가 중복되는 것을 방지할 수 있다.(https://nuxtjs.org/docs/2.x/components-glossary/pages-head)

    //nuxt.config.js
    		module.exports = {
    			head:{
    				meta:[
    					{property:'og:url', content:'https://www.example.com'},
    					{property:'og:description', content:'decripton 내용'},
    					{property:'og:type', content:'webpage'},
    					{property:'og:image', content:'imageURL'},
    				]	
    			}
    		}
    
    
    //default
    		export default {
    			head(){
    				meta:[
    					{property:'og:url', content:'https://www.example.com'},
    					{property:'og:description', content:'decripton 내용'},
    					{property:'og:type', content:'webpage'},
    				{property:'og:image', content:'imageURL'},
    				]
    			}
    		}
    
    //하위 컴포넌트에서 변경된 메타데이터를 적용시키고자 할때
    		export default {
    			head(){
    				meta:[
    					{hid:'og:url', name:'og:url' content:'https://www.example.com'},
    					{hid:'og:description', hid:'og:description', name:'og:url'  content:'decripton 내용'},
    					{hid:'og:type', name:'og:type'  content:'webpage'},
    				{hid:'og:image', name:'og:image' content:'imageURL'},
    				]
    			}
    		}
    
    

Reference

profile
should go on and on

0개의 댓글