codenewbies-html-template/template.html at main · MarkusEicher/codenewbies-html-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- HTML5 meta tag section -->

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO title tag section

    See https://www.vioma.de/de/wiki/online-marketing/seo/meta-tags/
    (in German) for more information

    The title tag in the head of an HTML page is an important factor for SEO ranking.
    While it is not marked with the keyword <meta...> in the HTML head section, it is
    nonetheless considered to be an important part of the SEO OnPage Optimization task.
    The content of the title tag is the part of a search result that is displayed in
    blue and bold letters on the search result page of Google and other search engines.
    We should try to place the most important keywords into the title tag. The title
    tag should be about 55 to 60 characters long. Our goal is to keep it at about 40
    chars regarding our mobile first approach. We try to place the CTA and keywords at
    the start of the title. Goal is not to have our title concatenated with "..." in
    search result snippets. On the other side, the title is important for the ranking
    on other search engines than Google, which allow title tags to be longer as 60
    characters. If there is no suitable way to place the keywords into the 40 chars
    at the beginning of the title tag, then we aim at placing it as early as possible
    to make sure that the tag still makes any sense at all.

    These are the SEO Search Engine Optimization guidelines we try to keep up to when
    defining the title tag:

    1. Keyword placement

        We try to place the most important keywords with whom we want to be ranked
        high in the search results in the title tag. We try to place it as early as
        possible with regard to the fact that the tag still needs to make sense. The
        tag may not be abused as a list of keywords. It must be our slogan and lead
        our customers to our site. Keywords in title tags that the user has searched
        for will get boldened by search engines, what has a positive effect on the
        user, rendering a good CTR Click Through Rate for our sites.

    2. Legibility

        While it is intriguing to place as many keywords into the title tag as possible,
        we want to make sure, that we have a title that makes a real sentence and leads
        the customer to click and bring him to our site.

    3. Fullfillment of the search term with the page main heading

        We want to give the customers the feeling of having found exactly what they
        searched for. This means that our landing page for the search result should match
        the search terms as close as possible. We try to achieve this with the main page
        as well as with any sub pages.

    4. Include brand, company or site name in the title tag

        We want to make sure, that our brand, our company name or the name of the project
        is part of the title tag. If these terms are not a part of the keywords we want
        to be ranked high in search results, then we add them to the end of the title
        tag, separated by a hyphen.

    5. Include a CTA Call To Action and triggers in the title tag

        Terms like "Buy now", "Order here", or "Downlaod for free" can help to lead customers
        to our site. We use square brackets to emphasize CTA's in the title tag. Terms like
        "Free", "Download", "View", "Buy", "Book" "Get Help" in combination with the term
        "now" can help to trigger the customer to click the link to our site on the result
        page of the search engine he is on.

    6. Include chronological information in the title tag

        If the content of the site is sensitive for being actual, like in "Top 10 tools [2022]",
        or "Best restaurants in Zurich [2022]", we try to include the year or month in the title
        tag in square brackets to emphasize the actuality of the site data.

    7. Include geolocational or regional information in the title tag

        If the content of the site is sensible for being relevant to location, we try to include
        localizational information in square brackets into the title tag. -->

    <title>Markus Eicher Home</title> <!-- Optimize me!!!-->


    <!-- HTML5 SEO meta tag section

    See https://www.vioma.de/de/wiki/online-marketing/seo/meta-tags/
    (in German) for more information

    The following tag "description" is important for CTR but less important
    for SEO Ranking. The content of the description meta tag is the part of
    a search result that is displayed in black and regular letters on the search
    result page of Google and other search engines. There is no common standard for
    the length of description meta tag. We can assume, that it is something about 150
    characters that are available for us. If the description tag is too long for a
    certain search engine, then it will be truncated like the title tag with dots "...".
    We try to keep it at about 100 to 120 characters because this is about the max
    amount of data that will be available without truncation on mobile viewports. Search
    engines are not always paying attention to this tag. They might decide to use other
    parts of the page to display in their search result snippets on result pages. We
    try to follow the so called AIDA principle:

    A = Attention
        We try to use alphanumeric characters and not only letters. numbers and allowed
        HTML symbols get attention from the customers. Things like prices, year figures,
        statistical data, prices and stock numbers can be used. There are also certain
        special HTML symbol characters that are accepted by most of the search engines
        and that can be used. They will be displayed correctly in search results. A list
        of most of these can be found under the link below. Terms like "free", "top" or
        "download" gain attention from the customers and can be used for the description.

        HTML symbols link: https://www.vioma.de/de/wiki/tools/html-sonderzeichen/ (in German)

    I = Interest
        This is very similar to the previous topic but tries to point to our USP Unique Selling
        Points. We can try to mention how many happy customers we have, what the average rating
        of our product or service is or where we got mentioned or quoted by relevant sources.

    D = Desire
        To stimulate the desire of our customers, we try to describe the "aura", "image" or "value
        proposition" our product or service is promising to our customers. Terms like "relaxing",
        "green", "free delivery", "money back guarantee" can help to bring users to klick on our
        links.

    A = Action
        This part of the description tag should be at the end of the allowed length of the tag. Here
        it might be the best place to use allowed special HTML symbols to emphasize a Call To
        Action CTA. We can use an arrow like "=> download now for free" or "=> free registration".
        We want the customer to see the possible action he can take right away in the snippet of
        the search engine result page.

    The following example of a meta description tag tries to illustrate this principle: -->

    <meta name="description" content="OUR 100 CHARACTERS DESCRIPTION GOES HERE" /> <!-- Optimize me!!!-->

    <!-- The following tag "keywords" is mostly ignored today. Google does not
    display these keywords on its search results. The only advantage for our
    customers is, that they may find our site easier, if they search inside their
    bookmarks for these terms. -->

    <meta name="keywords" content="OUR KEYWORDS GO HERE" /> <!-- Optimize me!!!-->

    <!-- The following tag "robots" is used to lead crawlers, robots and search
    engines to behave as close to the way we want them to. It may only contain well
    known terms which may be separated by commas. We should keep in mind that using
    'content="noindex"' needs to be used with caution, because Google will treat sites
    that use this entry likewise as if they have 'content="nofollow"'. This might cost
    us linkpower (linkjuice). Nonetheless we can use it on login-pages, the shopping
    cart or pages with search results. Since about 2019 there are new directives available.
    With 'content=max-snippet:[100]"' we can instruct the robots to display not more than
    the number of characters defined inside the brackets. This can help to have a consistent
    display of the description, but it also might have negative influence on it, if the
    search engine is using its own description instead of the one we defined with the
    description tag. We try to not use this, if not strictly necessary. The directive
    'content="max-video-preview:[30]"' instructs the search engine to reduce the length of
    video previews in the search results to the amount of seconds defined inside the brackets.
    The last of the new directives we care about is 'content=max-image-preview:[standard]'.
    This lets us tell the search engine how to display images when they appear in search
    results. 'none' would instruct them to not display images at all and this is no option
    for us. With 'standard' we should be good, may be trying to use 'large' on wider
    viewports. -->

    <meta name="robots" content="OUR ROBOTS TAGS GO HERE" /> <!-- Optimize me!!!-->


    <!-- FACEBOOK OGP meta tag section

    See https://www.vioma.de/de/wiki/online-marketing/seo/meta-tags/
    (in German) for more information

    The next family of meta tags are the ones for social media sharing. We concentrate
    most on Facebook's Open Graph Protocol (OGP) meta tags and on the Twitter meta
    tags. The OG meta tags are pretty important, because they are used by some other
    big platforms like XING, LinkedIn and Reddit to display search results on their sites.

    The tag 'property="og:title" content="YOUR SITE CONTENT GOES HERE"' defines under
    which title our site is displayed in links shared on Facebook and other platforms
    using OGP. We try to keep this rather short but descriptive. -->

    <meta property="og:title" content="OUR SITE TITLE GOES HERE" /> <!-- Optimize me!!!-->

    <!--The tag 'property="og:image" content="LINK TO YOUR PICTURE"' defines which
    preview picture is displayed. This is very relevant to us because it is the main
    point of attraction in a linked page on Facebook. The ratio of the picture should
    match the 1.91:1 aspect and have a resolution of at least 600x314px. We use a
    resolution of 1800x942px. -->

    <meta property="og:image" content="LINK TO YOUR PICTURE GOES HERE" /> <!-- Optimize me!!!-->

    <!--The tag 'property="og:type" content="website"' defines the type of content that
    is displayed. For us the content type website is most relevant. There are other types
    that might be set. See https://ogp.me/#types for more information. -->

    <meta property="og:type" content="website" /> <!-- Optimize me!!!-->

    <!--The tag 'property="og:url" content="YOUR URL GOES HERE"' defines the exact URL
    that will be displayed and linked on Facebook. This should normally be the original
    URL. Facebook is caching this URL, so it will have lesser impact on the traffic on
    our site. -->

    <meta property="og:url" content="OUR URL GOES HERE" /> <!-- Optimize me!!!-->

    <!--The tag 'property="og:site_name" content="OUR BRANDNAME OR DOMAIN GOES HERE"'
    defines the tag that Facebook is displaying along with the Title and the description
    of the linked page. It is kind of the short name of the URL eg OURNAME.COM or
    OURBRANDNAME as a single entry. -->

    <meta property="og:site_name" content="OURBRANDNAME GOES HERE" /> <!-- Optimize me!!!-->

    <!--The tag 'property="og:description" content="OUR SHORT DESCRIPTION GOES HERE"' defines
    the same as the meta tag "description" above but may be longer than the standard tag
    "description" because Facebook handles this by itself. We will always try to have this
    value consistent with the one we use as standard "description", but may alter it for marketing
    reasons to have a little more words to display our goals or content on social media links. -->

    <meta property="og:description" content="OUR SHORT DESCRIPTION GOES HERE" /> <!-- Optimize me!!!-->


    <!-- TWITTER meta tag section

    See https://www.vioma.de/de/wiki/online-marketing/seo/meta-tags/
    (in German) for more information

    In this section we handle the way our linked pages are displayed in tweets and on Twitter.
    Twitter uses so called cards to display linked sites.

    The tag 'name="twitter:card" content="summary_large_image"' defines what content
    lies behind the link Twitter displays inside a tweet. For websites we use either "summary"
    or even better "summary_large_image". There are other content types like "app" for applications
    or "player" for videos that could be used appropriately. -->

    <meta name="twitter:card" content="summary_large_image" /> <!-- Optimize me!!!-->

    <!-- The tag 'name="twitter:title" content="SEO optimized title description goes here"' defines
    what Twitter will show in BOLD letters as description inside of linked sites in a tweet.
    We try to be consistent with out main title tag in the header section of the page. Can be
    altered to have more reaction or as CTA. -->

    <meta name="twitter:title" content="SEO optimized title description goes here" /> <!-- Optimize me!!!-->

    <!-- The tag 'name="twitter:description" content="SEO optimized site description goes here"'
    defines what Twitter will show in REGULAR letters as description inside of linked sites in
    a tweet. We try to be consistent with out main description tag in the header section of the
    page. Can be altered to have more reaction or as CTA. -->

    <meta name="twitter:description" content="SEO optimized site description goes here" /> <!-- Optimize me!!!-->

    <!-- The tag 'name="twitter:image" content="LINK TO YOUR PICTURE GOES HERE"' sets the path
    to the image Twitter uses to display when linking to a site inside a tweet. Very important
    because it is the eyecatcher for the users. Should be between 144x144px minimal and 4096x4096px
    maximal. Can not be bigger than 5MB and schould be at a ratio of 1.91:1. We use 1600x838 as
    our standard for these pictures. -->

    <meta name="twitter:image" content="LINK TO YOUR PICTURE GOES HERE" /> <!-- Optimize me!!!-->

    <!-- The tag 'name="twitter:site" content="@OUR-TWITTER-ACCOUNT GOES HERE"' sets the path
    our Twitter profile. Used by Twitter to connect the linked site to our Twitter account. -->

    <meta name="twitter:site" content="@OUR-TWITTER-ACCOUNT GOES HERE" /> <!-- Optimize me!!!-->

    <!-- The tag 'name="twitter:creator" content="@OUR-TWITTER-CREATOR-ACCOUNT GOES HERE"' sets
    the path the Twitter account that created the tweet. Used by Twitter to connect the linked
    site to the Twitter account of the person that created the tweet. -->

    <meta name="twitter:site" content="@OUR-TWITTER-CREATOR-ACCOUNT GOES HERE" /> <!-- Optimize me!!!-->


</head>
<body>
    <p>Markus Eicher Home</p>
    <h1>Links</h1>
    <a href="projects.html" title="Markus Eicher's Projects">Projects</a>
    <a href="aboutme.html" title="About Markus Eicher">About Me</a>
    <a href="https://logbook.milohockey.online" target="_blank" title="Markus Eicher's Blog on Hashnode">Hashnode Blog</a>
    <a href="https://github.com/MarkusEicher" target="github" title="Markus Eicher's Github Page">Github Page</a>
</body>
</html>