링크를 복사하여 삽입할 때 웹페이지의 제목, 설명, 이미지 등의 정보가 함께 표시되는 기능은 **메타 정보(Meta Tags)**를 이용한 것입니다. 이러한 정보는 HTML 문서의 <head> 태그에 정의되어 있으며, 소셜 미디어, 메신저, 검색 엔진에서 웹페이지를 미리 볼 수 있게 도와줍니다. 주요 메타 정보 태그는 다음과 같습니다:
1. 기본 Meta 태그
HTML의 기본 메타 태그는 웹페이지의 기본 정보를 제공하는데 주로 사용됩니다.
<meta charset="UTF-8">
<meta name="description" content="웹페이지의 간단한 설명">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="author" content="페이지 작성자 이름">2. Open Graph (OG) 태그
Open Graph Protocol은 주로 Facebook, Twitter와 같은 소셜 미디어에서 사용됩니다. Open Graph 태그를 사용하면 URL이 공유될 때 어떤 정보가 표시될지 세부적으로 조정할 수 있습니다.
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지에 대한 설명">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="페이지 URL">
<meta property="og:type" content="website">- og:title: 페이지 제목
- og:description: 페이지 요약 설명
- og:image: 미리보기 이미지 URL
- og:url: 페이지 URL
- og:type: 페이지 유형 (예: website, article, video 등)
3. Twitter Card 태그
Twitter에서 웹페이지 링크가 공유될 때 표시되는 미리보기 정보를 제어합니다. Open Graph와 유사하지만, Twitter에 맞게 세부 조정이 가능합니다.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="이미지 URL">
<meta name="twitter:site" content="@사이트계정">- twitter:card: summary 또는 summary_large_image와 같은 카드 형식을 지정
- twitter:title, twitter:description, twitter:image: 각각 제목, 설명, 이미지
- twitter:site: 계정 핸들, (예: @사이트계정)
4. 추가적으로 유용한 메타 태그
- canonical: 중복 URL 문제를 해결하고, SEO 최적화를 위해 주요 URL을 지정하는 데 사용됩니다.
<link rel="canocical" href="주요 URL">주의 사항
메타 태그를 정확히 설정했더라도 각 플랫폼의 캐시가 있을 수 있어, 변경 사항이 즉시 반영되지 않을 수도 있습니다. Facebook의 경우 Sharing Debugger와 같은 도구로 캐시를 삭제하고 새로 반영할 수 있습니다.
이를 통해 링크를 붙여 넣었을 때 풍부한 미리보기 정보가 나타나게 할 수 있습니다.
'JAVA공부' 카테고리의 다른 글
| 두 수의 나눗셈_Math.floor / Math.trunc() (0) | 2024.11.11 |
|---|---|
| HashMap (1) | 2024.11.10 |
| 백/프론트 디버그모드 (1) | 2024.11.08 |
| 백/프론트 테스트 코드 (1) | 2024.11.07 |
| test 코드>>성공했으나 에러는 나옴 (0) | 2024.11.07 |