I was asked by a visitor how she could insert meta tags into her web page using the BlueGriffon web editor. Since she didn't specify which meta tag she was talking about, this article will address all possible meta tags, including the common "description", "keywords" and "author" meta tag, which you can easily insert using BlueGriffon's user interface, and others, like "robots", "viewport", etc, which you will have to manually add into the page.
This article assumes that you already have a website, and that you know how to modify it with BlueGriffon. If this is not true, please read How to Create a Website first. If you only need to brush up on how to use BlueGriffon, see the BlueGriffon Tutorial.
If you want to add either the "author", "description" or "keywords" meta tag, you can do so from within BlueGriffon's user interface. For all other meta tags, see to the next section.
Start up BlueGriffon and open your web page.
Click "Format" from the menu, followed by "Page Properties" in the drop-down menu that appears.
A dialog box with the title "Document properties" will pop up. For those who have followed my main BlueGriffon tutorial, you will recognize this dialog box as the one which you use to set the title for your web page.
Enter whatever you want for the "Author", "Description" and "Keywords" fields. Your words
will be inserted into the page by BlueGriffon as the corresponding <meta> tags.
For those not familiar with these particular tags, "author" is used to identify the person who wrote the page,
and "description" is used to provide a short blurb about what the page is about.
The "keywords" tag
is probably useless these days, but back in the 1990s, it was used by the search engines of the day to
figure out what the page was about.
Click the "OK" button when you are done, to dismiss the dialog box. Since these are just "meta" tags, they will have no effect on the visual appearance of the page in a web browser. Save your work and publish it as per normal.
If you want meta tags other than those listed above, you will have to manually insert them into the page.
Before you continue, get the HTML code of the relevant meta tag. For example, you can get the code for the robots meta tag (to control search engines) and the viewport meta tag (to control mobile browsers) in the articles linked to in this sentence.
Switch BlueGriffon to its Source mode. To do this, look for the four buttons "Dual View", "Wysiwyg", "Source" and "Print Preview" near the bottom of the BlueGriffon window (just under your web page). Click the "Source" button.
You should now see the HTML code for the page. Scroll to the top of the document, for example, by hitting the PgUp key on your keyboard until you reach the top.
Somewhere in the first few lines of the page, you should see a section that starts with <head>
and ends with </head> (notice the slash, "/", before "head" for the closing tag). This part of
the code is often referred to as the HEAD section. Although it sounds confusingly similar, it is not the
same thing as the header (or masthead) of your page, where you normally put your logo for your visitors to see.
The latter is just a visual design thing. The HEAD section we are talking about here is part of the HTML itself.
It contains instructions for software like browsers and search engines rather than design elements for your
human visitors, and is thus where the <meta> tags, among other things, go.
Depending on how you have created the page, and what you have inserted there, you may already see a few
<meta> tags present. For example, if you have used my
Layout Wizard to
generate the inital basic layout, you should see multiple lines containing meta tags, including a line like this:
The above is used by mobile-friendly web pages to instruct web browsers on phones and small-screen devices on how it wants them to present the page. (If you are interested in finding out more, it is explained in further detail in my article on how to make your website mobile-friendly. Note that if your page uses a template generated by the Layout Wizard, you do not need to read the article to make your page mobile friendly. All pages generated by that Wizard are, by default, already mobile-friendly.)
And if you have inserted the description and author meta tags mentioned in the first part of this article (or when you created the page), you should see them here too.
To insert a new meta tag, copy and paste the code onto an empty new line immediately after any existing meta tag, and
before the closing </head> tag. That is, your meta tag can be anywhere in the HEAD section,
but it must be in that section and not outside it.
If you are not sure how to create the "empty new line" mentioned above, just go to any existing meta tag line,
move your cursor to the end of that tag (after the closing ">" for that tag, which should also
be at the end of the line as well) and hit the ENTER key. A new line will be inserted.
If you don't have any meta tags at all, create a new blank line just above </head>,
and paste the new tag there. If you are not sure where to add it, since you have no existing meta tags
to act as an example, go back to the previous section and add either the "author" or
"description" tag. An existing meta tag in the HEAD section is helpful, since it is a sort of reference point,
not only making it easier to see where to insert yours, but also giving you an idea of what it should look like.
For those who are still lost, wondering what I meant by "add" or "insert", the "Source" mode works more or less like the "Wysiwyg" mode that you are used to. That is, whatever you type or paste goes into the page at the location where you have placed your text cursor. So just type as you normally would in BlueGriffon. (If you are not pasting code from some other site, but manually typing the meta tag, BlueGriffon may pop up some helpful hints as you type. Don't be intimidated. Just ignore those hints. They are meant to help people who are writing code from scratch, as reminders, and will probably not be useful to you if you're typing code copied from elsewhere.)
When you are done, click the "Wysiwyg" button at the bottom of the page to return BlueGriffon back to its usual mode. Your page should not look any different from before, since meta tags are not displayed by the browser.
Save the page and publish it in your usual way.
Copyright © 2021 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Insert Meta Tags into a Web Page with BlueGriffon
