meta 태그
- meta는 Most Effective Tactics Available의 약자
- 문서 정보인 메타데이터를 정의
- HTML에서는 항상
<head>태그 안에 있어야 함 - name 혹은 http-equiv 속성이 있으면 content도 필수
meta 태그 속성
charset
- 문자 인코딩 방식 정의
- UTF-8 이라고 암튼 헤드태그에 항상 있던 애
name
- 메타데이터 이름 정의
- name이 있으면 content 필수
content
- name이나 http=equiv의 값을 정의
- 단독 사용 불가
http-equiv
- 속성값
- content-type
- default-style
- refresh
예제
name="viewport"
<meta name="viewport" content="width=device-width, initial-scale=1">- 반응형 웹 구현에 필요
- viewport는 스크롤 부분 제외 보이는 영역
- 태그 해석
- 너비는 보고있는 기기 너비
- 그 너비에 맞춰 초기 화면 배율을 1로 지정
name="keyword"
<meta name="keywords" content="keyword1,keyword2">- 문서의 대표적인 키워드 지정
- 검색 엔진에 반영될 수 있음
- 단, 검색엔진에 걸리려고 아무 거나 넣다가 걸리면 검색순위 떨어짐
- 중요한 키워드를 앞에 배치
name="description"
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="description" content="나의 관심 콘텐츠를 가장 즐겁게 볼 수 있는 Daum">- 페이지 설명
- 검색 시 페이지 제목 아래 페이지 내용의 요약에 반영
name="author"
<meta name="author" content="seunghye">- 페이지 소유자나 회사명
name="robots"
<!-- 모든 검색엔진 로봇의 방문을 허용 -->
<meta name="robots" content="ALL">
<!-- 이 문서도 긁어가고 링크된 문서도 긁어감 -->
<meta name="robots" content="index,follow">
<!-- 이 문서는 긁어가지 말고, 링크된 문서만 긁어감 -->
<meta name="robots" content="noindex,follow">
<!-- 이 문서는 긁어가되, 링크는 무시함 -->
<meta name="robots" content="index,nofollow">
<!-- 이 문서도 긁지 않고, 링크도 무시함 -->
<meta name="robots" content="noindex,nofollow">- 검색 엔진 크롤링 가능 여부 결정
- robots 메타태그 보단 robots.txt 파일로 제어하는 것이 일반적
OpenGraph
<meta property="og:title" content="네이버">
<meta property="og:url" content="https://www.naver.com/">
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">- 오픈그래프는 페이지 링크가 공유될 때 보이는 정보
- 게시물의 제목, 설명, 이미지 컨트롤 가능
- title: 썸네일 제목
- url: 이동할 url
- image: 썸네일 이미지
- description: 썸네일 설명
nuxt3에서의 활용
nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=500, initial-scale=1',
title: 'My App',
meta: [
{name: 'description', content: 'hello my name is...'},
{name: 'author', content: 'me'}
]
}
}
})- nuxt.config.ts에 설정 시 전역으로 설정
composable: useHead
<script setup lang="ts">
useHead({
title: 'My App',
meta: [
{name: 'description', content: 'my name is...'}
],
bodyAttrs: {
class; 'test'
},
script: [{ children: `console.log('hello')` }]
})
</script>- 각 페이지 별로 활용 가능
- App.vue에 선언하면 전역으로 가능
components
<script setup lang="setup">
const title = ref('hello');
</script>
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body {background-color: green;}" />
</Head>
<h1>{{title}}</h1>
</div>
</template>- nuxt3에서는 Title, Base, Style, Meta, Link, Body, Html, Head 등의 태그 제공
- template 안에서 직접 컨트롤 가능
참고 사이트
쿼카에요