반응형
metatags.io
https://metatags.io/는 웹사이트에 사용할 메타 태그(meta tags)를 생성하고, 실시간 미리보기(preview)를 제공하는 무료 온라인 도구입니다. 특히 SEO(검색 엔진 최적화) 및 SNS 공유 미리보기를 최적화할 때 매우 유용합니다.
주요 기능
| 기능 | 설명 |
| Meta 태그 생성기 | 제목(title), 설명(description), 이미지(image) 등을 입력하면 자동으로 <meta> 태그 코드 생성 |
| 미리보기(Preview) | 입력한 메타 정보를 기반으로 Google, Facebook, Twitter에서 어떻게 보일지 시각적으로 보여줌 |
| 코드 복사 기능 | 생성된 메타 태그를 한 번에 복사할 수 있는 버튼 제공 |
| Open Graph + Twitter Cards | SNS 공유 최적화를 위한 태그 포함 |
| URL 미리보기 | 실제 웹사이트 주소를 넣으면 해당 사이트의 메타 태그 정보를 불러와 보여줌 |
미리보기 예시
- Google 검색 결과 스타일
- Facebook 공유 카드 스타일 (Open Graph 기반)
- Twitter 공유 카드 스타일 (Twitter Card 기반)
사용 예시
- 사이트 이름, 설명, 이미지 URL 등 입력
- 미리보기를 확인
- <head>에 넣을 <meta> 태그 HTML 자동 생성됨
- 복사해서 React Helmet, Next.js, 일반 HTML 등에 적용
개발자/디자이너에게 유용한 이유
- 빠르게 SNS 공유용 메타 태그 만들기
- 브랜딩 시 이미지와 제목이 잘 나오는지 테스트
- 클라이언트에게 메타 태그가 어떻게 보일지 설명할 때 유용
metatags.io에서 생성된 <meta> 태그 코드를
React 프로젝트에서 사용할 수 있도록 React Helmet 형태로 변환한 예제
1. metatags.io에서 생성된 HTML 예시
<!-- 일반 HTML 형태 -->
<title>My Awesome Site</title>
<meta name="title" content="My Awesome Site">
<meta name="description" content="This is an awesome website built with React.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://myawesomesite.com/">
<meta property="og:title" content="My Awesome Site">
<meta property="og:description" content="This is an awesome website built with React.">
<meta property="og:image" content="https://myawesomesite.com/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://myawesomesite.com/">
<meta property="twitter:title" content="My Awesome Site">
<meta property="twitter:description" content="This is an awesome website built with React.">
<meta property="twitter:image" content="https://myawesomesite.com/image.png">2. React Helmet 형태로 변환된 코드
import { Helmet } from 'react-helmet';
function MyHelmet() {
return (
<Helmet>
<title>My Awesome Site</title>
<meta name="title" content="My Awesome Site" />
<meta name="description" content="This is an awesome website built with React." />
{/* Open Graph / Facebook */}
<meta property="og:type" content="website" />
<meta property="og:url" content="https://myawesomesite.com/" />
<meta property="og:title" content="My Awesome Site" />
<meta property="og:description" content="This is an awesome website built with React." />
<meta property="og:image" content="https://myawesomesite.com/image.png" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://myawesomesite.com/" />
<meta name="twitter:title" content="My Awesome Site" />
<meta name="twitter:description" content="This is an awesome website built with React." />
<meta name="twitter:image" content="https://myawesomesite.com/image.png" />
</Helmet>
);
}
export default MyHelmet;사용 방법
이 컴포넌트를 App.jsx 또는 각 페이지 컴포넌트에 포함하세요:
import MyHelmet from './MyHelmet';
function HomePage() {
return (
<>
<MyHelmet />
<main>홈페이지 콘텐츠</main>
</>
);
}'프론트엔드' 카테고리의 다른 글
| robots.txt 자동 생성 (0) | 2025.05.03 |
|---|---|
| xml-sitemaps.com (1) | 2025.05.03 |
| js-cookie (1) | 2025.05.03 |
| 보안 개인정보 보호 noreferrer, noopener (1) | 2025.05.02 |
| AWS 배포 (1) | 2025.04.26 |