# OG

seongwop

마지막 5주차는 4주차까지 배운 flask 서버, POST 요청, GET 요청, DB 연동을 통해서 웹페이지를 만들어보고 실제로 배포해보는 과정이 있었다. 배포하기 전에, 우리가 카카오톡을 사용할 때와 같이 링크를 전달할 때 간단한 사진 및 설명과 함께 첨부되도록 할 수 있는 og태그가 있다. > ### OG(Open Graph) 태그 해당 HTML의 메타데이터를 크롤링하여 미리보기 생성 이런 식으로 content에 데이터를 넣어주면 카카오톡 미리보기와 같이 사용할 수 있다. 웹 서비스 런칭 내가 만든 웹 서비스를 런칭하기 위해서는 클라이언트의 요청에 항상 응답해줄 수 있는 서버가 필요하다. 이러한 서버의 조건은 항상 프로그램이 실행되고 있을 뿐 아니라, 모두가 접근할 수 있는

ginameee

카카오톡 OG Description이 안나오는 이슈 카카오톡에서 OG title이 길면(2줄이면) description이 짤린다. description이 잘린다면, title글자수를 줄여보자 one link 이슈 안드로이드에서 appsflyer sdk 를 쓸 때, 쿼리스트링을 종종 인코딩하는 경우가 있다. 제대로 링크이동이 안될떈 url encoding 을 확인해보자

black1594

오늘은 2주간 배운 것들을 활용하여 미니프로젝트 과제를 만들었다. 처음보다는 익숙해졌지만, 과제를 처음 받고 생각했을 때 어떻게 시작을 해야 할지 감이 안잡혀서 고생을 했던 것 같다. 천천히 공부했던 수업 자료들을 훑어보고, 과제를 어떻게 해야할지 순서와 방향을 정한 후 시작을 하니 그래도 차츰 모양이 잡혀 간 것 같다. 과제 시간 때 너무 막히는 부분은 페어분들에게 물어보며 만들었는데 완성은 했지만 확실히 코드 입력하는 부분에서는 아직 많이 부족한 점을 느꼈던 것 같다. 그래도 처음 시작할 때와는 달리 조금 더 이주간 배웠 던것들을 더 잘 알게 된 것 같아서 좋았다. 과제를하면서 가장 어려웠던 부분은 cheerio를 통하여 html에서 내가 필요한 정보만 빼내올 때 였다. 전에 배운 코드를 활용하여 필요한 og부분을 빼내오는 것 까지는 어렵지 않았는데 이 부분을 조회할 때 코드를 작성하는 것이 힘들었지만, 도움을 받아 어찌저찌 만들면서 이해를 하여 다행이었다. 마지막으

ginameee

Twetter, Facebook 이곳 에서 어떻게 보여지는지 체크해보자 Kakao에 og태그 정보갱신이 제대로 안될 때 Twetter, Facebook은 og:url 생략시 공유된 주소로 세팅되지만, kakao는 도메인기준으로 세팅이 되는 듯 하다. 따라서 og:url을 반드시 세팅해줄 수 있도록 하자. 제대로 세팅되었는데도 이상하게 보여진다면 이곳에서 캐시를 날려보자.

ginameee

og tag를 동적으로 바꿀 수 있는가? CSR 방식에선 불가능하다. CSR은 브라우저에서 컨텐츠가 렌더링된다. 공유한 SNS에서는 렌더링자체를 진행하지 않기떄문에, 렌더링 되기전의 document의 meta 내용을 참조하게된다. 브라우저에서 별도의 액션을 통해 meta 내용을 바꾸도록 구현한다 한들, 애초에 브라우저에 올라가질않으니 무용지물이 된다. SSR 방식에선 가능하다. og tag에 동적으로 넣고자하는 내용을 웹서버(=렌더링서버)에 넘겨줘야한다. 넘기는 형태는 쿼리스트링이나 혹은 동적파라미터가 될 수 있다. nextjs 를 사용한다면, html 코드를 og image로 활용할 수도 있다. 참고 https://dev.to/inthepocket/dynamic-open-graph-images-with-nextjs-jg7 https://kyounghwan01.github.io/blog/React/next/dynamic-meta/#getinit

ymh0951

Nuxt란? Nuxt는 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크이다. 웹 어플리케이션을 제작할 때 필요한 뷰엑스, 라우터, axios와 같은 라이브러리들을 미리 구성하여 싱글 페이지 어플리케이션(Single Page Application), 서버 사이드 렌더링(Server Side Rendering), 정적 웹 사이트(Static Generated Website)를 쉽게 제작할 수 있다. > ### 서버 사이드 렌더링이란? 서버 사이드 렌더링이란 웹 페이지의 내용을 서버에서 모두 작성해서 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식을 의미한다. Nuxt의 장점 검색 엔진 초기화 초기 프로젝트 설정 비용 감소와 생상선 향상 ESLint, Prettier 라우터, 스토어 등의 라이브러리 설치 및 설정 파일 필요 X 파일 기반의 라우팅 방식, 설정 파일 자동 생성 페이지 로딩 속도와 사용자 경험 향상 브라

