Once you’ve got your website up and running and sorted out all the initial settings, the next

The thing on your agenda should be to get started on creating pages. 

When it actually comes to putting a page together, the first step is to figure out what theme you want for it. After that, you set up the basics, like the page’s title and description. Once you’ve got a handle on the theme, you work out how the article’s structure will look and then get down to finalizing the content of the page. Furthermore, if you’re keeping SEO in mind, striving for high quality content is key.

Related Article: SEO Strategies for Beginners 4/Content Quality

This round, stepping into the shoes of an SEO consultant, I’m going to break down “SEO for Beginners: Practical Steps 2 ‘Start by Taking Action!!'”. If you’re totally new to this, I recommend checking out “What is SEO? Unpacking SEO Strategies with ChatGPT [SEO Strategies in the New AI Era of 2023]” before you dive into this page.

What is Page Structure (Article Structure)? 

In website design, page structure is essentially the blueprint for crafting a page, often referred to as the article structure. This blueprint serves as the groundwork, helping to make decisions on aspects like “where headings should be positioned on the page” or “where to insert text data”.

Three Basic Elements of a Web Page 

A web page is fundamentally composed of the following three basic elements.

• Header
• Main Content
• Footer

What is a Header?

Generally, a header is about elements placed at the start of a document. When we talk about web pages, the header is the section at the top where you find the site logo and menu all in one spot. Since it’s what visitors first lay their eyes on when they open a page, it’s often called the First View.

The design and elements in the header are usually set in stone, showing the same thing on every page of the website. This consistency helps visitors recognize, “Ah, this is the site I always come to.” Plus, it helps guide visitors to where they want to go by putting links to different pages right in the menu. Commonly, you’ll find the following in a header

• Site title or logo
• Site’s catchphrase
• Page title
• Navigation
• Menu consolidating internal links to desired pages
• Site-wide search box

What is Main Content? 

The Main Content of a web page is the heart of the page, mainly made up of elements like headings and text. Unlike the header and footer, where designs and elements are consistent across the site, the Main Content changes with each page.

Usually, when you’re building a web page, your main focus is on crafting the Main Content. The elements that make up the Main Content are

• Main headings
• Timestamps
• Lead paragraphs
• Subheadings
• Minor headings
• Main text
• Images
• Internal and external links

What is a Footer 

Generally speaking, a footer means the elements placed at the bottom of a document. Similarly, on web pages, the footer is the section right at the bottom, sitting below the Main Content.

Just like the header, the design and elements in the footer are set to remain the same, so you’ll see similar designs and information across different pages. Typically, the footer includes elements like:

• Links to media information or company overview pages
• Privacy policy and disclaimer
• Link to the contact form
• Copyright information

Because the footer is positioned at the very bottom of web pages, it’s less likely to catch the eyes of site visitors. Instead of leading to interesting internal links, it frequently houses essential details for the website’s operation, such as media or corporate information.

The Relationship Between Websites and HTML 

To show a website or page in a browser, we use a markup language known as HTML (Hyper Text Markup Language)

Related Article: What is HTML? Explaining the Steps from Creating a Homepage to Publishing

A markup language is a tech tool that tags text to make it understandable to computers. By employing this markup language, HTML, we give commands like “this text is a heading” or “this text is the main body”, enabling web pages to be displayed in a browser.

HTML features methods to assign specific sections for the header, main content, and footer. These instructions are crafted using something called tags, which tag the text and give out commands.

For example, to specify the header section, you write as follows

<header>

~

</header>

This indicates that elements enclosed within “<header>” and “</header>” are identified as the header. The approach to outlining sections for the main content and footer is similar to that for the header. To begin with, the main content is defined as follows

<main>

~

</main>

The method to specify the footer is as follows.

<footer>

~

</footer>

Creating New Pages and Page Structures 

When creating a new page, decide on elements like the following in advance

• Page title
• Meta description
• Lead paragraph
• Headings
• Main text

Among these, the following elements are specified within the head in HTML

• Page title
• Meta description

On the other hand, the following elements are specified within the main

• Lead paragraph
• Headings
• Main text

Explaining the Page Title 

The page title signifies the theme of the web page and is also known as the title tag. It serves the purpose of telling search users and Google “what the theme of the page is.

How to Set Up the Page Title 

When specifying the page title in HTML, it is written inside the head as follows

