Skip to content

Commit 573b1c0

Browse files
kathleen-treasurerkathleen-treasurer
committed
fix: add og tags to all html files + add comment
1 parent e2e7f6e commit 573b1c0

File tree

6 files changed

+80
-39
lines changed

6 files changed

+80
-39
lines changed

‎faq.html

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
<!--
2-
<VS Code에서 HTML 기본구조 자동생성하기>
3-
4-
- `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
5-
6-
- 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
7-
command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요.
8-
스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요.
9-
마지막으로 Add Item 버튼을 눌러 저장하면 끝!
10-
-->
11-
121
<!DOCTYPE html>
132
<html lang="ko">
143
<head>
154
<meta charset="UTF-8" />
165
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17-
<!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
6+
<meta property="og:type" content="website" />
7+
<meta
8+
property="og:url"
9+
content="https://panda-market-sample.netlify.app/faq"
10+
/>
11+
<meta property="og:title" content="판다마켓 - FAQ" />
12+
<meta property="og:image" content="images/logo/og-image.png" />
13+
<meta
14+
property="og:description"
15+
content="일상의 모든 물건을 거래해 보세요"
16+
/>
1817
<title>판다마켓 - FAQ</title>
1918
<link rel="icon" href="images/logo/favicon.ico" />
2019
<link

‎index.html

+25-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,36 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta property="og:title" content="판다마켓" />
7-
<meta property="og:url" content="https://panda-market-sample.netlify.app" />
6+
7+
<!--
8+
메타데이터를 이용해 공유 링크 미리보기에 표시될 내용을 매력적으로 바꿔주세요!
9+
SNS에서의 가시성뿐만 아니라 검색 엔진 최적화(SEO)에도 생각보다 중요한 영향을 미쳐요.
10+
11+
< Meta tag: Open Graph >
12+
- OG 메타 태그 중 필수 항목으로 강요되는 건 없지만, 페이스북에서 메타데이터를 표준화하기 위해 만든 규약인 Open Graph Protocol에서는 1. title, 2. type, 3. image, 4. url 네 가지를 기본으로 권장하고 있어요.
13+
- og:description은 optional metadata로 분류되어 있지만 가장 많이 사용되는 설정 중 하나입니다.
14+
- og:title이 설정되어 있는 경우에는 미리보기 제목으로 설정값을 우선적으로 사용하고, 없는 경우엔 <title> 태그 내에 있는 스트링으로 표시합니다. 만약 두 값이 동일하더라도 Open Graph Protocol에 따라 og:title을 명시해주는 것을 권장합니다.
15+
- og:title과 og:description 태그는 SNS 공유에서뿐만 아니라, 검색 엔진 결과 페이지에서의 미리보기 텍스트로도 사용돼요.
16+
- og:type 태그로 website, article, video.movie, music.playlist 등 페이지의 유형을 정의해 주세요. 플랫폼에 따라 각 콘텐츠 및 미디어 유형에 맞는 여러 가지 미리보기 레이아웃이 존재하는 경우도 있기 때문에 type을 설정해준다면 최적화된 UI를 활용할 수 있어요.
17+
- og:image가 설정되어 있지 않은 경우 플랫폼에 따라서 페이지 내에서 임의의 이미지를 선택하여 미리보기로 사용하는 등 링크와 관련 없는 형태로 표시될 수 있어요. OG 이미지의 권장 사이즈는 1200 x 630px (1.91:1 비율)입니다.
18+
- index.html 외에도 모든 HTML 파일에서 OG 태그를 설정해야 해요. 이때, og:url에는 각 페이지의 주소를 넣어주면 되고, 나머지 OG 정보 또한 페이지의 콘텐츠에 맞게 각각 다르게 넣어줘도 좋아요.
19+
- 참고 문서: https://ogp.me/
20+
21+
< Meta tag: Twitter Cards >
22+
- 페이스북의 Open Graph가 가장 널리 통용되지만, 이외에도 Twitter Card라고 불리는 X(구 트위터)의 메타데이터 설정을 함께 해주면 더 다양한 플랫폼에서의 미리보기 스타일을 제어할 수 있습니다.
23+
- 필수 태그인 twitter:card로 카드 유형을 지정하고, 각 유형별로 요구되는 태그를 추가하는 방식입니다.
24+
- 참고 문서: https://developer.twitter.com/en/docs/twitter-for-websites/cards/
25+
26+
* 꿀팁: Open graph validator, Twitter card validator 사이트를 활용해 내 링크의 미리보기가 각종 플랫폼에서 어떻게 표시되고 있는지 미리 확인해 보세요 ;)
27+
-->
828
<meta property="og:type" content="website" />
29+
<meta property="og:url" content="https://panda-market-sample.netlify.app" />
30+
<meta property="og:title" content="판다마켓" />
31+
<meta property="og:image" content="images/logo/og-image.png" />
932
<meta
1033
property="og:description"
1134
content="일상의 모든 물건을 거래해 보세요"
1235
/>
13-
<meta property="og:image" content="images/logo/og-image.png" />
1436

1537
<title>판다마켓</title>
1638
<link rel="icon" href="images/logo/favicon.ico" />

‎items.html

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
<!--
2-
<VS Code에서 HTML 기본구조 자동생성하기>
3-
4-
- `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
5-
6-
- 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
7-
command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요.
8-
스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요.
9-
마지막으로 Add Item 버튼을 눌러 저장하면 끝!
10-
-->
11-
121
<!DOCTYPE html>
132
<html lang="ko">
143
<head>
154
<meta charset="UTF-8" />
165
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17-
<!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
6+
<meta property="og:type" content="website" />
7+
<meta
8+
property="og:url"
9+
content="https://panda-market-sample.netlify.app/items"
10+
/>
11+
<meta property="og:title" content="판다마켓 - 상품 리스트" />
12+
<meta property="og:image" content="images/logo/og-image.png" />
13+
<meta
14+
property="og:description"
15+
content="일상의 모든 물건을 거래해 보세요"
16+
/>
1817
<title>판다마켓 - 상품 리스트</title>
1918
<link rel="icon" href="images/logo/favicon.ico" />
2019
<link

