brunch

You can make anything
by writing

C.S.Lewis

by 개미 Mar 28. 2023

웹 페이지의 메타태그(Meta tags) 관리하기

SEO와 더 쉬운 공유를 위하여!

React Prerendering을 알아보고 있는 도중에

Meta tags에 대해서 공부하게 되었습니다.


모든 페이지에 대해서 미리 HTML을 생성할 방법을 찾고 있는데

마땅치가 않네요.


그것과 별개로 메타태그를 생성하고, 미리 볼 수 있는 사이트를 공유합니다.



1. Meta tags

사진을 넣으면 어떻게 미리보기가 되는지 알 수 있습니다.


이렇게 생겼습니다:

몰?루


URL:

https://metatags.io/


2. Meta Preview

유명한 SNS별로 어떻게 미리보기가 되는 지를 확인할 수 있습니다.


이렇게 생겼습니다:

사랑해요 카카오

URL:

https://metapreview.app/



3. Linkedin Post inspector

링크드인에서 어떻게 보일지를 미리 알 수 있습니다.


https://www.linkedin.com/post-inspector/



4. 카카오톡 Open graph 이미지 미리보기

홈페이지를 업데이트 했을 때 카카오톡 크롤링 서버에 캐싱되어 있는 것을 바로 삭제할 수 있습니다.


이렇게 생겼습니다:


URL:

https://developers.kakao.com/tool/debugger/sharing




열심히 서비스를 만들어서 부자됩시다!

매거진의 이전글 React 공부 순서와 샘플 프로젝트 추천
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari