코드스테이츠
4.26 SEO 실습구현
스우티
2023. 4. 27. 02:13
SEO Search Engine Optimization
초기화면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
</body>
</html>
- <head> 요소 안에 <title> 요소를 작성하고 공유하여 미리보기를 확인해 보세요.
<title>실습 임시</title>
- <head> 요소 안에 속성으로 property=”og:title”를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해 주세요. 그다음 공유하여 미리보기를 확인해 보세요.
<meta property="og:title" content="콘텐츠 제목" />
- <head> 요소 안에 속성으로 property=”og:description”를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해 주세요. 그다음 공유하여 미리보기를 확인해 보세요.
<meta property="og:description" content="콘텐츠 설명" />
- <body> 요소 안에 <img> 요소를 만든 다음 src 속성을 작성하여 이미지를 넣어주세요. 그다음 공유하여 미리보기를 확인해 보세요.
<img src="https://cdn.poomang.com/auto-generated/bbangbti/images/results/02.png?version=1680678939006"
- <head> 요소 안에 속성으로 property=”og:image”를 갖는 <meta> 요소를 작성하고 content 속성으로는 <img> 요소와는 다른 주소를 사용해 주세요. 그다음 공유하여 미리보기를 확인해 보세요. 오픈그래프 이미지 삽입
<meta
property="og:image"
content="https://mblogthumb-phinf.pstatic.net/MjAxODA5MjlfMjgy/MDAxNTM4MjA0NjMxMDUw.wd4gTcCw9iRcW6dF7RUp7a0tN28J_LmYMjw2b0cZ_z8g.ZEitIuMVT43xwHtZP4jVtaT3PQofXcxdsVXsMoOuqDAg.PNG.lastmistake/%EC%BB%A4%EB%B9%842.png?type=w800"
/>
- 좀더 실제와 똑같은 공유용 더미앱을 만들어보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>コピー能力診断 | 星のカービィポータル</title>
<link rel="shortcut icon" href="https://www.kirby.jp/favicon.ico" /> //PC탭아이콘
<meta property="og:title" content="コピー能力診断 | 星のカービィポータル" /> //미리보기 제목
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://www.kirby.jp/special/personalityquiz/"
/>
<meta
property="og:description"
content="12の質問に答えると、カービィのコピー能力からあなたのタイプを診断することができます！" //미리보기 설명
/>
<meta
property="og:image"
content="https://www.kirby.jp/special/personalityquiz/assets/ogp/ogp_pqtop.jpg"
width="1200" //미리보기 이미지
/>
</head>
<body>
<h1></h1>
<img
src="https://i.ibb.co/pbv7KS8/D22-D09-A6-8-B66-44-BD-AC4-F-C6-E6-BC9-C7-E28.jpg"
alt="カービィのコピー能力診断" //사이트 이미지
/>
</body>
</html>
