Head¶
Example of a typical head
. This part contains meta data about your Web page and imports CSS stylesheets, JavaScript libraries.
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Comma-separated keywords">
<meta name="description" content="Brief description">
<meta name="author" content="You">
<title>Title of your page</title>
</head>
<body>
<!-- Visible content. -->
</body>
</html>
To help the browser display the page, we should add a <!DOCTYPE>
declaration before the <html>
tag.
<!DOCTYPE html>
We can specify the language and location of the Web page with the lang
attribute. The first value is the language code, the second the country code.
<html lang="de-DE">
<meta charset="UTF-8"> <!-- character set -->
The viewport
information is important to render your page good on different screen sizes (laptop, mobile devices):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- refresh web page every 30 seconds -->
<meta http-equiv="refresh" content="30">
Refreshing a page through the meta tag is probably more useful for development or experimental pages. There are more sophisticated methods for dynamic web pages.
Property¶
Properties are used to define structured information, which can be accessed by other services, for example when you share a link via a messenger or social media.
<meta property="og:title" content="writing an own website" />
<meta property="og:type" content="website" />
<meta property="og:image" content="img/share_banner.jpg" />
<meta property="og:url" content="https://dev.mattiskuhn.com/webschreiben" />
<meta property="og:description" content="Material for the course »Writing an own website«." />
<meta property="og:site_name" content="writing an own website" />
<meta property="twitter:card" content="images/share_banner_large.jpg" />
<meta property="twitter:url" content="https://dev.mattiskuhn.com/webschreiben" />
<meta property="twitter:title" content="writing an own website" />
<meta property="twitter:description" content="Material for the course »Writing an own website«." />
<meta property="twitter:image" content="img/share_banner.jpg" />
The properties defined will lead to a different preview of your page when you share it. See the difference on the following pages (and inspect them if you’re interested.)
Image Dimensions
Facebook recommends images of at least 1200 x 630px (landscape format). Other pages/ services use a square format instead, so it’s recommended to use images of at least 1200 x 1200 px. Then it will be cropped by facebook to 1200 x 630 px, so make sure that your square image looks good if it’s cropped to that ratio.