깃허브 링크생성 후에 공유할때에 og 내용들과 접속후에 프로필 사진이 뜨지 않습니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

깃허브 링크생성 후에 공유할때에 og 내용들과 접속후에 프로필 사진이 뜨지 않습니다.

undefined주차

이*열

・

추천

・

조회수

답변 완료

안녕하세요.

우선 많은 이들에게 양질의 좋은강의 감사합니다.

수업을 수강하면서 프로필을 만들어 봤는데요. 만들어보면서 2가지에 대한 질문사항이 생겼습니다.

깃허브에서 링크생성 후에 공유(카톡으로 링크공유)했을대에 og내용(title,description, image)이 뜨지 않습니다. 어떤 부분이 제가 잘못된 것인지 수정해야할 부분은 어디인지 궁금합니다.
깃허브에서 링크가 만들어지면서 링크접속 후에는 프로필사진이 뜨지않는 현상이 있습니다.

코드는 코드블록쪽에 남겨놓고 사진으로 1, 2번 현상에 대하여 사진 이미지를 첨부하겠습니다.

감사합니다~~

1번현상

2번 현상

<!DOCTYPE html>
<html>
<head>
    <meta charset=“UTF-8” />
    <meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
    <meta property=“og:title” content=“이승희 - 숭 sns와 그녀의 책” />
    <meta property=“og:description” content=“숭 그녀는 누구인가에 대한 고찰이 필요하다면 이 링크만 접속해도 충분히 감을 잡을 수 있을 것이다.” />
    <meta property=“og:image” content=“이승희2.png” />
    <title>르탄이 - 프로필 링크</title>
    <style>
        @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
        * {
            font-family: "Pretendard",serif;
}
        body{
            background-color: black;
        }


        .wrap{
            width: 300px;
            margin: 30px auto 0px auto;


            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .profile{
            width: 100px;
            height: 100px;


            border-radius: 100%;


            border: 2px solid white;


            background-image: url(이승희.jpeg);
            background-position: center;
            background-size: cover;
        }


        .main{
            color: white;
            margin-top: 20px;
            margin-bottom: 5px;
        }


        .sub{
            color: white;
            margin-top: 0px;
            margin-bottom: 30px;
        }


        .wrap > a{
            width: 300px;
            height: 50px;


            background-color: white;
            border-radius: 10px;


            margin-bottom: 10px;


            font-size: 14px;
            font-weight: bold;
            color : orange;


            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;


            text-decoration: none;


            box-shadow: 3px 3px 5px 0px white;
        }


        .wrap > a:hover{
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="profile"></div>
        <h1 class="main">숭</h1>
        <p class="sub">@2ttnd</p>
        <a target="_blank" href="https://www.instagram.com/2tnnd/">인스타그램</a>
        <a target="_blank" href="https://blog.naver.com/flyfany07">블로그</a>
        <a target="_blank" href="https://www.youtube.com/c/insnote">유튜브</a>
        <a target="_blank" href="http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791191211535">별게 다 영감</a>
        <a target="_blank" href="http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791187289852&orderClick=LAG&Kc=">기록의쓸모</a>
    </div>
</body>
</html>

댓글 알림