[On-page SEO] meta 오픈그래프 요소 설정하기

프로젝트 막바지!

비록 클론 코딩 프로젝트여도 웹표준/웹 접근성을 배웠으니 메타데이터 태그도 사용해야지

meta 태그는 HTML 문서의 head 요소 안에 작성한다.

meta name="description"

콘텐츠에 대한 간략한 설명, 검색 결과창에서 제목 밑에 나오는 설명글
즉, SEO를 위해 사용됨

<meta name="description" content="Stack Overflow is the largest, most trusted online community for developers to learn, share​ ​their programming ​knowledge, and build their careers.">

meta 오픈그래프 요소

: property 속성을 사용하는 경우를 뜻한다.

소셜 미디어 등에서 링크를 공유했을 때 뜨는 미리보기
즉, 다른 사람에게 공유하기 위해 사용됨

<meta
    property="og:site_name"
    content="Stack Overflow"
    />
<meta property="og:type" content="website">
<meta property="og:image" content="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded">
<meta
    property="og:description"
    content="Where Developers Learn, Share, & Build Careers"
    />

모바일, 온라인 공유 모습