커뮤니티 위키 & 포럼
프론트엔드 개발
2024년 1월
활성 기여자 42명
Search engine optimization tips and tricks for developers
Essential meta tags for SEO, social sharing, and search engine visibility.
<!-- Essential SEO meta tags -->
<head>
<title>Page Title | Site Name</title>
<meta name="description" content="Page description, 150-160 characters" />
<meta name="keywords" content="keyword1, keyword2, keyword3" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/" />
<meta property="twitter:title" content="Page Title" />
<meta property="twitter:description" content="Page description" />
<meta property="twitter:image" content="https://example.com/image.jpg" />
</head>Use JSON-LD structured data to help search engines understand your content better.
<!-- Article structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"description": "Article description",
"image": "https://example.com/image.jpg",
"author": {
"@type": "Person",
"name": "Author Name"
},
"publisher": {
"@type": "Organization",
"name": "Publisher Name",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2024-01-15",
"dateModified": "2024-01-20"
}
</script>Implement SEO best practices in Next.js with metadata API and sitemap generation.
// app/layout.tsx - Root metadata
export const metadata = {
title: {
default: 'Site Name',
template: '%s | Site Name',
},
description: 'Site description',
openGraph: {
title: 'Site Name',
description: 'Site description',
url: 'https://example.com',
siteName: 'Site Name',
images: ['/og-image.jpg'],
type: 'website',
},
};
// app/blog/[slug]/page.tsx - Dynamic metadata
// export async function generateMetadata({ params }) {
// const post = await getPost(params.slug);
// return {
// title: post.title,
// description: post.excerpt,
// openGraph: {
// images: [post.image],
// },
// };
// }아직 댓글이 없습니다. 첫 번째 토론을 시작해 보세요!