SEO란? SEO가 왜 필요한가요? 오픈 그래프 실습해보기

🖥FrontEnd/프론트엔드

SEO란? SEO가 왜 필요한가요? 오픈 그래프 실습해보기

hellohailie 2022. 7. 8. 14:32

SEO가 무엇인지

SEO의 종류

SEO가 왜 필요한지

SEO에 영향을 미치는 요소의 종류와 각 요소의 작성 방법

SEO란?

검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업

SEO를 통해 검색 엔진에서 웹페이지를 더 상위에 노출될 수 있도록 만든다.

SEO의 2가지 종류

✔️ On-Page SEO

웹 페이지 내부에서 진행할 수 있는 SEO.

제목, 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법을 이용하는 방법

Off-Page SEO

웹 페이지 외부에서 이루어지는 SEO.

소셜 미디어 홍부, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법 (웹 페이지 내용이나 구조와 관계없다.)

구글에 특정 키워드를 검색하면 나오는 게시글 중에 상위에 있는 컨텐츠를 클릭해서 HTML 요소를 살펴보자.

<title> 요소와 <meta> 요소에 검색 키워드가 들어가 있는 것을 확인할 수 있다. (on-page SEO)

여기서 광고비를 지불하고 검색 결과 상위에 뜨게 만드는 것은 off-page SEO이다.

1. <title> 요소 : 검색 결과창에 제목에 해당하는 요소 (<head>의 자식 요소로 작성한다.)

- 제목이 너무 길거나 짧으면 제목으로 사이트를 파악하기 어려워서 유입율이 떨어진다.

- <title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.

- 같은 키워드를 반복하면 검색시 불이익을 받을 수 있다. 제목에 핵심 키워드는 한 번만 포함시킨다.

2. <meta> 요소 : 해당 웹 사이트에서 다루고 있는 데이터를 담는 요소. (<head>의 자식 요소로 작성한다.)

아래 예시에서 제목 밑에 따라오는 설명글이요소 안에 들어있는 내용이다.

➥ name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적

<meta name="속성값" content="내용" />

name 속성값	설명
description	콘텐츠에 대한 간략한 설명 (검색 결과에서 제목 밑에 뜨는 내용)
keywords	웹 페이지의 관련 키워드들을 나열할 때 사용
author	콘텐츠의 제작자를 표시

소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta> 요소에 들어가 있는 내용이다.

➥ property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적

➥ 오픈 그래프(open graph)라고 하며, Meta에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 'og'가 붙는다.

<meta property="속성값" content="내용" />

property 속성값	설명
og:url	페이지의 표준 URL
og:site_name	사이트의 이름
og:title	콘텐츠의 제목
og:description	콘텐츠에 대한 간략할 설명 (검색 결과에서 제목 밑에 뜨는 내용)
og:image	미리보기로 표시될 이미지
og:type	콘텐츠 미디어의 유형 // 기본 값은 website로, video, music 등의 유형을 표시할 수 있다.
og:locale	리소스의 언어로, 기본값은 en_US입니다. (한국은 ko_KR)

✔️ 오픈 그래프가 SEO와 전혀 연관이 없는 것이 아니다.

해당 페이지에 방문자 수가 많다면 검색시 상위에 노출될 확률이 높아지기 때문이다.

오픈 그래프를 잘 작성하면 링크 공유를 통해 방문자 수를 늘릴 수 있는 방안이 될 수 있다.

✔️ 오픈 그래프도 그 자체의 목적이 SEO가 아닐 뿐이지, 간접적으로 연관이 있다고 볼 수 있다.

3. <hgroup> 요소 : 콘텐츠의 제목을 표시하는 용도로, 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다.

- 똑같은 키워드 반복해서 넣는 것 피하기

- 이미 사용한 핵심 키워드는 비슷한 키워드로 대체해서 사용하기

4. 콘텐츠

- 개성있는 브랜딩

- 복사 + 붙여넣기 금지

타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정해서 검색 결과에서 아예 생략해버린다.

- 간결한 제목과 설명글

- 최대한 글자로 작성하기

이미지에 alt 속성을 사용해서 해당 이미지에 대한 설명을 텍스트로 작성하는 것이 좋다.

너무 길게 작성하면 스팸 요소로 인식할 수도 있다.

<img src="스타벅스_로고.png" alt="스타벅스 로고" />

<meta> 오픈 그래프 실습해보기

