CSS snippet for debugging meta descriptions and Open Graph tags with class

meta-debug.css

head, meta[name="description"], meta[property^="og:"] { display: block }
head {
  position: relative;
  z-index: 9999;
  font: 21px/1.4 Didot;
  color: #444;
  -webkit-hyphens: auto;
  padding: 2em;
  background: #fff;
  -webkit-font-smoothing: subpixel-antialiased;
}
meta[name="description"]::before {
  content: attr(content);
  display: block;
  max-width: 80ex;
  padding: 1em 1.2em;
  border: 3px double #ccc;
  margin: auto auto 2em;
}
meta[property^="og:"]::before {
  content: attr(property);
  font-weight: bold;
  display: inline-block;
  width: 19%;
  text-align: right;
  margin-right: 2%;
  vertical-align: top;
}
meta[property^="og:"]::after {
  content: attr(content);
  display: inline-block;
  width: 79%;
}

screenshot.md

Here’s the result on http://www.hotelleriejobs.com/