Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Tags
- 크롬 익스텐션
- 백준
- nodejs
- discord.js
- C언어로 쉽게 풀어쓴 자료구조
- TypeScript
- 캠스터디
- 프로그래머스 #정수삼각형 #동적계획법
- Chrome Extension
- X
- content script
- 동적계획법
- popup
- 자료구조
- 파이썬
- 백준 7579
- supabase
- webpack
- background script
- 크롬 확장자
- 포도주시식
- 갓생
- 디스코드 봇
- 공부시간측정어플
- Message Passing
- react
- 2156
- 백준 #7568번 #파이썬 #동적계획법
Archives
- Today
- Total
히치키치
이상청 : OpenGraph Protocol 사용한 SEO 처리 (단순링크, 트위터 공유) 본문
💙 meta tag?
index.html 파일의 <head></head> 부분에 있으며 문서의 내용, 키워드, 이미지 등을 알려주며 브라우저와 검색엔진에게 해당 페이지에 대한 정보 제공
💙 OpenGraph Protocol
Facebook에서 정의한 HTML문서의 메타 데이터 정보를 적는 방식에 대한 규약입니다. url공유시 표현되는 title, thumbnail등은 해당 사이트의 Bot이 og정보를 기반으로 파악하여 표현하는 것입니다.
1. meta 태그 내 og 속성 지정
단순한 링크 공유 시 다음과 같이 보임 (썸네일이 생겼다고 보면 편하다)
2. meta 태그 내 twitter 속성 지정
트위터 공유 시 입력창에 보여주는 방식을 조정함
3. index.html 파일 내 favicon과 사이트 title 지정
'이상청' 카테고리의 다른 글
| 이상청 : CSS Position과 Canvas, html link를 사용한 곰돌이 아바타 (0) | 2022.08.08 |
|---|---|
| 이상청 : 미디어쿼리와 useWindowWidth() 이용한 반응형 웹페이지 (0) | 2022.08.08 |
| 이상청 : Axios interceptor, instance 모듈화 통한 api 통신 (0) | 2022.08.08 |
| 이상청 : Recoil 사용한 비동기적 상태관리 & 사용자 경험 향상 (0) | 2022.08.07 |
| 이상청 : Github actions 이용한 AWS 배포 CI/CD (0) | 2022.08.06 |
'이상청' Related Articles
more
Comments