SERP Preview

index.html

<h2>Metadata:</h2>
<label for="url">URL:</label>
    <input type="url" name="url" id="url" onkeyup="setUrl();">
    <br>
<label for="title">SEO Title:</label>
    <input type="text" name="title" id="title" onkeyup="setTitle();">
    <br>
<label for="title">Meta Description:</label>
    <input type="text" name="description" id="description" onkeyup="setDescription();">
    <br>

<h2>Google SERP Preview:</h2>
<div class="serp-preview">
    <div id="serp-title">No title to preview</div>
    <div id="serp-url">https://no.url.to.preview/<span class="serp-arrow"></span></div>
    <div id="serp-description">No description to preview</div>
</div>

script.js

function setTitle() {
    var inputBox = document.getElementById('title');
    var title = inputBox.value;
    if(title.length > 70) {
        title = inputBox.value.substring(0, 70) + ' ...';
    }
    previewTitle(title);
}

function setDescription() {
    var inputBox = document.getElementById('description');
    var description = inputBox.value;
    if(description.length > 150) {
        description = inputBox.value.substring(0, 150) + ' ...';
    }
    previewDescription(description);
}

function setUrl() {
    var inputBox = document.getElementById('url');
    var url = inputBox.value + '<span class="serp-arrow"></span>'
    previewUrl(url);
}

function previewDescription(description) {
  document.getElementById('serp-description').innerHTML = description;
}

function previewUrl(url) {
  document.getElementById('serp-url').innerHTML = url;
}

function previewTitle(title) {
  document.getElementById('serp-title').innerHTML = title;
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

serp-preview.markdown

SERP Preview

A Pen by Mateusz Micał on CodePen.

License.

style.css

    body {
      font-family: Lato;
    }

    label {
      display: inline-block;
      width: 180px;
      margin-bottom: .625em;
    }

    .serp-preview {
      width: 600px;
    }

    .serp-arrow {
      border-bottom-color: rgb(0, 102, 33);
      border-bottom-style: solid;
      border-bottom-width: 0px;
      border-left-color: rgba(0, 0, 0, 0);
      border-left-style: solid;
      border-left-width: 4px;
      border-right-color: rgba(0, 0, 0, 0);
      border-right-style: solid;
      border-right-width: 4px;
      border-top-color: rgb(0, 102, 33);
      border-top-style: solid;
      border-top-width: 5px;
      color: rgb(128, 128, 128);
      cursor: default;
      font-family: arial, sans-serif;
      font-size: 11px;
      font-weight: bold;
      height: 0px;
      position: absolute;
      line-height: 27px;
      margin-left: 3px;
      margin-top: 6px;
      text-align: center;
      user-select: none;
      visibility: visible;
      white-space: nowrap;
      width: 0px;
    }

    #serp-title {
      color: rgb(26, 13, 171);
      cursor: pointer;
      font-family: arial, sans-serif;
      font-size: 18px;
      font-weight: normal;
      line-height: 21.6px;
      text-align: left;
      text-decoration: none;
      visibility: visible;
      white-space: nowrap;
    }

    #serp-url {
      color: rgb(0, 102, 33);
      font-family: arial, sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: normal;
      line-height: 16px;
      text-align: left;
      visibility: visible;
      white-space: nowrap;
    }

    #serp-description {
      color: rgb(84, 84, 84);
      font-family: arial, sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 18.2px;
      text-align: left;
      visibility: visible;
      word-wrap: break-word;
    }