많이 사용하게 되는 seo 및 ui 관련 html 태그들 정리

2024. 12. 16. 22:23ㆍ개발에 적용/SEO

많이 사용하게 되는 seo 및 ui 관련 html 태그들 정리

웹 프로젝트들을 진행하면서 어렴풋이 많이 봐왔기에 익숙하지만,

정확히 모르고 어떤 메타 태그들을 사용 해야할 지에 대해서

진지하게 고민해 본적은 없는 것 같아서 이번에 정리를 해보았습니다.

 

link rel="apple-touch-icon"

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

설명

  • 애플 기기(iOS 및 iPadOS)의 홈 화면에서 웹 앱의 아이콘으로 사용됩니다. 즉, 애플 기기에서 웹 페이지를 북마크하거나 홈 화면에 추가할 때 표시되는 아이콘입니다.
  • 브라우저는 적절한 크기를 자동으로 선택합니다.

참고

  • rel속성 값에 'apple-touch-icon' 대신 'apple-touch-icon-precomposed' 를 사용하면 아이폰의 아이콘 기본형태(둥근모서리)를 사용하지 않습니다.
  • 사이즈 별로 여러개를 등록할 수 있다.(64x64) 사이즈를 추가할 경우 아래처럼 sizes 속성을 추가한다.
  • 180x180은 최신 애플 기기에서 권장되는 크기입니다.
<link rel="apple-touch-icon" href="/apple-touch-icon1.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon2.png" sizes="64x64">
<link rel="apple-touch-icon" href="/apple-touch-icon3.png" sizes="128x128">
<link rel="apple-touch-icon" href="/apple-touch-icon4.png" sizes="180x180">

 

link rel="icon"

<link rel="shortcut icon" href="https://www.youtube.com/s/desktop/b61fbcbd/img/logos/favicon.ico" type="image/x-icon">
<link rel="icon" href="https://www.youtube.com/s/desktop/b61fbcbd/img/logos/favicon_32x32.png" sizes="32x32">
<link rel="icon" href="https://www.youtube.com/s/desktop/b61fbcbd/img/logos/favicon_48x48.png" sizes="48x48">
<link rel="icon" href="https://www.youtube.com/s/desktop/b61fbcbd/img/logos/favicon_96x96.png" sizes="96x96">
<link rel="icon" href="https://www.youtube.com/s/desktop/b61fbcbd/img/logos/favicon_144x144.png" sizes="144x144">

설명

  • 브라우저가 웹 페이지의 기본 파비콘을 식별하도록 지정합니다.
  • rel=”shortcut icon”
    • 'shortcut' 텍스트가 추가된 형태입니다.
    • 과거부터 사용되었으며, 현재는 rel="icon"으로 통합되었지만, 여전히 호환성을 위해 추가됩니다.
  • type=”image/x-icon”
    • 파비콘 파일의 MIME 유형을 지정합니다. .ico 파일은 주로 image/x-icon으로 설정됩니다.
  • sizes=”32x32”
    • 해당 파비콘의 이미지 크기를 명시합니다. 브라우저는 이를 참조하여 적절한 크기의 이미지를 사용합니다.

 

link rel="canonical"

<link rel="canonical" href="https://www.youtube.com/">

설명

  • 사이트 내 URL 주소는 다르지만 동일한 내용의 중복된 페이지가 있을 때 페이지에 코드를 삽입하여 검색엔진에게 대표가 되는 URL 주소를 알려주는 역할을 합니다.
  • 중복 페이지의 경우 캐노니컬(Canonical) 태그를 적용하지 않을 경우, 검색엔진은 자기 마음대로 원본 URL을 판단하여 적용하며 중복되는 다른 페이지들은 덜 크롤링을 하게 되고 검색엔진에게 패널티를 받을 수 있습니다.
  • rel="canonical"
    • 현재 페이지가 특정 URL을 정식 버전으로 간주한다는 것을 나타냅니다.
  • href="url입력"
    • "정식 버전"으로 간주할 URL을 지정합니다.

참고 사이트

 

link rel="alternate"

<!-- rel='alternate'의 hreflang 속성의 사용 예시 -->
<link rel="alternate" hreflang="en" href="https://example.com/page.html">
<link rel="alternate" hreflang="ko" href="https://example.com/ko/">
<link rel="alternate" hreflang="x-default" href="http://example.com/page.html">

설명

  • rel="alternate" 속성은 문서의 대체 콘텐츠를 정의하고 검색엔진 및 사용자에게 콘텐츠의 다양한 버전을 제공하는 데 유용합니다.
  • 검색엔진 최적화(SEO)를 돕고, 여러 버전의 페이지나 콘텐츠를 구분하여 검색엔진이 적절한 페이지를 인덱싱하고 표시 할 수 있도록 지원합니다. (예 : SEO 최적화 및 중복 콘텐츠 방지)
    • 예를 들어, hreflang속성으로 다국어 버전 정보를 제공하면, 검색엔진은 hreflang 정보를 바탕으로 사용자에게 가장 적합한 언어와 지역의 페이지를 표시합니다.
      (미국 사용자는 영어(hreflang="en") 페이지. 스페인 사용자는 스페인어(hreflang="es") 페이지. 한국 사용자는 한국어(hreflang="ko") 페이지.) 
  • 주로 검색엔진에 정보를 전달하는 용도로 사용됩니다. 기본적으로 실제 동작을 수행하지 않으며, 브라우저나 사용자가 이를 기반으로 어떤 동작을 하도록 만드는 것은 아닙니다.

