← Назад к Apps

Meta tag preview

Предпросмотр meta-тегов страницы. Позволяет увидеть, как будет выглядеть сайт в поиске.

▶ Запустить

👁 9

const root = container;

root.innerHTML = `
  <div style="font-family:monospace;">
    <h2>Meta Preview</h2>

    <input id="title" placeholder="Title" style="width:100%;">
    <input id="desc" placeholder="Description" style="width:100%; margin-top:5px;">

    <div id="preview" style="margin-top:15px; border:1px solid #00ff9c; padding:10px;">
      <h3 id="pTitle"></h3>
      <p id="pDesc"></p>
    </div>
  </div>
`;

const title = root.querySelector("#title");
const desc = root.querySelector("#desc");

title.oninput = () => root.querySelector("#pTitle").textContent = title.value;
desc.oninput = () => root.querySelector("#pDesc").textContent = desc.value;