Search engine optimization (SEO) is a set of techniques that help websites and blog posts rank higher in search results.
When search engines accurately understand your site's content and recognize its value for a user's query, you can expect increased traffic and visibility.

This post walks through basic SEO concepts, meta tag configuration, and examples of applying SEO in Next.js, step by step.

1. SEO Basics

1.1 What Is SEO?

• Search Engine Optimization: improving a website to rank higher when users search for particular keywords
• Goals: more site visitors, greater brand awareness, and better conversion rates

1.2 How Search Engines Work

1. Crawling: search engine bots automatically visit web pages and collect their content
2. Indexing: store and organize the collected information in the search engine's database
3. Ranking: when a user searches for a keyword, display the most relevant, highest-quality pages in ranked order

Search engines evaluate site structure, content quality, backlinks, and other factors together.

2. On-page SEO vs Off-page SEO

2.1 On-page SEO

• Optimize elements within the site
• Includes keyword placement, meta tags, page structure, content quality, URL structure, and more
• For example, use appropriate titles (H1), subheadings (H2), keywords in the body, and meta descriptions when writing blog posts

2.2 Off-page SEO

• Optimize factors outside the site
• Examples include the quality and quantity of **backlinks** from other websites and social media activity
• Methods for improving the site's reputation and authority

This post focuses mainly on On-page SEO, covering methods that are easy to apply within your site.

3. Configuring Meta Tags

Meta tags provide important information to both search engines and users.
They are generally placed inside <head>. The main meta tags are described below.

3.1 Essential Meta Tags

The Title Tag

• Displayed in the browser tab and as the title in search results
• Optimal length: around 50–60 characters in English

<title>내 웹사이트의 대표 타이틀</title>

Meta Description

• Displayed as the short description beneath the title in search results
• Optimal length: around 150–160 characters in English

<meta name="description" content="이 웹사이트 혹은 페이지에 대한 짧은 요약"/>

3.2 Open Graph Tags

These meta tags control the title, description, and image shown when sharing on social media.
They are essential for correctly displaying preview cards on Facebook, KakaoTalk, Twitter, and similar platforms.

<meta property="og:title" content="페이지 제목"/>
<meta property="og:description" content="페이지 설명"/>
<meta property="og:image" content="이미지 URL"/>
<meta property="og:url" content="페이지 URL"/>

3.3 Twitter Card

Controls the card format displayed when sharing on Twitter.

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="페이지 제목"/>
<meta name="twitter:description" content="페이지 설명"/>
<meta name="twitter:image" content="이미지 URL"/>

4. Optimizing Site Structure

4.1 URL Structure

• Keep URLs short and easy to understand
• Include relevant keywords, for example /blog/seo-basics or /shop/red-shoes
• Between words, a _ (underscore) is less commonly used than a - (hyphen)

4.2 Heading Tags

• Use H1 only once per page to express the main topic
• Use H2, H3, and other subheadings in a logical hierarchy

<h1>SEO 적용 가이드</h1>
<h2>메타 태그란?</h2>
<h2>검색 엔진의 크롤링</h2>

4.3 Image Alt Text

• Provides alternative text when images cannot load or are read by a screen reader
• Also gives search engines additional information about the image for SEO

<img src="/images/seo.png" alt="SEO를 설명하는 다이어그램" />

5. Applying SEO in Next.js

Next.js provides a search-engine-friendly environment through server-side rendering (SSR) by default.
You can also easily configure page-specific meta tags with next/head or Next.js App Router (13+) features.

5.1 A Basic next/head Example

import Head from 'next/head';
 
export default function Home() {
  return (
    <>
      <Head>
        <title>나의 홈 페이지</title>
        <meta name="description" content="홈페이지에 대한 소개입니다." />
        <meta property="og:title" content="나의 홈 페이지" />
        <meta property="og:description" content="오픈 그래프 설명입니다." />
        <meta property="og:image" content="/images/home-og.jpg" />
        <meta property="og:url" content="https://myhomepage.com" />
      </Head>
      <main>
        <h1>홈</h1>
        <p>이곳은 메인 페이지입니다.</p>
      </main>
    </>
  );
}

• Insert the necessary meta tags inside <Head>, and they are merged into the page's <head> at build time
• Titles and descriptions can change dynamically, providing unique metadata for each page

5.2 Meta Tags in App Router (Version 13 and Later)

With App Router in Next.js 13+, use metadata or generateMetadata to configure them.

export const metadata = {
  title: '홈 페이지',
  description: '홈페이지에 대한 소개입니다.',
  openGraph: {
    title: '홈 페이지',
    description: '오픈 그래프 설명입니다.',
    url: 'https://myhomepage.com',
    images: ['/images/home-og.jpg'],
  },
};
 
export default function Home() {
  return (
    <main>
      <h1>홈</h1>
      <p>이곳은 메인 페이지입니다.</p>
    </main>
  );
}

• The metadata object makes SEO configuration straightforward
• At build time, Next.js uses this information to generate page meta tags automatically

6. Performance Optimization

A site's page-loading speed is also important for improving SEO scores.
Google may rank slow-loading pages lower, so consider the following optimizations.

1. Image optimization: use Next.js's Image component and modern formats such as WebP
2. Code splitting: minimize unnecessary scripts to improve initial loading speed
3. Caching: fetch and cache data at build time or on the server using getStaticProps / getServerSideProps and similar methods

7. Checking Your Site's Search Visibility

7.1 Register with Search Console

To check that your site appears correctly in Google search, it is a good idea to register it with Google Search Console.

1. Open Google Search Console
2. Verify site ownership through an HTML file upload, DNS TXT record, or another method
3. Submit a sitemap and monitor indexing status

7.2 Create a Sitemap

Generate an XML sitemap to explain the site structure to search engine bots.
In Next.js, you can use the next-sitemap library.

npm install next-sitemap

module.exports = {
  siteUrl: 'https://myhomepage.com',
  generateRobotsTxt: true, // robots.txt 생성
  sitemapSize: 7000,
};

• Automatically generate sitemap.xml and robots.txt at build time
• Submit the sitemap URL, such as https://myhomepage.com/sitemap.xml, to Google Search Console

8. Cautions and Tips

1. Keyword Stuffing
   • Use keywords naturally; excessive repetition of the same keyword can backfire
2. Duplicate Content
   • Identical or similar content on multiple pages may incur search-engine penalties
   • If needed, identify the original page with a canonical tag
3. Mobile Optimization
   • As mobile usage grows, use responsive web design or a mobile-specific layout
   • Google prioritizes mobile-friendly sites in rankings, so be sure to test on mobile

9. Conclusion

SEO is not something configured once and forgotten; it requires ongoing management and monitoring.

• Improve site structure: maintain meta tags, URL structure, heading tags, and more
• Improve content quality: create useful content worth surfacing in search engines
• Optimize performance: maintain fast page loads
• Analyze results: review performance and refine strategy with Search Console, Google Analytics, and similar tools

Following these steps helps you operate a site optimized for search engines,
bringing more visitors and a better user experience.

SEO requires technical elements—meta tags, HTML structure, and speed optimization—to work together with content marketing, including keywords, publishing frequency, and quality.
Keep monitoring trends and algorithm changes as you pursue your site's traffic and conversion goals.