주로 제공하는 정보 예시

1. RSS 또는 Atom 피드

2. 다국어 버전의 페이지

3. 모바일 버전 링크

4. 프린터 친화적인 페이지

5. 앱 또는 특정 플랫폼 링크

6. AMP 페이지

7. PDF 또는 기타 형식

8. 버전별 콘텐츠 제공

주요 기능 정리

  • 중복 콘텐츠 문제 방지
    • 다국어 페이지는 일반적으로 동일한 콘텐츠를 다양한 언어로 제공하기 때문에 중복 콘텐츠로 간주될 가능성이 있습니다.
    • hreflang 태그는 이러한 페이지들이 중복된 것이 아니라 언어 및 지역에 따라 별도의 버전임을 검색엔진에 명확히 알려줍니다.
  • 검색 결과의 정확성 향상
    • 사용자가 검색할 때, 검색엔진은 hreflang 정보를 바탕으로 브라우저 언어 설정 또는 지역에 따라 적절한 페이지가 노출시킵니다.

 

meta name="format-detection"

<meta name="format-detection" content="telephone=no">

설명

  • 아이폰(iOS) 사파리(Safari)에서 자동으로 전화번호를 인식하는 기능을 차단합니다.
  • iOS, Safari 에서는 전화번호를 자동으로 인식하여 해당 번호에 a태그를 입히거나, 
    이미 다른 태그가 설정되어 있다면 a태그로 강제로 바꿉니다.
  • 위의 기능은 아이폰에서 전화번호를 선택시 바로 전화를 걸 수 있도록하는 편의기능으로 존재하지만, 
    의도치 않게 UI가 망가지는 원인이 됩니다.
  • 그래서 meta태그를 설정하여 해당 기능이 동작하지 않게 하거나, 
    meta태그를 사용하지 않으려면 선제적으로 a태그를 넣고 css로 스타일을 설정하여 UI가 망가지는 일이 없도록 해줍니다.
  • 또 다른 방법으로서 UI도 살리면서 전화걸기 편의기능도 동시에 활용하려면 
    meta 태그를 추가하고, 전화번호에 
    <a href="tel:010-xxxx-xxxx">010-xxxx-xxxx</a>​
    위와 같이 a태그 전화링크를 입힙니다.

추가 설명

  • content="telephone=no" 말고도 다른 값들도 존재합니다.
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">

참고 사이트

 

Open Graph Protocol (SNS 태그)

<meta property="og:title" content="Learn Web Development with Tutorials">
<meta property="og:site_name" content="Code Academy">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.codeacademy.com/learn-web-development">
<meta property="og:image" content="https://www.codeacademy.com/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:description" content="Discover step-by-step guides to master web development, from beginner to advanced.">

설명

  • 페이스북과 같은 소셜 미디어 플랫폼에서 페이지를 공유할 때 표시될 정보를 지정합니다.
  • og:title : 공유 시 표시될 제목.
  • og:site_name : 웹사이트 이름.
  • og:type : 콘텐츠의 유형 (예: article, website 등).
  • og:url : 공유될 페이지의 URL.
  • og:image : 공유 시 표시될 이미지 URL.
  • og:image:width : 이미지의 너비.
  • og:description : 콘텐츠에 대한 간단한 설명.

 

twitter (SNS 태그)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Master Web Development with Our Comprehensive Guide">
<meta name="twitter:site" content="@CodeAcademy">
<meta name="twitter:creator" content="@AuthorName">
<meta name="twitter:image" content="https://www.codeacademy.com/images/twitter-card.jpg">
<meta name="twitter:description" content="Step-by-step tutorials to learn web development, covering HTML, CSS, JavaScript, and more. Start your journey today!">

설명

  • 트위터에서 공유될 때 표시되는 정보를 지정합니다.
  • twitter:card
    • 카드 유형을 지정합니다.
    • summary_large_image: 큰 이미지를 포함한 요약 카드입니다.
    • 다른 옵션으로 summary, app, player 등이 있습니다.
  • twitter:title
    • 트위터에서 표시될 제목입니다.
  • twitter:site
    • 페이지 소유자의 트위터 계정입니다.
    • 예: "@CodeAcademy" (트위터 핸들 앞에 @를 포함)
  • twitter:creator
    • 콘텐츠 작성자의 트위터 계정입니다.
    • 예: "@AuthorName"
  • twitter:image
    • 트위터 카드에서 표시될 이미지 URL입니다.
    • 800x418 픽셀 이상이어야 합니다.
  • twitter:description
    • 콘텐츠에 대한 요약 설명입니다.

 

마무리

head 태그에 들어가는 자주 사용했었던 태그들을 정리해봤습니다.

하지만 위 태그들 말고도 정말 많은 태그들이 있기 때문에

앞으로도 마주치게될 새로 알게된 태그들 중에서 자주 사용하는 태그들을 계속 정리해 나가야겠습니다.

'개발에 적용 > SEO' 카테고리의 다른 글

네이버 연관 채널 설정하기  (1) 2025.04.20

관련글

티스토리툴바