본문 바로가기
Know

🎨 티스토리 상단 태그<haed>, 이렇게 꾸며보세요! 🎨

by Informator7 2025. 3. 28.
728x90
반응형

티스토리 블로그의 <head> 태그는 웹 페이지의 제목, 메타 정보, 외부 파일 연결 등 다양한 중요한 역할을 담당하는 곳입니다. 이 부분을 적절히 수정하면 블로그를 더욱 효과적으로 관리하고 사용자 경험을 향상시킬 수 있습니다.

⚠️ 주의사항: <head> 태그를 잘못 수정하면 블로그가 제대로 작동하지 않을 수 있습니다. 수정 전 반드시 현재 코드를 백업해두시는 것을 권장합니다.

📝 순서도

1️⃣ 티스토리 관리 페이지 접속

  • 티스토리 블로그 관리자 페이지 로그인

2️⃣ [꾸미기] 메뉴 클릭

  • 관리 페이지 좌측 메뉴에서 [꾸미기] 를 클릭


3️⃣ [스킨 편집] 메뉴 클릭

  • [꾸미기] 하위 메뉴에서 [스킨 편집] 을 클릭


4️⃣ [HTML 편집] 탭 클릭

  • 스킨 편집 화면 상단의 탭 메뉴 중 [HTML 편집] 탭을 클릭

 

5️⃣ <head> 태그 찾기

  • HTML 편집 화면의 코드 영역에서 <head> 태그를 찾습니다. 일반적으로 문서의 최상단 부근에 위치합니다.
  • <head> 태그는 <!DOCTYPE html> 바로 아래에 위치하는 경우가 많으며, </head> 태그로 닫힙니다.

 

6️⃣ <head> 태그 내부에 원하는 코드 추가 또는 수정

  • 찾은 <head> 태그와 </head> 태그 사이에 원하는 HTML 코드를 추가하거나 기존 코드를 수정
    • 자주 사용되는 <head> 태그 활용 예시
      • 메타 태그 수정 (SEO 최적화)
        • description: 블로그 내용을 요약하여 검색 엔진 결과에 표시
        • keywords: 블로그 주제와 관련된 키워드를 쉼표로 구분하여 입력합니다. 검색 엔진 최적화에 활용
        • author: 블로그 운영자의 이름을 명시
      • HTML
         
        <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="블로그에 대한 간략한 설명 (검색 엔진 결과에 표시됩니다.)">
<meta name="keywords" content="키워드1, 키워드2, 블로그 주제 관련 키워드">
<meta name="author" content="블로그 운영자 이름">
      • 제목 태그 수정
        • <title> 태그는 웹 브라우저 탭이나 검색 엔진 결과에 표시되는 페이지 제목입니다. 정보력✨ 치환자는 현재 페이지의 제목을 자동으로 불러옵니다. 필요에 따라 블로그 이름을 추가하여 통일성을 줄 수 있음
      • HTML
         
        <title>정보력✨ - 블로그 이름</title>
      • CSS 파일 연결
        • 외부 CSS 파일을 연결하여 블로그 디자인을 변경할 수 있습니다. ./style.css 는 스킨 폴더 내의 style.css 파일을, https://... 는 외부 CDN에 있는 CSS 파일을 연결하는 예시
      • HTML
         
        <link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.example.com/your-custom-style.css">
      • JavaScript 파일 연결
        • 외부 JavaScript 파일을 연결하여 블로그에 동적인 기능을 추가
      • HTML
         
        <script src="./script.js"></script>
<script src="https://cdn.example.com/your-custom-script.js"></script>
      • 웹폰트 연결:

* Googl 2 e Fonts 등의 웹폰트 서비스를 이용하여 블로그의 글꼴을 변경할 수 있음

해당 서비스에서 제공하는 <link> 태그를 <head> 안에 추가

    * **파비콘 설정:**
        ```html
        <link rel="icon" href="./favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
        ```
        * 웹 브라우저 탭에 표시되는 작은 아이콘 (파비콘)을 설정합니다. `./favicon.ico` 는 스킨 폴더 내의 `favicon.ico` 파일을 사용하는 예시입니다.

 

 

7️⃣ [적용] 버튼 클릭

  • <head> 태그 내부의 코드를 추가 또는 수정한 후, HTML 편집 화면 우측 상단의 [저장] 버튼을 클릭하여 변경 사항을 적용

 

8️⃣ 블로그 확인

  • 저장이 완료되면 블로그에 접속하여 변경 사항이 제대로 적용되었는지 확인

 

💡 팁

  • <head> 태그 안에는 일반적으로 사용자에게 직접적으로 보이는 콘텐츠는 포함되지 않음
  • 메타 정보는 검색 엔진 최적화 (SEO)에 중요한 역할을 하므로, 블로그 주제와 내용을 정확하게 반영하도록 수정하는 것이 좋음
  • 외부 CSS나 JavaScript 파일을 연결할 때는 파일 경로 또는 URL이 정확한지 확인해야 함
  • 웹폰트를 사용하면 블로그 디자인의 개성을 살릴 수 있지만, 너무 많은 웹폰트를 사용하면 페이지 로딩 속도가 느려질 수 있으므로 적절히 사용하는 것이 좋음
 
728x90
반응형

'Know' 카테고리의 다른 글

🚀 ChatGPT로 이미지를 지브리 그림체로 바꾸는 방법! (완벽 가이드)  (4) 2025.04.01
💰 티스토리 수익 3배 늘리는 비법 대방출! 💰 (숫자, 통계, 키워드 완벽 분석!)  (3) 2025.03.28
🎨 티스토리 블로그, 180° 달라지는 꾸미기 꿀팁 🎨  (0) 2025.03.28
🚨 2025년 3월 대한민국 대형 산불: 피해 현황 및 대응 상황  (1) 2025.03.28
🎮 롤 (LoL) + 🎬 4K 유튜브 영상 편집에 적합한 모델 선택 (맥미니 M2 Pro vs M4)  (1) 2025.03.27

관련글

티스토리툴바