bestfarmer

1. 서버 만들기 1) Flask 👉Flask 패키지 설치 Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다. 👉시작 코드 👉확인 http://localhost:5000/ 접속이 될거임. http://localhost:5000/mypage 이런식. 👉세팅 프로젝트 폴더를 만들고, 아래와 같은 폴더/파일 생성. > Project폴더 ㄴstatic 폴더 (이미지, css파일을 넣어둡니다) ㄴtemplates 폴더 (html파일을 넣어둡니다) app.py 파일 👉Get 방식 > 주로 데이터 조회(READ) 할 때 사용 일단 Get이든, Post이든 import 추가로 더해줘야 함. > app.py 파일 > Get요청 API코드 >html 파일 > GET 요청 확인 Ajax코드 > 👉Post 방식 > 대부분 이거 사용 하게 됨. 👉 잔잔바리 > 새로

ghrlfehd123

💡OG(Open graph)란? OG(Open graph)는 해당 HTML문서의 메타데이터(제목, 설명, 문서의 타입, 대표 URL, 등)를 보기 쉽게 나타내기 위해 작성자가 통일해서 사용할 수 있도록 정의한 프로토콜이다. 즉, 웹 페이지를 SNS로 공유할 때 해당 콘텐츠의 요약 내용인 SNS에 게시되는데 최적화된 데이터를 나타내는 설정이다. 🔎OG(Open graph): 오픈 그래프 이미지로 보면 이해하기 쉬울 것이다. 📜사용법 NAVER 블로그, 카카오톡 미리보기 설정 트위터 미리보기 설정(og→twitter) 모바일 앱 미리보기 설정 `모바

nanyong0214

✍Optimistic UI > 속이기 즉, 거의 성공 확률이 99%인 Query, Mutation와 같은 요청에 마치 완료된 것 처럼 미리 보여줌 > 성공확률이 높거나, 큰 영향이 없는 요청에 적용 ex) 좋아요 코드 예시(좋아요) ✍메타태그, OpenGraph(OG) > 오픈그래프는 어떤 HTML 문서를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 타입, URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜 예시코드

yh271

기존의 index.html에 og 태그 넣기 index.html filezilla로 파일 업데이트 하기 1) 업데이트 하기 전에 현재 Git Bash에서 서버가 돌아가고 있는지 확인한다. 돌고 있으면 꺼줘야 한다 2) filezilla에서 서버 쪽의 데이터를 모두 삭제후, 로컬에서 수정된 정보를 다시 전송한다. 3) 실행한다 PC ![](https://velo

yyoujg

1) og 태그 만들기 static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 ~ 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있다. 페이스북 og 태그 초기화 하기 카카오톡 og 태그 초기화 하기

kimareum

_> 다음주 배포를 앞두고 본 커리큘럼이 끝난지금, 2차 최종 평가를 앞둔지금 동기들도 많이 지쳐가는 모습이 보이고, 나도 예전처럼 마냥 밝거나 으쌰으쌰하는 마음이 떨어지고 지친것은 사실이다. 그럼에도 내가 계속해서 마인드 컨트롤을 하고, 그래, 다시 눈뜨고 집중해보자! 해보자! 할 수 있었던건 무엇보다 나와같은 열정을 가진 동기들이 있었고, 우리보다 더 늦게까지 남아서 많은 부분을 세심하게 케어해주고자 하는 코캠의 멘토님들의 열정이 느껴졌기 때문이다. 처음 코캠의 pf제도를 알게되었을땐, 혼자 공부하는것이 방해되는것이 싫었다. 왜냐면 나보다 못하는 동기 만나면 어쩌지? 내가 배울게 없을텐데? 그럼 나는 시간낭비일텐데 ? 하는 생각이었다 하지만, 나보다 잘하는 pf이건 못하는 pf이건 나는 코딩실력 뿐만 아니라, 그들의 생각하는 생각방식(뛰어난 해결방법을 들으면 그 방법을 듣는게 아니라 어떻게 그렇게 생각의 흐름을 정했는지 묻곤한다)과 열정 체력관리, 코캠 커리큘럼 외의 지식등을

sunn3842

웹사이트의 메타데이터를 변경했음에도 카카오톡 오픈그래프에서는 변동이 없어서 알아본 결과, 카카오톡의 오픈그래프 데이터를 변경하기 위해서는 직접 사이트에 방문하여 초기화를 진행시켜줘야 한다고 합니다. > 카카오 개발자 사이트(https://developers.kakao.com/) 접속 카카오 계정 로그인 도구 초기화도구 OG캐시 초기화 할 URL 입력 초기화 후 링크를 붙여본 결과 오픈그래프가 제대로 변경된것을 확인 할 수 있었습니다.

hsecode

🔎 검색엔진 최적화(SEO)가 필요한 이유 🤔 검색 엔진 최적화(Search Engine Optimization, SEO)가 필요한 이유는 무엇일까? 꼭 해야할까? 마케팅, 홍보 측면 외에도 궁극적인 목적 을 위해서 검색엔진 최적화는 꼭 필요하다. > 콘텐츠, 웹페이지를 제작함에있어 궁극적인 목적은 사용자에게 양질의 정보를 올바르게 전달하는 것이다. 잘 만들어진 콘텐츠, 잘 작성된 문서 일지라도 사용자가 읽지 않으면 그것은 콘텐츠, 문서로서 의미가 없다. 그러하다.. 검색엔진 최적화는 꼭 필요한 과정이다.

waterlily_0101

🎯원페이지쇼핑몰 업로드하기🎯 1. 원페이지쇼핑몰 업로드하기 1-1) Robo3T를 이용해서, "내 컴퓨터에서" → "서버에 있는 mongoDB"에 접속하기 💻 좌측 상단 File 아래에 위치한 아이콘(컴퓨터모양) 클릭 ↓ Create 클릭 ↓ 접속 정보 세팅하기 ↓ 상단 Authentication 탭 클릭 > ① Perform authentication 체크박스 클릭 ② 생성한 계정의 아이디와 비밀번호 입력 후, save 클릭 1-2) 원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드하기 그 전에! MongoDB 접속 세팅을 바꿔주기 > ##### 💡 AWS의 MongoDB에 아이디와 비밀번호를 추가했으니, 내 pymongo에도 아이디와 비밀번호를 입력해주어야 한다. 그래야 pymongo가 올바르게 DB에 접근할 수 있다. app.py 파일을 열어서, 아래처럼 가운데 한 줄을 바꿔주기!! > #### pymongo 계정 접속

ghj616

facebook, 카카오톡에 웹 페이지를 배포할 때 쓰이는 페이지 프리뷰를 만들어 봅시다. head에 아래 코드를 작성해 줍니다. > 끝 :)

rowdy

meta data? 태그 내에 html문서에 대한 정보를 제공할 수 있다 메타태그는 html문서의 요소 내부에 속한다, HTML문서를 렌더링하는 방법에 대한 브라우저 정보 정보를 해석하고 표시하는 방법에 대한 검색 엔진 지침 링크가 공유될 때 귀하의 정보를 표시하는 방법을 소셜 미디어 플랫폼에 설명 메타데이터는 페이지에 표시되지 않는다 브라우저와 검색엔진 크롤러에 의해 구문이 분석된다 해당 페이지에서 웹페이지를 검사학 사용할 수 있는 모든 헤더에 있는 메타태그를 확인할 수 있다. 메타태그 내부 데이터는 숨겨져있지 않고, 확인 가능하다 open graph? (og) og는 페이스북에서 만든 프로토콜이자, 소셜 미디어 플랫폼에서 공유되는 링크의 정보를 전달하는 목적으로 만들어진 구조이다.? 작성자가 링크를 공유 시, 미리보기에 표시할 컨텐츠를 결정할 수 있다

fepanbr

Open Graph 태그란? 어떠한 사이트를 SNS로 공유 혹은 URL을 복사하여 전송할 때, 해당 사이트를 들어가기 전, 최적화된 데이터를 보여줄 수 있도록 하는 HTML 메타태그이다. OP graph 태그 op:title 컨텐츠의 타이틀 op:url 웹 페이지의 url og:type 웹 페이지의 타입 (blog, website, 등) og:image 표시되는 이미지 og:site_name 웹사이트 이름 og:description 설명 이 외에도, 트위터는 twitter:image, 안드로이드는 al:android iOS는 al:ios 등으로 표현하여 표시한다.

bonimddal2

이번에는 URL 공유 시, 미리보기 정보가 보이는 기능을 만들어 보았다. > 원리 URL이 인식되면, 크롤러가 해당 웹사이트의 HTML head 의 메타 데이터를 크롤링하여 미리보기 화면을 생성한다. > 프로토콜 대부분 페이스북의 Open Gr

dev-tinkerbell

프로젝트 중 공유 이미지를 업데이트 하고 확인해 보았더니 카톡에서만 업데이트 전 이미지가 계속 남아있는 것을 확인하였다. 나만 업데이트 전 이미지가 보이는건가 싶어 지인들에게 부탁드렸더니 지인들 역시 업뎃 전 이미지가 보였다. 오픈그래프 업데이트 전 이미지 이건 분명 카톡 캐시문제일 것이다 라는 것을 염두했는데 왜냐하면 meta태그에 넣어둔 og img url을 주소창에 검색해 보았을 때 내가 업데이트 한 이미지가 나왔기 때문이다.