💡수업 목표💡
- Flask 프레임워크를 활용해서 API를 만들 수 있다.
- '버킷리스트'를 완성한다.
- EC2에 내 프로젝트를 올리고, 자랑한다!
2022.08.29 - [스파르타코딩클럽/웹개발종합반] - 웹개발종합반 개발일지 | 5주차 - 1,2,3,4,5,6강
웹개발종합반 개발일지 | 5주차 - 1,2,3,4,5,6강
💡수업 목표💡 Flask 프레임워크를 활용해서 API를 만들 수 있다. '버킷리스트'를 완성한다. EC2에 내 프로젝트를 올리고, 자랑한다! Project03 - 버킷리스트 http://spartacodingclub.shop/web/bucket 인생 버킷..
sosohan-coding.tistory.com
2022.09.01 - [스파르타코딩클럽/웹개발종합반] - 웹개발종합반 개발일지 | 5주차 - 7,8강 AWS EC2 인스턴스 생성
웹개발종합반 개발일지 | 5주차 - 7,8강 AWS EC2 인스턴스 생성
💡수업 목표💡 Flask 프레임워크를 활용해서 API를 만들 수 있다. '버킷리스트'를 완성한다. EC2에 내 프로젝트를 올리고, 자랑한다! AWS EC2 인스턴스 시작하기 Amazon Machine Image(AMI) 선택 선택하는 AMI
sosohan-coding.tistory.com
웹개발종합반 개발일지 | 5주차 - 9강 Ubuntu 22.04 LTS에 Python 서버 셋팅 및 PyCharm으로 서버에 파일 올
💡수업 목표💡 Flask 프레임워크를 활용해서 API를 만들 수 있다. '버킷리스트'를 완성한다. EC2에 내 프로젝트를 올리고, 자랑한다! 2022.08.29 - [스파르타코딩클럽/웹개발종합반] - 웹개발종합반 개
sosohan-coding.tistory.com
2022.09.01 - [스파르타코딩클럽/웹개발종합반] - 웹개발종합반 개발일지 | 5주차 - 10,11,12강 Ubuntu 22.04 LTS에 Python Flask 서버 셋팅
웹개발종합반 개발일지 | 5주차 - 10,11강 Ubuntu 22.04 LTS에 Python Flask 서버 셋팅
💡수업 목표💡 Flask 프레임워크를 활용해서 API를 만들 수 있다. '버킷리스트'를 완성한다. EC2에 내 프로젝트를 올리고, 자랑한다! 2022.08.29 - [스파르타코딩클럽/웹개발종합반] - 웹개발종합반 개
sosohan-coding.tistory.com
Open Graph 소셜검색엔진최적화
페이스북에서 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜로 URL 링크를 공유할 때, 콘텐츠의 요약내용이 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것이다.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
Open Graph 기본 태그
- og:site_name : 해당 URL 공유 시, 나타낼 사이트 이름
- og:title : 해당 URL 공유 시, 나타낼 메인 콘텐츠 타이틀
- (지정되어 있는 <title>태그의 내용보다 우선적으로 표시하게 됩니다.)
- og:description : 해당 URL 공유시, 나타낼 설명.
- (지정되어 있는 <description>태그의 내용보다 우선적으로 표시하게 됩니다.)
- og:type : 해당 URL 공유 시, 지정할 유형(website, blog, video.movie 등). 유형에 따라 다른 속성이 필요할 수 있음.
- og:url : 해당 URL 공유 시, 표준으로 사용할 URL
- og:image : 해당 URL 공유 시, 나타낼 메인 이미지
- og:image:width , og:image:height : 이미지의 너비,높이 픽셀수로 지정
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:site_name" content="The Rock" />
<meta property="og:title" content="The Rock Content" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
...
</head>
...
</html>
Open Graph 모바일앱 미리보기
: 모바일 앱이 존재하는 경우 앱으로 연결 시 노출
<!-- iOS -->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />
<meta property="al:ios:app_name" content="ios 앱 이름" />
<!-- Android -->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" />
<meta property="al:web:url" content="안드로이드 앱 URL" />
Twitter card
: 트위터에서 특정 Web page Url을 공유할 때 어떤 형식으로 공유될지 규정
: Open Graph만 사용해도 트위터에서 오픈그래프를 참조하나 트위터 카드와는 다른 UI 제공
About Twitter Cards
This page and certain other Twitter sites place and read third party cookies on your browser that are used for non-essential purposes including targeting of ads. Through these cookies, Google, LinkedIn and Demandbase collect personal data about you for th
developer.twitter.com
트위터 로그인 / 트위터
휴대폰, 이메일, 사용자 아이디
twitter.com
- twitter:card : 카드 종류로 앞에서 본대로 summary, photo, player의 값이다.
- twitter:url : 트위터 카드를 사용하는 URL이다.
- twitter:title : 카드에 나타날 제목
- twitter:description : 카드에 나타날 요약 설명
- twitter:image : 카드에 보여줄 이미지
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
'스파르타코딩클럽 > 웹개발' 카테고리의 다른 글
| 웹개발종합반 개발일지 | 5주차 (0) | 2022.09.01 |
|---|---|
| 웹개발종합반 개발일지 | 5주차 - 10,11,12강 Ubuntu 22.04 LTS에 Python Flask 서버 셋팅 (0) | 2022.09.01 |
| 웹개발종합반 개발일지 | 5주차 - 9강 PyCharm으로 서버 연결 및 파일 올리기 (0) | 2022.09.01 |
| 웹개발종합반 개발일지 | 5주차 - 7,8강 AWS EC2 인스턴스 생성 (0) | 2022.09.01 |
| 웹개발종합반 개발일지 | 5주차 - 1,2,3,4,5,6강 (0) | 2022.08.29 |