실습할때 마다 이 곳에서 링크를 초기화해주세요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>헬로우 월드!</title>
    <meta property="og:title" content="go for it Hailie!" charset="UTF-8" />
  </head>
  <body>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>헬로우 월드!</title>
    <meta property="og:title" content="go for it Hailie!" charset="UTF-8" />
    <meta property="og:description" content="feel so good!" />
  </head>
  <body>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>헬로우 월드!</title>
    <meta property="og:title" content="permission to dance!" charset="UTF-8" />
    <meta
      property="og:description"
      content="I wanna dance, the music's got me going
    Ain't nothing that can stop how we move, yeah
    Let's break our plans and live just like we're golden
    And roll in like we're dancing fools"
    />

property=”og:description” 의 content를 30글자가 넘게 작성했더니 글자가 넘쳐서 ...으로 나온다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>헬로우 월드!</title>
    <meta property="og:title" content="permission to dance!" charset="UTF-8" />
    <meta
      property="og:description"
      content="I wanna dance, the music's got me going
    Ain't nothing that can stop how we move, yeah
    Let's break our plans and live just like we're golden
    And roll in like we're dancing fools"
    />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
    <img
      src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUVFRgVFRIYGBgYGBoYHBkZGBgYGBoaGBgaGRgYGRgcIS4lHB4rIRkYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHhISHjQkJCsxMTQ0NDQ0NDQxNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ/MTQ0NP/AABEIAOEA4QMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAEAAECAwUGB//EAEgQAAIBAgMEBgcEBwcBCQAAAAECAAMRBCExBRJBUQYiYXGBkTJCobHB0fATUnKyFDNigpLS4RUWI1OzwvEHFzRDVHODk6LD/8QAGQEAAwEBAQAAAAAAAAAAAAAAAQIDAAQF/8QAIBEAAwEAAwEBAQADAAAAAAAAAAECEQMhMRJBUSJCcf/aAAwDAQACEQMRAD8A8ZiiimMKKKKYwooopjDxwZGOIAExJiVgyQMwGi5DCkaAqYQjdsKZKkFq8nvwUN9XEkXjqhHOhBeVu8oarKneO6FUdj1GgjmWM0pMk3p0SsGluHHWHj7pUZdhfSHj7oH4UGqpYyuF10vBDFl6jMaKKKMYUkBJKPhJCBsDYwSSURxFBomkopG8UBgeKKKOUFFFFMYUUUUxhRRRTGHEleRivAAsBkg0rVhxEtUrfQDzmA0OXMRqRsQBfq6fGU3MxvktLyJaW4ZQTmR3cYRTwytexI+ufGZ1gVJnkyMKxOEZNRcHQjT+kFmQcwUvwY6w8fdKIVs5bv4GavGYuqCBOJoVxAKknDC0VxRRSoCxflJiQXTykxFYtEhGkhGtAINFHtFMY3l6P0z6z+a/KE0+ilIi/wBo/wD9flJbJrbxcb28qsN0k3NiL2vxm5QMtiG1owX6I0+FVvJYk6HqT+ub+AfOH7YxFZSoS4ubKEcMzjK5KFCRbibzU2RVLoHO7e5HV3rZG3rAEHLQiL0MtZyWP6JVFfdpsrLZTvMVTM3ysTnpK16HYo6Kh/8AcT5zsdtpdu4Uz5mqPhJYHSK2MvTi26H4wf8Ahr/8lP8Amjt0OxgBJprYZk/aU/5pubXwbV6lvtFVVUEbysbE+qBcC1gDfheU4/bSikqhVUj1VN13hq5OVxxH/Fh9L8G+X+ro5epsx0JVgARwBBzte19NM4LUoldZqYdyxubk568uN+25+rQTHONBpfXnbU90Cp7hnKzQECS98LWju2zsbX7jxY92nfKVpEqWAy+vrzjaJgiCw7uOgtKCJalJjopPhJnCuMypH1ym1GxjUwRnkQeB+siJoYVbHe1HHs/aHd7oGlBhY7twb5GTo4goxHDSx1EWu/Bl16alSvuixAIIvbOxB0tfhM7F4ZWuyd+7x7bc4y1CQV8VPEG+g9sgmRvmCDw4Z6xZWDNpgUM2UOv+6ZLGUwRvAWPG2h7Y2yfT/dMdvZbBK/ySCMUszak2MYmUyKknxsPJOMqijxpYmWr8pNZGmMj4e+WKIrEokBGtLVWNuxRSFopbuxpgnTbKQb1Q7pQ7ygobdWyi2YyN9ZrJRLBl3itzkymzDuvKcJghTFlU5m5JJJJ5knMw7DrnYcZZBzsAq4ZksN/EuWHpIE14AkAEeOUs6O0wd5i1XfTqOHYkb1gSQtyBrlbnNgUjy90soYcKWIFi53m7TYLfyURWUSAttLo37C+xyP8AfM7DbQBcU1BuRvEnQDTxM0OkbqFUM6rvI6hmNl3g9JgCe4NOYB6wZcXhgRlm7ZjkerFrc6GnFXZbtvaQRnTIkhMraG2vunLs5Nj4j4fPylu1jao3+ItQnPeQkrnwBPgPCC0xx/58oqnOw3evPwJZ7DdvmTa/ZxirqLqBmRYnutkIMFzP7PztHetvNcw5gul2Jq5WGpsCfaQOzMDwhOEG+6oL7upHlf3DzMC3bi/bYH2mbXROkGrNlovvI+UWnksaFtJG1hcADYACHnZgva1yfr5TXo4YAA2zOfyhNKgNZy42d/8Aijn8RscAZDh4zkekWzilntkeqe/gZ6i9PxmF0hwAehUAGe6SO9esPdKQ3NE7hOWecYapkbkC39fbHSqAQxzBFvMaeBEHrrusQOz3SI0P19cJ04cOhyOLkcDl3cm90lgEAq5aFTFh6AZQxOt+/I5y7D07MCdRvKfba3Yc4j6TDL2kEYgXExKwm3V4zGxAzMnwstzIHjR406DmCaQyP7vvlqrI0Rke5fzGXKIGI/SSrG3ZaoitFMiG7FLLRpgg6b/32/iMJoFjcXa4NjcnI8pqYDCqGuQDkbX58JOlh6S1LO/pBnOepBAJyy55DlOh0ppIRTVS6AGwz2vvHzM6noaCKTi5J+0JzPNE590z0w/AaTW2Rh9wN+IH2R6ScicTpV2S6ZbKrYiii0qe8yvcjeUdUqRfMjjacanQ7Gk2+xA73p/Bp6hT0givUNdltZN0buWRy6xvbW5A8++c7eHXmnkFekUZlbVWKmxuLg2Njx0iRsxbhp3jO8niP1j3+8/ncyhTMIOcuMSqTJKAWz04whABvW1sbe3P3TG0sdepTHPeM3OiK7tb8SW8bqfn5THFv8O/BbHsJmzs1wlRHByVwh553HuPskrfWHRxrtM9CI4cgJegygyVAza8oYBI4dQnW8CxCXHsh5MoqiZhR5Ft3AmnUZeTHyyK+w+yD4RAVItnnbtyyE6npkgV0c8QVPeLEDxF5y9eqLXU8Rp42+I8p0y9lHn8qymimnWKgW1By5cP6y5sYDnxvf23t9coNXqbwB453+covDmiL+nQVDMquM4fTe6juECryEdM6r7kDMjJNGnQcwdhxke5fzGEKsow4y8F/OYSggZN+jqI4EsVY4WKwohaKW7sUAcLWpVqiMv2DjK+hF7EGwy1MY7LqKVtQqEKHAJHNmsTlyMwf02p/mv/ABN84zYlzrUY97H5yjWsZdLDrqeKqKADRbIW9ICbmxcSzhw1PctukXZTfUHIG/LznmBYnUzc6LMd+qA6oxotuliAu8GWwJMd10Kpx6el03PMfXjB620ir7qjfARi1tQwI3VvzPW8u6cwmJxK64rCjvdfgIbgtqIpvXxOHcjQo17DloJPSiZxvSDCGlXcEZMS6/hc3HvI8JmkZTpelVRau664inUYFgERSGCnPM8bfOczmIULg4Ns46nO/j7RJ0ae8DyFvbeQpLcgcyB5mY2GnhcMzNTXIFhvA8AM9Zp4HZDOKx3iCjE2zvZc/dFg6ipXol8glMjxW4+E0Nn9IaSVK7MCQ7b2QawFgpvYG3f2yVb+HRCSWtl+FwNXcRw2oBvvHQ+4zqtl4tt0K9ydLnXvMwujm00akqXzDMq3BAZQx3bX7LTeRBe4ibjOheGg5FrzK2nimAITWaTjqTOp2Y92sVhRx21tk4iqhJJJ1AJ1tOKvPV8f0iw1O6Elitt7dViFuciWAsP6zgtv0Uep9pSUhag3t0gjPiV5g6+ctDa6Zy8squ0YcUkVI1GklTS5A5ypDDTw/or3QevCxpaCVpzLutOprJwCaI8I7CRnQjlZo4YZH8KfnhiLBsIOr+6n+pD6aQMR+jKkkEl6pEEk2FIr3YpfuxQBw5CKKKXCKKKKYwooopjG70OQNjKQIuDvix/9NrToekXRhRTqVkBDDrBeFh6QHhcznuhn/faP4m/I09Xri9gdCJHkbVJnTwyqlpnlWyNmNVoVCouSbeK5ge2alDowy1gxHUABA47wAFvO5m70XwYph0+7VbyIUr7DOpWgJN8lNvCk8UpLV2cJiujV3VjmoJ6vfc695l/92aDks97nkSNBbOdotGP+irygTpfo7mf4cxT2WhJGZW4KgEqFsoUWt+ETbRSMjwt4w37PlKHFrxXujrzAimt0tMXcszLci/EGx15zdw+loBiqYD58dJmaf1GHi9g4dmLPTYsfW65vwFzxka+wEdQFRyFFl1G6BpulrATqhYC/KWJTZhe4HZa/xjawZK/Dj32SgWzqCLWO8AfbPPWw+5UVb3NgT2Ei9vK09t/Qt43cKQNBqL8zeDbZ2FQxCgOlmX0XWwdfHiOwwxTW6T5ITxr08lgtaa+1tnPh6hpvwzVhoynRh8uBmTWhn0SvAVpOhQZjkDbPOxIkGk6dZhYA8dJ0HK/TRwSZW/ZT/UmutAiZeBqswAJ4K3iaij3ATdWJQmFQpxbkvCRBIjYUU7sUI3YoNGOCiiilxRRRRQhFFFC8Lg2YjLXLj7hmZjFuxcT9lXp1eCOrHuBzHlee2lFZeasLg9+YIniOMwxpGxzDDLQ997HI9ndOn6OdNzQQUqyF1XJCtt4AaKQbXHbJXP12i/Dfz0zraVPcqudN4gnvtb3ATZpNOZw/SGhiSPsywYDNWFjbncZHXnNtK1pz/Ll4zq+lS1GkDEFvBhVkhUuJRAJuwAJPCAsSwv2wt0uCDxmc5deqPP4xKQ04aOHbttKcSgdhAlquuTAnugFSpiazFaK7qqbFy26L8RfU27POZ+YMl3pspSqOu6LBQ1t45sQDwUeVyfCalEWFpXgqRVFU8AB5QjdhSwSq0laRIkrR7Qk9Of6U7EGIpEADfW7IeR+6TyOh8DwnkOIUqSGBBBIIOoI1BnvjLcTgOmuwKdziLlb2DEC6g6B2GtjkCR2dphl4wV2jzd5G8Lx2BemesLqdGGanuMCnQjlr01Nnk2y+6v8AqLN+g7k5iYGzf9o/1VnQ0cSn+Yp7iDEoTAtVj2lYxSfe9h+UY41OZ8jEbGxltopT+nJ2+UUBsZwcUUU6ACk0QsbAfXOMBfKbWFoKi52vxubfXEDx7LhvDEMJs0ekxyGpOg7O/s152l9fGKo3Uy4E8T/TsGUDxmMOgOXDlAPtDExv0O4G4tt5e0Z/OZphatcWgpEaegBmycX9lVV+AOfccj8/CetYZwygjlPGZ6d0YxJNJAx1VfYLSfKvGdHDXqOhQQimbC8GV7S+9xELkvt15iVvWTi6+czcZspD1lLA9jGx8DBqGBW9iza8Ta/jJumn4X4+GaW6aFerbrXUr3zQ2MVNNbaW9pzJmHidnJncsP3z7Ib0few3M8uff/xNLbrsbk4lM6mdGslaUo8uBlcONiitHtEJsBorQTHYVXRkdbqwKsOYORhdpF1gaMmeLY2m2ErPQqDeQG4BvZlPot5a9t5l7SoKDvU/RbPd4qeI7RPU+mXRwYmnvILVkB3f2xqUPw5HvM8nNQgMhBBGVjkQRqCDKz32Q5JxhOzP9n/6pA8aoFRgBYBjkO+GbMP5D+dDBNpfrX/EffHJIpWsw0YjxMvXHVB659hgkeHEMm0Gf2k/MeQjQO0UHyg/TFFFFCKX4X0heE4mtyJ1/p7gIFTNjEWgaAMTeITTwOxnfrN1V5kZnuHzm7htmUqeYTeYes+Z8BoIG0hlLZzeFwdR/RQkczkvmYUdlbubMCfur/Mfl4zpKjZTJxB6xPYo9l/jBozlIfAYBqjinRRQTxtoBqzHWdRQwJojcDFilusct64BOXjH6C0xu1X43VfCxM0sQP8AEY87e6c3Jb+sOnhhKfosw1YOsJpG0AemV66a8RwMLwuKVuw8RMmUwLZZU1C8JWRvbOMFNgjYS2vwlG+UN17j3TQepfSBVkzygYe/00sHjA47eImhTacilez7vZe49Xv5jsmzhcXbJvA8D3GNL0nUm0GjwVKt+MIR7xiTJRSUYzNATKnScD086Lb4bE0V64zqKPWX74H3hxHEduvoLCUuIE3L0ZpUsZ4BhsQaZNwb2tYjMXKn/aI1fE718tTcnibzr+k2yDTrldwNSfrJfVb+kgOosfYRObx2yWUb63K8QfSXv5jtlk0+yDTnUZUUnfs8ogBzjC4RvFJ7vaIoNDhXFLKNJmIVQSToBOn2fsBVs1Trt931R/N7pm8Ak2YOC2dUqnqrlzOQ8+PhOjwOx0pZt1m5kZDuHxmlewsMpWzQOh1KQi0iTGJlZaDAtj1j1TMutr3qvusfdNB36hmcfRU9hHnmPjCkJT06zoLU/Wp+BvzA/CaOIP8AiEc5y/RbFiniFucnuh7zmvtAHjOp2ktnDTl5pytOvgrZwKQZTNx9Mqd5cjNGg9xI4qnvCDNQ+4BYbabC2+PEQ7+00Opt35TLNO0tW1tIU2bQiptBOB9/wlX6bv8AVQeJ+Updby/A0bZzaHeixaIUdp1PE98zsXtf9HsHXeRmsQNRkTdfKa9XScb0mrXZE/Ex8cl9zTSm6SFqvmWztsNirhWUl0YXB42+M08Pig1rGef9GdtCmppvfdvdSMypOoty4+cJ/vLbFIALUyLG+tycm9lu4yvy0xPqanT0ek8mYPhnuLwiERkTK2EtMiwisKMPpDhC9IlQCydYdtvSHiPaBORpVBxW3bw856K63nC7Uw4pVGW2R6y9x4eBuJkxmtJkYeqgSvhFexvvUyEcnMZ7u7vGxOpgNTojgahO7iKlM2sFqWGYH3mFiO4x1cHITKxu1q+Hax66NpvZntUnsjJ1+EnM/pZ/2fVf/NYf+JvlFB/72L/kL5D5xQ7YPmP6X7D2cKSbzDrsM+wfd+c0GaSvKXaN6ZYkQZpEytniDw4K2SYytjEWkS0KQrZGoLq3dBt26Ajl7RmPrthSm4PdBqHo25XHkYRNBS1iCDbiDyOoM9Dw1YYigj8SLMOTjJvb7553XXMzf6G7XCOaTmyPlc6K/A+OnlJck6ivDfzWHS4drZGFNpFi8LY3EghPGQXXR1vsGqEDWRBWXYhbiCKucAUX2EJorYSqkglrmwhQpViGnn208Vv1GYaXsPwrkD45nxnTdI8buJug9d7juX1j8PGcbeV4p/Tn57/1QThufjB8Zm/haEUTYE+H15SiuM7zow5t6PU+hu0TWw6MTdl6jfiTK/iLHxnTrPM/+nWK3aj0j6yh1HavVb2FfKek0zlIvpnVL+pTJERpIyMDCiDznOlmC36e+o6yZ/u+t5ZHwnSsJRVS+R4xGOjy0YizAW1lmMorVRkbjoeR4GW7a2etJyyk2QnLsvl5XgeBrlrmPP8ASdfxnPf2HW+6PMRTrbd0Uf6E+USZ4LVePUaVO0ZIWqKmaJXzlbyIaOTdF9R7SrejvmJQphA6DKJ90GTVh2385dhhnKm9KA2lGIWBtlDq8EYRWbTuui3SRXUUazdYZK59YcAx4HtOvfOgq0bTyAkrmD/xN7ZvSypTAV2315Nn7dZGo/UdMcy8o7l0lBpTLo9L6DemrKeyzD2Z+yEf3lwx9dv4TJNF1S/DQp0zKNo4xKKF3OXAcWPICYO0+lyqLUkBPNjp27o1nIY3HvWbedyx7eHYBoBHmGyV8qX/AEK2hj2rVC7ccgBoFGij64mUJKEWFomnbOiZzo46pt6y5RZQPr61lTrc2l7mVgZ3ji6G7FxP2WJpPew3wrdz9Q3/AIr+E9iomeEY2plYGex9Gtofb4enU4sgv+IZMPMGS5F+nRwPpo2YiIhHiFSErxDhVLHgLy4zB6T48Im4Dm2Z7v6/CK0FM5fEsHYk+tfI9ut5k/o4p5Lpw+UJ3yWvLmQMCPrLjKfPRP61gW+Ypb+hN94R4OxgeoYPeX1IKxzlUc7YziVy1pQ8YRlyG4lKGxI8Y9M8JGpkQfD5TACqBzlVTWSpGQc3MwSLwR1hZlTiBmBmS+kEqL4fXOHkWkXUGDDGbunhECefthbUhIinnrBgdKFTnLhS4xwBLKa3MKQrZNEhVJc+4fXuMhuWk6XGNgBPnKatTdllSpaZlereZvAorr1Lmei/9LsfdKlEnNGDL+FtQPEE/vTzVQWNgLkmwHaZ2vRCj+j1UYtm/Ubl1tAPG0nXaLx0z1hTJymk0tk0WaKsViFRGdjYKLzzfH441XZzxPkt8hNvpdtHeb7FTkubdrageFvbOW4x5X6Tus6LlI9svRs5QT8Pj8o65eF/q8doRMK3z9D+sUG3/wBoxRcG0GqQN9Y8UdE6FKHiihEY1OPidPERRTALEkWiimCREraNFAYi+kqWKKYxGRP15RRQGKoThuEUUKFL2jpx740UYwPiNZnVtYootBn0v2P+uTvP5TOqo+mPxD4RRRGWXp6lh9IRFFJI6TzLaH65/wAbfnaAtr4/Ax4pafDn5PWXJoO7+aI+t+98Y8UZionFFFFGP//Z"
      alt="jk photo"
    />
  </body>