<head> 

<title>~</title> 

</head>

By placing the text you want into “~”, you can establish the page title. It’s important to understand that the head tag holds information meant for search engines and isn’t visible in the page’s content, whereas the header tag is for site visitors and appears in the page’s header. Be cautious not to mix up head and header because their names are so alike.

• head: A tag for search engine information, not displayed within the page
• header: A tag for site visitors, displayed as the page’s header

The Importance of Page Titles 

The page title fundamentally represents the theme of the page, positioning it as a key component for SEO. For example, if you conduct a Google search using keywords like “Tokyo” and “restaurant,” pages themed around these terms, offering sought-after information, and containing high-quality content will rank at the top of the search results. To target a top spot in search results, incorporating keywords such as “Tokyo” and “restaurant” in your page title is advisable.

Points to Note for Page Titles

Including keywords in page titles can greatly affect SEO. Yet, because of the significant impact of the page title on SEO, you should avoid the following actions

• Stuffing with many keywords
• Unnecessarily repeating the same keywords
• Adopting titles unrelated to the page content
• Using the same page title across multiple pages

Ideally, you should limit keywords to around three words. Having more keywords widens the theme, making it challenging to address comprehensively on a single page.

Also, recklessly repeating the main keyword in the page title several times can puzzle both search users and Google. Moreover, using the same keyword too freely might lead Google to consider it spam.

Steer clear of titles that mislead site visitors by not aligning with the page content.

How to Decide on Page Titles 

When deciding on page titles, consider the following

• Keep it under 30 characters
• Place the main keyword towards the left
• Match the title with the page content

Keep the page title to fewer than 30 characters. This is because, on Google Chrome searches on a computer, only up to 30 characters of the title are shown in the search results. Any characters beyond this limit are replaced with an ellipsis “…”, which could reduce the information provided to search users and lower the click-through rate.

Moreover, page titles are considered more important the further to the left the keywords. For instance, if you’re writing an article about top-notch restaurants in Tokyo, terms like “Tokyo” and “restaurant” are your key keywords. 

Consider a page title like “Hot and trending! Introducing recommended restaurants in Tokyo!!” 

Here, the crucial keywords “Tokyo” and “restaurant” are towards the end. To give precedence to the main keywords, you could revise it to: 

“Top 3 Recommended Restaurants in Tokyo! Introducing Popular Famous Stores!!” 

While this is merely an example, such strategic thinking is essential in selecting page titles.

Explaining Meta Descriptions 

A meta description is text that offers a summary of what a web page is about. The text crafted for a meta description appears beneath the page title in Google search results, where it’s referred to as a snippet.

How to Set Up a Meta Description 

To set a meta description in HTML, it’s included within the meta tag in the head section. By populating the “～” portion with text, you finalize the description setup.

<head>

<meta name=”description” content=”～“/>

</head>

The Importance of Meta Descriptions 

Usually, search users look at the page title and meta description text to choose which page to visit, affecting the click-through rate from search results.

For instance, if your site’s page ranks second for certain keywords, and the first-ranked page lacks a meta description, it’s highly likely that users will opt for the second-place page, seeing it as offering a clearer overview.

Points to Note for Meta Descriptions 

Although meta descriptions play a crucial role in navigation on search engines, their setup does not directly influence SEO. However, crafting a meta description can boost click-through rates. Failing to do so might result in Google creating an awkward sentence, potentially lowering click-through rates and adversely impacting SEO.

How to Write a Meta Description 

When writing a meta description, consider the following

• Keep it to about 125 characters
• Include important elements in the first half
• Ensure the content matches search needs
• Align with the page content

The character count for the description, similar to the page title, should be kept to around 125 characters due to device display constraints.

Moreover, precisely describing content that aligns with search needs can grab the attention of search users. For example, if your site’s page ranks high in search results for keywords like “Tokyo” and “restaurant,” users are probably looking for dining options in Tokyo. Therefore, craft a meta description that reflects the page content, like: 

This article highlights popular and recommended restaurants in Tokyo, detailing classic menus, prices, and locations. We’ve also included a handy map of recommended eateries by area, ideal for tourists or business visitors to Tokyo..

Explaining Headings 

Headings are utilized to structure the elements of each section on a page. Broadly, the types of headings include

• Main heading
• Subheading
• Minor heading

