Sarmad Gardezi

Sarmad Gardezi

a freelance developer

How to Use Yoast SEO Meta Tags in Static HTML Page

I

t’s clear that a homepage serves a number of different purposes. Among others, it is your welcoming page and your main user guide for your website. I promise to devote another post to that. There is, however, one purpose that I feel a homepage does not have, and that is ranking for keywords other than your business name or brand. We have had a number of email questions about that, so it is something certain webmasters or website owners think about. The question is: should they?

 

Creating a Custom HTML page in Wordpres

Sometimes we need to add some different page style in wordpress so we need some different style html page in wordpress website. How you can do First you need to go to Cpanel –> Public_html -> wp-content -> themes -> (yourtheme folder) & create a new page as anyname.php 

After creating this page open this page as code editor so that we can write some code above the code. You can also paste the custom design coding in to the page so that page get the real design.

This line will fetch the your static Page to custom Pages in WordPress then go to

Pages -> Add New. After selecting a new page, On the life side you will see Page Attributes (Templates) Select your page. Now Go back to the Cpanel and open your .php page and add the following line after <head>. This will automatically featch Yoast SEO code to the Static HTML page when you type the Description in post Plugin area. then open your page and press CTRL+U to view the page source and see the discription

 

 

<meta name="description" content="<?php echo get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true); ?>" />

All done. You can also use some custom meta tags to improve more seo of you wordpress static page. by using the following Meta tags codes.

1. The Minimal Template

This slimmed back version runs lean and fast. It contains a bare minimum of data for optimized sharing across Twitter, Facebook, Google+ and Pinterest.

Title tags and meta descriptions are included even though they aren’t technically social media meta tags. This is because they can be used by Google+ and other social media platforms, and it is best practice to include them on every page you publish.

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<meta name="twitter:card" value="summary"><meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />

2: The Standard Template

The standard template represents a more robust implementation of social tags and is meant to work across all platforms. In addition to all of the features of the mimimal template above, the standard template includes the following:

  • The basic Twitter Summary card
  • Twitter thumbnail image
  • Facebook Page Insights
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />

Tips and best practices

Optimizing for images

The image you link to in your social data does not actually have to be on the page, but it should represent your content well. The image allows you to controll what people see when they share your content, so it’s important to use quality images.

Every social platform has different standards for sizing. Typically, it’s easier to keep it simple and choose one image size that will work for all services.

  • Twitter thumbnail: 120x120px
  • Twitter large image: 280x150px
  • Facebook: Standards vary, but an image at least 200x200px works best. Facebook recommends large images up to 1200x630px wide.

In short, larger images offer you the most flexibility. When in doubt, test each page using the appropriate tool below to see exactly how your images will appear in snippits.

The importance of Open Graph data

If you could choose only one type of meta data to include, your best bet is Open Graph. That’s because all the platforms can use it as a fallback, including Twitter to a large degree.

Hope that this trick helps you to do SEO of Custom WordPress HTML page.