</html>

➥ body에 이미지를 넣으면 오픈 그래프에는 사진이 나오지 않는다.

그렇다면 오픈 그래프에 사진이 뜨도록 하려면? head에 새로운 meta 태그를 만들어주자!

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>헬로우 월드!</title>
    <meta property="og:title" content="permission to dance!" charset="UTF-8" />
    <meta
      property="og:description"
      content="I wanna dance, the music's got me going
    Ain't nothing that can stop how we move, yeah
    Let's break our plans and live just like we're golden
    And roll in like we're dancing fools"
    />
    <meta
      property="og:image"
      content="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTVm4RDrnsRKuI7kif6_EHJA1BA-qj_07imw&usqp=CAU"
    />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
    <img
      src="data:image/jpeg;base64,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"
      alt="jk photo"
    />
  </body>
</html>

파악하기 쉽도록 body와 head의 이미지 주소가 다른 것을 삽입했다.

참고)

https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko

https://searchadvisor.naver.com/guide

https://developers.kakao.com/tool/clear/og

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

저작자표시 비영리 변경금지

'🖥FrontEnd > 프론트엔드' 카테고리의 다른 글

Lighthouse란, Lighthouse 사용하기, Lighthouse 분석해보기 (0)	2022.08.04
TIL) 번들링이란, Webpack의 필요성, 웹팩을 이용하는 방법 (0)	2022.07.25
TIL) WAI-ARIA, aria-live, 스크린 리더, 웹 접근성 향상 시키는 방법 (0)	2022.07.11
TIL) 웹 접근성, 한국형 웹 콘텐츠 접근성 지침, 웹 접근성을 갖추면 얻을 수 있는 효과, 웹 개발자라면 알아야 하는 지식 (0)	2022.07.11
TIL) 웹 표준을 왜 지켜야 하는가, 의미있는 HTML 구조 만들기, Semantic HTML, 시맨틱 요소와 종류, 크로스 브라우징, 웹 워크 플로우 (0)	2022.07.08

현재글SEO란? SEO가 왜 필요한가요? 오픈 그래프 실습해보기

Today Hailie Learned