When deciding on a page’s layout, a primary consideration is “what kinds of headings to include within the page.”

Related Article: What Are Heading Tags? An Explanation of the Use and Role of h1 to h6 in SEO

How to Set Up Headings 

When specifying headings in HTML, h tags are used within the main content section.

<main>

<h1>～</h1>

<h2>～</h2>

<h3>～</h3>

<h4>～</h4>

</main>

The number that follows the “h” in the tag represents the size of the heading, with h1 being the main heading, h2 the subheading, and so forth, showing the hierarchical significance of each heading. As a rule, headings are organized in ascending numerical order on the page.

The Importance of Headings 

Headings are vital in defining a page’s structure. They arrange the elements of the page to enhance comprehension. Even if the content is outstanding, an improper heading structure can obstruct its delivery to visitors. Keywords placed within h tags are communicated to Google as “important elements on this page,” requiring thoughtful placement and phrasing.

Points to Note for Headings

When constructing a heading structure, there are several important considerations to keep in mind. Common points include

• Using headings for design purposes
• Skipping numbers in h tags
• Using multiple h1 tags on a single page
• Cramming keywords into headings indiscriminately

Headings are designed to structure page elements, so they should not be used just for styling. For instance, it’s common to see h tags used to emphasize particular sentences. Additionally, an incorrect sequence of h tags can make an article hard to follow. It’s better to link closely related elements or place elements within h2 under h3 for an improved heading structure.

Furthermore, because h tags have a moderate SEO impact, there’s a risk of misusing headings to highlight keywords, which might attract penalties from Google.

How to Decide on Headings 

When deciding on headings, please ensure to

• Include elements highly related to the page title
• Consider the relationship between headings for arrangement

Headings effectively break down the page title into related components, so ideally, they should include elements that are closely connected to the page title. Additionally, the relationship between elements selected for headings should be considered when deciding their arrangement.

For example, for a page titled “Top 3 Recommended Restaurants in Tokyo! Introducing Popular Famous Stores!!”, the headings could be organized as follows

<h1>Tokyo’s Top 3 Recommended Restaurants! Introducing Popular Famous Shops!!</h1>

*Lead paragraph

*Table of contents

<h2>Top 3 Restaurants in Tokyo</h2> 

<h3>1st Place: Restaurant A</h3> 

<h3>2nd Place: Restaurant B</h3> 

<h3>3rd Place: Restaurant C</h3> 

<h2>Recommended Famous Shops in Shibuya</h2> 

<h3>1st Place: Restaurant D</h3> 

<h3>2nd Place: Restaurant E</h3> 

<h3>3rd Place: Restaurant F</h3> 

<h2>Recommended Famous Shops in Shinjuku</h2> 

<h3>1st Place: Restaurant G</h3> 

<h3>2nd Place: Restaurant H</h3> 

<h3>3rd Place: Restaurant I</h3> 

<h2>Conclusion</h2>

After setting up this structure, move on to filling in the lead paragraph, main content, and images as suited for each section, thus completing the web page.

Common Questions About Page Structure 

Here we have compiled some frequently asked questions about page structure.

Q: What is a page layout plan? 

A: This document is related to the planning of page structure.

It specifically serves as a guide on what elements should be present on a page, guided by headings. With SEO in mind, incorporating keywords within the page is vital. Thus, identifying and choosing the right keywords for these headings is necessary. Additionally, by determining the elements to be covered on the page in advance, it aids in a streamlined writing process by pre-outlining the flow of the discussion.

Q: What if elements overlap with existing articles when planning page structure? 

A: You might have to look for a new perspective or connect sections that overlap internally for sentences that cover the same ground. It’s okay to include essential elements from existing content, but make sure to rephrase instead of copying directly.

Summary

A web page consists of three sections: header, main content, and footer. The main effort in publishing new articles goes into developing the main content. Yet, deciding on other aspects such as page titles and meta descriptions is equally important. Knowing the function of each component will assist you in efficiently navigating the page layout and creation process.

Author Profile

International Web Consultant Paveena Suphawet

A trilingual professional in English, Thai, and Japanese, she has numerous achievements in international SEO. She studied the latest IT technologies at Assumption International University, Thailand, and majored in International Business at the University of Greenwich, UK. Following her tenure at ExxonMobil’s Thai branch, she became a key member of Admano from its establishment.

Return to the top of Japan SEO