코인 박연구원

티스토리 블로그 HTML <head> 태그 완전 정복 본문

AI활용

티스토리 블로그 HTML <head> 태그 완전 정복

지식박연구소 2025. 4. 20. 23:46

1. 블로그의 첫인상, <head> 태그

블로그에 방문한 사람들이 가장 먼저 보는 것은 디자인이지만, 검색엔진이 가장 먼저 보는 건 바로 <head> 태그입니다.
이 태그 안에는 페이지의 제목, 설명, 키워드, SNS 미리보기 정보 등이 담기게 되죠.

2. 왜 신경 써야 할까?

검색 최적화(SEO), SNS 공유 시 썸네일 출력, 트위터 카드, 블로그 등록 등 대부분이 이 태그 안에서 시작됩니다.
즉, 방문자 수와 직결됩니다. 한 줄로 요약하면: "제대로 설정하면 노출이 잘 된다!"
저는 이걸 확인 하지 않아서, 기존 블로그가 검색 또는 노출이 되지 않아서 많이 고생한 경험이 있습니다.

3. 기본 <head> 구조 미리보기

<head>
  <meta charset="UTF-8">
  <title>페이지 제목</title>
  ...
</head>

4. 필수 메타태그 설정

검색엔진이 페이지 내용을 이해할 수 있도록 도와주는 태그들입니다.

<meta name="title" content="티스토리 블로그 HTML <head> 태그 완전 정복">
<meta name="author" content="Findjun">
<meta name="description" content="코인 연구를 통해 다같이 행복하죠!">
<meta name="keywords" content="IT, 서비스기획, 앱개발, 블록체인 등">

5. SNS 미리보기(Open Graph / Twitter)

공유할 때 썸네일이 예쁘게 나오는 설정입니다.

<meta property="og:type" content="article">
<meta property="og:title" content="티스토리 블로그 HTML <head> 태그 완전 정복">
<meta property="og:description" content="코인 연구를 통해 다같이 행복하죠!">
<meta property="og:image" content="">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="티스토리 블로그 HTML <head> 태그 완전 정복">
<meta name="twitter:description" content="코인 연구를 통해 다같이 행복하죠!">
<meta name="twitter:image" content="">

[3편]소유 확인, RSS, 스타일, 스크립트 삽입 등 실전 활용 예시

6. 티스토리에 바로 적용할 수 있는 전체 코드

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

  <title>티스토리 블로그 HTML <head> 태그 완전 정복</title>
  <meta name="title" content="티스토리 블로그 HTML <head> 태그 완전 정복">
  <meta name="author" content="Findjun">
  <meta name="description" content="코인 연구를 통해 다같이 행복하죠!">
  <meta name="keywords" content="IT, 앱개발, 시장조사, 블록체인, 자동매매">

  <meta property="og:type" content="article">
  <meta property="og:title" content="티스토리 블로그 HTML <head> 태그 완전 정복">
  <meta property="og:description" content="코인 연구를 통해 다같이 행복하죠!">
  <meta property="og:url" content="/1">
  <meta property="og:image" content="">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="티스토리 블로그 HTML <head> 태그 완전 정복">
  <meta name="twitter:description" content="코인 연구를 통해 다같이 행복하죠!">
  <meta name="twitter:image" content="">

  <meta name="naver-site-verification" content="여기에_네이버_코드_붙이기">
  <meta name="google-site-verification" content="여기에_구글_코드_붙이기">

  <link rel="alternate" type="application/rss+xml" title="코인 박연구원" href="https://findseong.tistory.com/rss">

  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="./images/font.css">

  <style>
    <s_if_var_cover-image>.wrap_sub {
      background-image: url('');
    }</s_if_var_cover-image>
  </style>

  <script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js"
    integrity="sha256-..." crossorigin="anonymous"></script>

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
    crossorigin="anonymous"></script>
</head>

이 코드를 HTML 편집 모드에서 복사/붙여넣기 하시면 적용됩니다.

'AI활용' 카테고리의 다른 글

시리즈 3편: 슬랙/텔레그램 알림 & 실전 배포 자동화  (0) 2025.04.21
시리즈 2편: 전략 고도화 및 백테스트 - 나만의 승률 높이기  (0) 2025.04.21
시리즈 1편: 오픈 API로 자동 투자 봇 만들기 - Gate.io & OKX 편  (0) 2025.04.21
'AI활용' Related Articles more