반응형
메타 태그란?
메타 태그(Meta Tag)는 HTML 문서의 <head> 태그 내에 포함되는 태그로, 웹페이지의 정보를 설명하고 브라우저와 검색 엔진에게 추가적인 정보를 제공하는 역할을 합니다. 메타 태그는 웹페이지의 제목, 설명, 키워드, 문자 인코딩 등을 설정할 수 있으며, 이러한 정보는 검색 결과에 표시되거나 소셜 미디어에서 공유될 때 미리보기로 제공됩니다.
자주 사용되는 메타 태그에는 다음과 같은 것들이 있습니다:
<meta charset="UTF-8">: 웹페이지의 문자 인코딩을 설정합니다. UTF-8은 대부분의 문자를 표현할 수 있는 인코딩 방식입니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 장치에서의 뷰포트 설정을 지정합니다. 이를 통해 웹페이지가 모바일 기기에서 올바르게 표시될 수 있도록 도와줍니다.<meta name="description" content="페이지 설명">: 웹페이지의 간단한 설명을 설정합니다. 이 설명은 검색 결과에 페이지의 일부로 표시되거나, 소셜 미디어에서 공유될 때 미리보기로 제공될 수 있습니다.<meta name="keywords" content="키워드1, 키워드2, 키워드3">: 웹페이지와 관련된 키워드를 설정합니다. 이는 검색 엔진에게 웹페이지와 관련된 키워드를 알리는 데 사용될 수 있습니다.
메타 태그는 웹페이지의 검색 엔진 최적화(SEO)와 사용자 경험을 개선하는 데 도움이 됩니다. 따라서 웹페이지를 작성할 때 적절한 메타 태그를 사용하여 웹페이지의 정보를 정확하게 전달하는 것이 중요합니다.
오픈 그래프란?
오픈 그래프(Open Graph)는 웹사이트나 앱이 소셜 미디어에서 공유될 때 제목, 설명, 이미지 등의 정보를 지정하는 프로토콜입니다. 오픈 그래프는 페이스북(Facebook)에서 개발되었으며, 다른 소셜 미디어 플랫폼에서도 지원됩니다.
자주 사용되는 오픈 그래프 메타 태그에는 다음과 같은 것들이 있습니다:
<meta property="og:title" content="페이지 제목">: 공유될 링크의 제목을 지정합니다.<meta property="og:type" content="website">: 공유될 컨텐츠의 유형을 나타냅니다. "website"는 웹사이트를 의미합니다.<meta property="og:description" content="페이지 설명">: 공유될 링크의 간단한 설명을 제공합니다.<meta property="og:image" content="이미지 URL">: 공유될 링크의 대표 이미지의 URL을 지정합니다.<meta property="og:url" content="링크 URL">: 공유될 링크의 URL을 지정합니다.<meta property="og:site_name" content="웹사이트 이름">: 웹사이트의 이름을 지정합니다.
이와 같은 오픈 그래프 메타 태그를 설정하면 소셜 미디어에서 웹페이지가 공유될 때 해당 정보가 미리보기로 표시되어 사용자에게 링크의 내용을 미리 알려줍니다.
반응형
'Etc' 카테고리의 다른 글
| [VSCode] .eslintrc.json 설정 (0) | 2024.01.08 |
|---|---|
| [VSCode] .tsconfig.json 설정 (0) | 2024.01.08 |
| [VSCode] .prettierrc 설정 (0) | 2024.01.08 |
| [Linux] 필수 리눅스 명령어 정리 (0) | 2023.11.27 |
| [Etc] SSL 기본 개념 (0) | 2022.05.29 |
