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

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

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

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

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

마땅치가 않네요.

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

1. Meta tags

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

이렇게 생겼습니다:

몰?루

URL:

https://metatags.io/

Meta Tags — Preview, Edit and Generate

2. Meta Preview

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

이렇게 생겼습니다:

사랑해요 카카오

URL:

https://metapreview.app/

Meta Preview

3. Linkedin Post inspector

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

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

Post Inspector

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

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

이렇게 생겼습니다:

URL:

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

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