Generator - meta

Metadata tag

by jinam yu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <form class="p-4">
    <div class="form-group">
      <label>웹사이트 이름</label>
      <input type="text" class="form-control" v-model="site" />
    </div>
    <div class="form-group">
      <label>페이지 제목</label>
      <input type="text" class="form-control" v-model="title" />
    </div>
    <div class="form-group">
      <label>웹사이트 주소</label>
      <input type="text" class="form-control" v-model="domain" />
    </div>
    <div class="form-group">
      <label>내용</label>
      <input type="text" class="form-control" v-model="description" />
    </div>
    <div class="form-group">
      <label>키워드</label>
      <input type="text" class="form-control" v-model="keywords" />
    </div>
    <div class="form-group">
      <label>대표 이미지</label>
      <input type="text" class="form-control" v-model="image" />
    </div>
    <div class="form-group">
      <label>결과</label>
      <textarea class="form-control" rows="12" readonly :value="output"></textarea>
    </div>
  </form>
</div>

CSS

html, body {
  background-color: #f8f9fa;
}

Vue

new Vue({
  el: "#app",
  data: {
  	site: "개발의 모든 이야기",
    title: "웹 개발에 유용한 생성기",
    keywords: "uznam8x, javascript, generator, blog",
    domain: "https://uznam8x.tistory.com",
    description: "지금까지 배우고, 알게 된 것들을 정리할 겸 생성기를 만들어 보았다.",
    image: "image.png",
  },
  computed: {
    output() {
			const tags = [
      	`<meta charset="utf-8" />`,
        `<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />`,
      	`<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />`,
      	`<meta name="robots" content="index,follow" />`,
        `<meta name="googlebot" content="index,follow" />`,
        `<meta name="apple-mobile-web-app-capable" content="yes" /><!-- full screen mode -->`,
        `<meta name="mobile-web-app-capable" content="yes" />`,
        `<meta itemprop="name" content="${this.title}">`,
        `<meta itemprop="description" content="${this.description}">`,
	      `<meta itemprop="image" content="${this.domain}/${this.image}">`,
      	`<meta property="og:type" content="website" />`,
        `<meta property="og:site_name" content="${this.site}" />`,
        `<meta property="og:title" content="${this.title}" />`,
        `<meta property="og:image" content="${this.domain}/${this.image}" />`,
        `<meta property="og:description" content="${this.description}" />`,
        `<meta name="twitter:card" content="summary" />`,
        `<meta name="twitter:site" content="${this.site}" />`,
        `<meta name="twitter:title" content="${this.title}" />`,
        `<meta name="twitter:description" content="${this.description}" />`,
        `<meta property="twitter:image" content="${this.domain}/${this.image}" />`,
        `<meta name="apple-mobile-web-app-title" content="${this.site}">`,
        `<meta name="application-name" content="${this.site}">`,
        `<meta name="title" content="${this.title}" />`,
        `<meta name="description" content="${this.description}"...