Html을 만들었는데 메타이미지가 나오지않습니다

JavaScript
#1

안녕하세요
html을 만들었는데 이에대한 링크를 카카오톡에 입력했을때 이미지가 출력되지않습니다.
혹시 내부스크립트를 통해 메타태그를 생성한경우 정상적용되지않는지 궁금합니다.
소스는 이렇게 넣었습니다.

<html>
 <head> 
  <script>
function getstr(name)
{ 
  var url = window.location.search.substring(1);   
  var url = url.split('&');      
  for(var i = 0; i<url.length; i++) 
   {   
    var keys= url[i].split('=');
   if( keys[0] == name){ return keys[1];}
   } 
   return "";
} 

var imgsrc=getstr("room")+"-"+getstr("img");
  var remove=['.','/','!','\\','₩',')','{'];
  for(var i=0;i<remove.length;i++)
  {
    imgsrc=imgsrc.split(remove[i]).join("")
  }
var image1=document.createElement('img');
var mtimg=document.createElement('meta');
var mturl=document.createElement('meta');
mtimg.setAttribute("property","og:image");
mtimg.setAttribute("content",imgsrc+".jpg");
document.getElementsByTagName('head')[0].appendChild(mtimg);
mturl.setAttribute("property","og:url");
mturl.setAttribute("content",imgsrc+".jpg");
document.getElementsByTagName('head')[0].appendChild(mturl);
image1.src=imgsrc+".jpg";
if(image1.height > image1.width)
{ image1.style ="width:auto; height:100%";}
else{ image1.style ="width:100%; height=auto;";}


</script> 
  <meta property="og:type" content=" "> 
  <meta property="og:title" content="사진"> 
  <meta property="og:description" content="누르면 커져요."> 
 </head> 
 <body> 
  <script>
   document.body.appendChild(image1); 
   </script> 
 </body>
</html>
#2

별도의 render 과정 없이 메타태그 파싱이 진행되기 때문에, 스크립트를 통해 메타태그를 생성한 것은 반영되지 않습니다.