-
HTML HEAD와 OG 태그, 그리고 테스트 방법(ngrok 이용해보자!)Web Dev/8. 메모 2020. 12. 15. 21:38728x90
Next js를 공부하다가 next/head의 HEAD를 사용할때 얘가 뭔지 몰라서 html에서 head의 역할에 대해서 찾아보았다.
developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기 | MDN
head 태그에는 무엇이 있을까? HTML의 메타데이터 Jump to sectionJump to section HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일
developer.mozilla.org
화면에는 표시되지 않는 head의 역할은 html 문서에 대한 metadata를 포함하는 것.
전통적으로 있던 많은 meta data는 현재 사용되지 않고 있다고 한다. 특히 keywords같은 속성은 스팸 발송자들이 악용을 해서 현재는 검색엔진들이 이 속성은 무시해버린다고 한다.
og에 대해서 사람들이 말하는걸 들은 적이 있어서 이것도 뭔지 제대로 봤다.
open graph data는 페이스북에서 메타 데이터를 제공하기 위해 발명한 것이라고 한다.
솔직히 뭔소린지 모르겠어서 글을 하나 더 찾아봤다.
neilpatel.com/blog/open-graph-meta-tags/
What You Need to Know About Open Graph Meta Tags for Total Facebook and Twitter Mastery
It promotes integration between Facebook and other websites by allowing them to become rich graph objects with the same functionality as other Facebook objects.
neilpatel.com
이글을 읽어보니까 og 는 소셜미디어에서 사용되는 개념인것같다. 처음 og 프로토콜을 만든 페북에서는 다른 웹사이트를 페북에 갖고 왔을때, 페북의 다른 객체들처럼 잘 보이게 할려고 만들었다고 한다. 즉, 제3의 사이트가 페북에 어떻게 보일지를 조정할 수 있게 된다고 한다. 그리고 이 정보들은 head안에 포함되어있어야한다. 지금은 트위터, 링크드인, 구글에서도 og 태그를 인식한다고 한다.
글구 이거로 이쁘게 보이면 사용자가 많이 클릭해서 중요하다고 한다.
아래에 next js 앱에 다 때려넣어봤다.
import Head from 'next/head' export default function Home() { return ( <div> <Head> <title>My page title</title> <meta property="og:title" content="My page title" key="title" /> </Head> <Head> <meta property="og:title" content="My new title" key="title" /> <meta property="og:image" content="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188327.jpg" /> <meta property="og:description" content="Og tag test!!!" /> <meta property="og:title" content="Og tag test!!! title" /> </Head> <p>Hello world!</p> </div> ) }ngrok를 통해서 내 로컬 서버를 한번 올려보겠다!! ngrok는 ngrok.com/
ngrok - secure introspectable tunnels to localhost
@Botto ngrok, probably the best tool I have started to use for my webwork since firebug also great support
ngrok.com
내 로컬호스트에 퍼블릭 URL을 부여해 주는 툴이다. localhost:3000 에 있는 내 앱을 아래의 명령어로 public url을 부여한다.
그러면 이렇게 보인다.
일케!!
이제 저 링크를 페북에 가서 테스트해본다
짜잔!! 신기하네!!!!
HTML이 정말 하나의 문서라는 사실을 까먹을때가 많은데, head를 보면서 진짜 얘네가 의미있는 문서라는걸 다시 되새기게 된다!
'Web Dev > 8. 메모' 카테고리의 다른 글
Gatsby Netlify Page not found 계속 뜰때!!! (0) 2020.12.21 JAMstack이란? [NHN FORWARD 2020] Welcome to JAMstack 를 보고! (0) 2020.12.21 VS code 에서 emscripten.h 헤더 부를때 intellisense 가 동작을 안하면!! (0) 2020.12.11 다른 레포지토리에 있는 커밋을 가져와야할때 (0) 2020.12.03 Pyinstaller, Tkinter와 thread를 사용하는 프로젝트 (0) 2020.07.12