-
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>
1 - <head> 요소 안에 속성으로 property=”og:title”를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해 주세요. 그다음 공유하여 미리보기를 확인해 보세요.
<meta property="og:title" content="콘텐츠 제목" />
2 - <head> 요소 안에 속성으로 property=”og:description”를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해 주세요. 그다음 공유하여 미리보기를 확인해 보세요.
<meta property="og:description" content="콘텐츠 설명" />
3 - <body> 요소 안에 <img> 요소를 만든 다음 src 속성을 작성하여 이미지를 넣어주세요. 그다음 공유하여 미리보기를 확인해 보세요.
<img src="https://cdn.poomang.com/auto-generated/bbangbti/images/results/02.png?version=1680678939006"
4 - <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" />
5 - 좀더 실제와 똑같은 공유용 더미앱을 만들어보자
<!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>
6 미리보기 
링크 클릭시 보이는 페이지 '코드스테이츠' 카테고리의 다른 글
4.27 React 복습 (0) 2023.04.27 4.27 웹 접근성 (0) 2023.04.27 4.26 SEO (0) 2023.04.26 4.26 크로스 브라우징 (0) 2023.04.26 4.26 시멘틱 HTML 에서 안좋은 마크업 사용 방법 (0) 2023.04.26