22.07.14 회고(Next SEO)

Facts(사실/ 객관)

[일상]

1. 부족한 점도 있었지만 좋은 습관을 들이려 노력했다.
   - 유튜브 및 기사 40분만 보기 잘이행함
   - 영상 최대 30분보기 잘 했으나 저녁먹으녀 나는 솔로 넋놓고 보다 한 20분 초과한거 같다... 
   
   
2. 운동
   - 하체운동을 했다.
   - 유산소 4바퀴 띄었다. 
   
   
3. 알뜰폰 개통 신청을 했다. 
   
   
4. 시간을 허비하지 않게 분주히 움직였다. 

 

[업무/ 공부]

1. [업무] 이미 구독중일 때 구독프로세스 진입 시 리다이렉트 

2. [업무/ 공부] next seo 처리 관련 검색 및 적용

---

Feelings(느낌,주관)

1. 좋은 습관(유튜브 및 영상 시청 시간 제한) 과 투두메이트를 활용한 해야될 일을 계획하는 것이 시너지를 발휘해 하루를 더 알차게 보내게 만들어 주는 것 같다. 더불어 이렇게 회고를 쓰면서 하루를 되돌아보고 내가 배운 것을 다시 상기하고 소화도 시켜보는 시간들이 하루를 돌아봤을 때 꽤 잘살았구나 라는 보람을 느끼게 해준다. 
2. 점심시간에 PT를 가 오랜만에 하체 운동을 했는데 죽을뻔했다. 너무 힘들었지만 강해지고 있음을 느낀다. 그리고 체력을 기르고 살빼기 위해 오늘도 러닝을 했다. 뿌듯하다. 
3. 알뜰폰 개통신청을 했다. 바꾸기 전 요금제도 알뜰폰 쓰기 전에 비하면 훨씬 저렴한 요금제라 별 불만이 없었는데 큰누나가 그렇게 비싸게 주고 하냐고 바꾸라고 하여 알아보게 됐다. 그래서 이전에 쓰던거에 거의 반값만 내게 됐다. (옆자리 개발팀원한테 물어보니 그분은 알뜰폰 연계 신용카드를 사용하여 한달에 2천워낸다고 한다...) 
4. 투투메이트를 의식하며 하나라도 더 달성하려 노력했다. 뿌듯뿌듯 

---

Findings(배운점)

1.메타 태그에 대해 배웠다.

메타 태그란 웹사이트의 컨텐츠가 아닌 웹 사이트 자체의 정보를 명시하기 위해 쓰는 html 태그이다.

유저가 보는 웹페이지 컨텐츠에는 영향을 주지 않지만 검색엔진과 같은 기계들이 웹페이지를 읽을 때 해당 서비스에서 어떻게 표출될지 결정하는 핵심적 역할을 한다.
  

2. Open Graph 태그를 알게됐다. 

SNS나 메신저에 웹페이지의 링크를 공유하는 일이 잦아지며 메타 태그의 활용도가 더 넓어졌다. 
이 Open Graph 태그를 통해 슬랙 카톡 페이스북 등 링크만 입력하면 해당 컨텐츠의 미리보기 카드 형태를 제공해준다. 

//detail/[productId]

export const getServerSideProps = wrapper.getServerSideProps(store => async context => {
  const response = await store.dispatch(getProduct(context.query.productId));
  const { name, subtext, thumbnail } = response.payload.result;

  const metaTags = {
    'og:title': name,
    'og:description': subtext,
    'og:url': thumbnail,
  };

  return {
    props: {
      metaTags,
    },
  };
});

//_app.tsx
{pageProps.metaTags &&
Object.entries(pageProps.metaTags).map(entry => <meta property={entry[0]} content={entry[1]} />)}

 

마켓 상세페이지에서 getSeverSideProps를 통해 프로덕트 정보를 SSR로 가져오고 그정보를 metaTag 객체로 만들어 app 컴포넌트에 props로 내려준다. app컴포넌트는 받은 metaTag 객체를 활용해 map 함수를 돌려 meta태그 정보를 만들어 준다. 

 

이전 미리보기 

변경 후 미리보기