ybeen 님의 블로그

HTML/CSS = 시맨틱, Meta 데이터, SEO 본문

HTML,CSS

HTML/CSS = 시맨틱, Meta 데이터, SEO

ybeen 2024. 8. 24. 21:15

HTML/CSS 2일차

시맨틱, Meta 데이터, SEO

 

시맨틱이란?

문서 구조와 의미를 명확하게 정의하는데 사용

 

필요성

  • 검색엔진 최적화(seo) - <header>
  • 접근성 <nav>
  • 코드 가독성 및 유지보수

 

주요 시맨틱 태그
<header> 머리말을 정리, logo nav 검색엔진 등등


<nav> 내부 링크 정리

<header>
    <h1>Website Title</h1>
   
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>


<section> 일반적인 섹션(뉴스,경제등등)


<article> 특정 주제에 대한 정보를 제공

<article>
    <h2>Blog Post Title</h2>
    <p>This is an example blog post...</p>
</article>

 

<aside> 간접적 관련 정보, 섹션 아래 렌더링

<aside>
    <h3>Related Articles</h3>
    <ul>
        <li><a href="#article1">Article 1</a></li>
        <li><a href="#article2">Article 2</a></li>
    </ul>
</aside>



<footer> 저작권정보, 저자,  하단 정보등등

<footer>
    <p>&copy; 2024 Your Company. All rights reserved.</p>
</footer>



<main> 메인컨텐츠


<figure> 사진,그림 콘텐츠를 정의


<figcaption> figure에 대한 설명

<figure>
    <img src="image.jpg" alt="An example image">
    <figcaption>Image of an example scenario.</figcaption>
</figure>



<footer> 저작권이나 링크의 정보를 포함할수있음

 


시맨틱 주의사항(참고)
- 적절한 태그 사용

- nav가 링크를 포함하는데 div대신 nav를 사용

- 중첩구조 : 시맨틱 태그는 중첩되어 사용 됨 <header> 안에 <nav>

 

 

 

Meta date란?

  • 페이지 콘텐츠가 무엇인지 사용자가 쉽게 이해를 도와줌
  • 특정 데이터의 속성, 구조에 대한 정보를 담고 있는 데이터
  • <head>, <title>

<head> 태그 내에 포함

  • 제목
  • 설명
  • 키워드
  • 저자
  • 언어 및 정보

메타 데이터 요소

메타 태그(Meta Tags)

1. title

  • 웹 페이지의 제목\

2. Meta Description

  • 웹 페이지 요약 설명을 제공

3. Meta Keywords

  • 현재는 검색엔진에서 무시되거나 중요도가 낮음

Robots Meta Tags

  • 검색 엔진 크롤러가 페이지를 어떻게 처리해야하는지 지시
  • nofollow는 페이지 링크를 크롤러가 따라가지 않게 지시

Open Graph Tags

  • 페이지가 공유될 때 어떻게 표시될 지를 지정(클릭률을 높이는데 기여함)
<head>
    <!-- 웹 페이지의 제목-->
    <meta property=og:title" content="내 웹 사이트" />

    <!-- 웹 페이지의 타입 -->
    <meta property="og:type" content="website" />

    <!-- 웹 페이지의 대표 URL -->
    <meta property="og:url" content="https://ybeen.tistory.com/" />
   
    <!-- 이미지, 사이즈는 약 410 x 200px를 권장! -->
    <meta property="og:image" content="이미지 링크" />
</head>

 

SEO란?

  • 검색 엔진에서 웹사이트 가시성을 높이기 위한 전력과 기술
  • 목표는 높은 순위를 차지, 많은 트래픽을 얻는 것

SEO를 잘하는 방법은?

  • 키워드 연구 - 분석하고 콘텐츠, 제목, 메타 설명을 자연스럽게 포함
  • 최적화 - 사용자에게 유용, 고품질 콘텐츠를 생성 가치를 제공
  • 백링크 - 웹사이트의 권위를 평가하는데 중요한 요소(신뢰할 수 있는 사이트로 링크를 얻는 것이 중요)
  • 기술적 SEO - 구조를 시맨틱하게, 로딩 속도, 모바일기기에서 최적화, 사이트맵을 최적화하여 검색엔진이 쉽게 크롤링하고 indexing
  • 사용자 경험(UI) - 사용자 경험이 좋을수록 검색엔진도 긍정적으로 평가함
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="이것은 메타테이터와
    시맨틱 태그를 이용해서 SEO를 이해 하는 간단한 예제!">
   
    <title>간단한 HTML 예제</title>
</head>

<body>
    <header>
        <h1>저의 웹 사이트에 오신 것을 환영합니다</h1>
       
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h2>Home</h2>
            <p>이것은 저희 홈페이지에요</p>
        </section>

        <section id="about">
            <h2>About</h2>
            <p>어바웃 타임?!</p>
        </section>

        <section id="contact">
            <h2>연락처</h2>
            <p><a href="mailto:info@example.com">
            info@example.com</a>를 통해서 연락할 수 있어요.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 나의 웹 사이트. All rights reserved.</p>
    </footer>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'HTML,CSS' 카테고리의 다른 글

HTML/CSS = HTML 기본문법 및 태그 사용  (0) 2024.08.22
'HTML,CSS' Related Articles more