How To Optimize WordPress Website Template For SEO

When you use WordPress to create a website, you should want to make your website rank higher in google search results. To achieve this goal, you need to make search engine optimization (SEO) on your website correctly. This article will tell you some tips about how to make the correct configuration in your website to improve your website page rank. But the number one factor of SEO is your website content. Good content can drive good traffic to you.

1. Use Only One Html H1 Tag In Web Page.

1. The h1 tag wrapped content is very important to Google search engine, the google spider will treat Html h1 tag wrapped content as important as the Html title tag wrapped content.
2. So for a regular web page, you had better have only one h1 tag on your web page. If you find there are more h1 tags in one web page, you had better change the WordPress template to change it to use only one h1 tag.
3. If you use WordPress to build the website, the Html h1 tag commonly exists in the article index page and content page.

1.1 Find Web Page h1 Tag Count.

1. Follow the below steps to find out how many h1 tags exist on your web page use google chrome.
2. Browse a webpage in the google chrome web browser.
3. Right-click the web page, then click View Page Source menu item in the popup menu list.
4. It will open a new tab window to display the webpage Html source code.
5. Then click the Customize and control Google Chrome button at chrome browser top right corner, then click Find… menu item to open the search text box.
6. Input h1 in the search box then you can find the h1 tag count in the source code.

1.2 Change h1 Tag In WordPress Template.

1. This article will edit the WordPress Stargazer template as an example.
2. Login to the WordPress admin console.
3. Then click Appearance —> Editor menu item in the left panel.
4. Then it will display the Edit Themes page in the right panel.
5. Select the Stargazer theme in the Theme drop-down list ( at top right ) to edit.
6. WordPress article index and content web page template is saved in content —> content.php (content-page.php) file in Theme Files PHP file list. Click the content.php (content-page.php) file and edit it’s source code in the center frame.
7. There are two parts in content.php, the top part is used to generate WordPress article index page, the bottom part is used to generate article content page.
8. To change the article index page h1 tag, change the below code.

   <?php if ( is_singular( get_post_type() ) ) : // If viewing a single post. ?>
   <header class="entry-header">
   <h1 <?php hybrid_attr( 'entry-title' ); ?>><?php single_post_title(); ?></h1> 
   
       ......
   </header><!-- .entry-header -->
       ......
   <?php else : // If not viewing a single post. ?>

9. To change the article content page h1 tag, change the below code.

   <?php else : // If not viewing a single post. ?>
   <?php get_the_image( array( 'size' => 'stargazer-full', 'order' => array( 'featured', 'attachment' ) ) ); ?>
   <header class="entry-header">
   <?php the_title( '<h1 ' . hybrid_get_attr( 'entry-title' ) . '><a href="' . get_permalink() . '" rel="bookmark" itemprop="url">', '</a></h1>' ); ?>......
   
   </header><!-- .entry-header -->
   ......
   <?php endif; // End single post check. ?>

10. Finally do not forget to click the Update File button to save all the changes.

2. Custom WordPress Template CSS Style.

2.1 Change Html Pre Style.

1. If your webpage contains programming ( java ) source code and you want to emphasize display the source code, you need to contain the java source code text in Html pre tag.
2. Generally, if the source code line is too long, it will display a horizontal scroll bar in the pre tag automatically.
3. If you do not need the horizontal bar and want the source code line wrap automatically to display the complete source code line, you can change the Html pre tag’s CSS style with the below actions.
4. Login to the WordPress admin console.
5. Click Appearance —> Customize menu item on left, then it will show a sub-menu list on the right.
6. Click the Additional CSS menu item on the submenu list, and input below CSS style code in the input box. Please note the word-wrap CSS code, that code control whether the pre tag breaks the text line or not.

   pre,.form-allowed-tags code {
   display: block;
   font-family: monospace;
   padding: 9.5px;
   margin: 0 0 10px;
   font-size: 13px;
   line-height: 1.42857143;
   color: #333;
   
   /* word-break: break-all;*/
   word-wrap: break-word;
   
   white-space: pre-wrap;
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   border-radius: 4px;
   }

7. Then click Publish button at the top right to make the change take effect.
8. Now you can find Html pre tag will show the java source code completely by wrapping the text line without a horizontal scroll bar.

2.2 Change Stargazer Top Navigation Menu Size.

1. By default, the top navigation menu width in the Stargazer template is fixed to the article content width. If your website has a lot of menu items, the menu items will be displayed in multiple lines.
2. To make the navigation menu width wider. You can add additional CSS style by customizing the Stargazer template CSS code.
3. Login to the WordPress admin console.
4. Click Appearance —> Customize menu item on left.
5. Click the Additional CSS menu item and input the below CSS style code in the input box.

   .custom-background #container > .wrap {
   max-width: 1975px;
   margin-top: 25px;
   margin-bottom: 25px;
   }
   
   #menu-primary > .wrap,
   #footer > .wrap {
   max-width: 1975px;
   padding-left: 25px;
   padding-right: 25px;
   }