블로그를 하면서 이왕이면 수익이 나는게 좋지 않을까 하며 여기저기 돌아다녀 보니
메타태그라는 말이 자주 등장을 하더군요. 그래서 메타태그가 무엇인지 공부를 해봅니다.
메타태그(meta tag)는 웹 페이지의 HTML 코드 안에서 사용되는 태그로, 주로 페이지의 정보를 검색 엔진이나 브라우저, 또는 기타 서비스에 전달하는 데 사용됩니다. 메타태그는 사용자가 직접 볼 수 있는 콘텐츠에는 나타나지 않으며, <head> 태그 안에 위치합니다.
메타태그는 다양한 정보를 전달할 수 있으며, 그중 일부는 다음과 같습니다:
1. SEO(검색 엔진 최적화) 관련
검색 엔진이 웹 페이지를 이해하고 색인을 생성하는 데 도움을 줍니다.
예시:
<meta name="description" content="이 웹페이지는 메타태그에 대한 정보를 제공합니다.">
주요 메타태그:
description: 페이지의 간단한 요약을 제공.
keywords: 페이지와 관련된 키워드(요즘은 중요도가 낮음).
robots: 검색 엔진 크롤러의 행동을 제어.
예시
<meta name="robots" content="index, follow">
2. 브라우저 관련
브라우저가 페이지를 표시하는 방식을 제어합니다.
예시:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport: 모바일 장치에서 페이지의 스케일과 크기 설정.
charset: 문자 인코딩 설정.
<meta charset="UTF-8">
3. 소셜 미디어 관련
소셜 미디어에서 공유될 때의 미리 보기 정보를 설정합니다.
예시:
<meta property="og:title" content="메타태그란?">
<meta property="og:description" content="메타태그의 정의와 종류를 알아보세요.">
<meta property="og:image" content="image.jpg">
주요 메타태그:
Open Graph (og:): Facebook, LinkedIn 등에서 사용.
Twitter Cards: Twitter에서 사용.
4. 기타
다양한 서비스나 애플리케이션과의 통합을 위해 사용됩니다.
예시:
html
<meta name="author" content="홍길동">
<meta name="generator" content="WordPress">
요약 메타태그는 웹 페이지의 정보를 다양한 목적(SEO, 사용자 경험, 소셜 미디어 공유 등)에 맞게 제공하고 조정하는 중요한 HTML 요소입니다. 직접적으로 보이지 않지만, 웹사이트의 가시성과 사용성에 큰 영향을 미칩니다.
윤동주의 서시 관련해서 html 페이지를 만들어 봅니다.
아래는 윤동주의 **"서시"**와 관련된 홈페이지의 간단한 html 코드입니다.
이 페이지는 메타태그를 활용하여 SEO와 소셜 미디어 최적화한 기본적인 구조를 갖추고 있습니다.
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="윤동주의 서시 - 삶과 죽음, 그리고 희망에 대한 서정적 아름다움을 담은 시."> <meta name="keywords" content="윤동주, 서시, 시, 한국문학, 윤동주 시집, 서정시"> <meta name="author" content="윤동주"> <!-- Open Graph for Social Media --> <meta property="og:title" content="윤동주의 서시"> <meta property="og:description" content="삶과 죽음, 그리고 희망에 대한 윤동주의 대표 시 서시."> <meta property="og:image" content="https://example.com/images/seosi-thumbnail.jpg"> <meta property="og:url" content="https://example.com/seosi"> <meta property="og:type" content="website"> <!-- Twitter Cards --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="윤동주의 서시"> <meta name="twitter:description" content="윤동주의 삶과 죽음을 담은 서정시, 서시."> <meta name="twitter:image" content="https://example.com/images/seosi-thumbnail.jpg"> <title>윤동주의 서시</title> </head> <body> <header> <h1>윤동주의 서시</h1> <p>삶과 죽음, 그리고 희망에 대한 서정적 시</p> </header> <main> <section> <h2>시 소개</h2> <p> 윤동주의 <strong>"서시"</strong>는 그의 시집에서 가장 대표적인 작품으로, 인간의 내면과 삶의 고통, 희망을 담은 서정적인 시입니다. 이 시는 한국 문학사의 중요한 자리를 차지하고 있습니다. </p> </section> <section> <h2>시 전문</h2> <blockquote> <p> 죽는 날까지 하늘을 우러러<br> 한 점 부끄럼이 없기를,<br> 잎새에 이는 바람에도<br> 나는 괴로워했다.<br><br> 별을 노래하는 마음으로<br> 모든 죽어가는 것을 사랑해야지<br><br> 그리고 나에게 주어진 길을<br> 걸어가야겠다.<br><br> 오늘 밤에도 별이 바람에 스치운다. </p> <footer>- 윤동주, <cite>서시</cite></footer> </blockquote> </section> </main> <footer> <p>© 2025 윤동주 관련 페이지. 모든 권리 보유.</p> </footer> </body> </html> |
윤동주의 서시
삶과 죽음, 그리고 희망에 대한 서정적 시
시 소개
윤동주의 "서시"는 그의 시집에서 가장 대표적인 작품으로, 인간의 내면과 삶의 고통, 희망을 담은 서정적인 시입니다. 이 시는 한국 문학사의 중요한 자리를 차지하고 있습니다.
시 전문
죽는 날까지 하늘을 우러러
- 윤동주, 서시
한 점 부끄럼이 없기를,
잎새에 이는 바람에도
나는 괴로워했다.
별을 노래하는 마음으로
모든 죽어가는 것을 사랑해야지
그리고 나에게 주어진 길을
걸어가야겠다.
오늘 밤에도 별이 바람에 스치운다.
© 2025 윤동주 관련 페이지. 모든 권리 보유.
html 구조에서 <head> 에서 </head> 사이에 있는 것이 메타태그입니다.
메타태그 사용:
검색 엔진 최적화를 위한 description 및 keywords.
소셜 미디어 공유를 위한 Open Graph 및 Twitter Cards 메타태그.
시각적 콘텐츠 소개:
제목과 시 전문을 강조하여 사용자에게 직관적으로 정보를 전달.
반응형 디자인:
viewport 메타태그를 통해 모바일 환경에서도 적합하게 표시
시 전문 포함:
사용자가 직접 시를 감상할 수 있도록 전문을 포함.
오늘 공부 끝...
'이과공부' 카테고리의 다른 글
| SEO가 무엇인지? 어떻게 해야 되는 것인지? (1) | 2025.01.09 |
|---|---|
| 내 블로그가 구글에 검색이 안될때 대처방안 (0) | 2025.01.07 |
| AI 작곡을 활용한 자동 부수입 생성 방법 (2) | 2025.01.05 |