‎login.html

+11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta property="og:type" content="website" />
7+
<meta
8+
property="og:url"
9+
content="https://panda-market-sample.netlify.app/login"
10+
/>
11+
<meta property="og:title" content="판다마켓 - 로그인" />
12+
<meta property="og:image" content="images/logo/og-image.png" />
13+
<meta
14+
property="og:description"
15+
content="일상의 모든 물건을 거래해 보세요"
16+
/>
617
<title>판다마켓 - 로그인</title>
718
<link rel="icon" href="images/logo/favicon.ico" />
819
<link

‎privacy.html

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
<!--
2-
<VS Code에서 HTML 기본구조 자동생성하기>
3-
4-
- `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
5-
6-
- 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
7-
command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요.
8-
스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요.
9-
마지막으로 Add Item 버튼을 눌러 저장하면 끝!
10-
-->
11-
121
<!DOCTYPE html>
132
<html lang="ko">
143
<head>
154
<meta charset="UTF-8" />
165
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17-
<!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
6+
<meta property="og:type" content="website" />
7+
<meta
8+
property="og:url"
9+
content="https://panda-market-sample.netlify.app/privacy"
10+
/>
11+
<meta property="og:title" content="판다마켓 - 이용약관" />
12+
<meta property="og:image" content="images/logo/og-image.png" />
13+
<meta
14+
property="og:description"
15+
content="일상의 모든 물건을 거래해 보세요"
16+
/>
1817
<title>판다마켓 - 이용약관</title>
1918
<link rel="icon" href="images/logo/favicon.ico" />
2019
<link

‎signup.html

+11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta property="og:type" content="website" />
7+
<meta
8+
property="og:url"
9+
content="https://panda-market-sample.netlify.app/signup"
10+
/>
11+
<meta property="og:title" content="판다마켓 - 회원가입" />
12+
<meta property="og:image" content="images/logo/og-image.png" />
13+
<meta
14+
property="og:description"
15+
content="일상의 모든 물건을 거래해 보세요"
16+
/>
617
<title>판다마켓 - 회원가입</title>
718
<link rel="icon" href="images/logo/favicon.ico" />
819
<link

0 commit comments

Comments
 (0)