Adding Keywords and Description Meta Tags to Enhance WordPress SEO

WordPress is so popular that one third of websites are built with it. However, by default it lacks keywords and description meta tags that are basic for SEO. Although some plugins such as Yoast SEO provide SEO functionality, they are heavy, and their free versions are limited.

It’s easy to implement such basic SEO functionality, by modifying two theme files, functions.php and header.php. As recommended by WordPress best practices, I made these changes in a child theme of twentyseventeen.

First, I add two customizable settings in the functions.php. The following code snippet enables users set the keywords and description for the front page.

<?php
    // Add more customization options
    function my_customize_register( $wp_customize ) {
        // SEO keywords
        $wp_customize->add_setting(
            'seo_keywords', array(
                'default'           => 'WordPress',
                'transport'         => 'postMessage',
                'sanitize_callback' => 'my_sanitize_seo_keywords',
            )
        );
        
        $wp_customize->add_control(
            'seo_keywords', array(
                'type'     => 'text',
                'label'    => __( 'SEO keywords', 'twentyseventeen' ),
                'description' => __('SEO keywords mainly for the frontpage, separated by comma', 'twentyseventeen'),
                'section'  => 'title_tagline',
                'priority' => 57,
            )
        );

        // SEO description
        $wp_customize->add_setting(
            'seo_description', array(
                'default'           => 'A beautiful WordPress website',
                'transport'         => 'postMessage',
                'sanitize_callback' => 'my_sanitize_seo_description',
            )
        );
        
        $wp_customize->add_control(
            'seo_description', array(
                'type'     => 'text',
                'label'    => __( 'SEO description', 'twentyseventeen' ),
                'description' => __('SEO description mainly for the frontpage', 'twentyseventeen'),
                'section'  => 'title_tagline',
                'priority' => 58,
            )
        );
    }
    add_action( 'customize_register', 'my_customize_register' );

    // Sanitize SEO keywords input
    function my_sanitize_seo_keywords( $input ) {
        return esc_attr($input);
    }

    // Sanitize SEO description input
    function my_sanitize_seo_description( $input ) {
        return esc_attr($input);
    }
    // End more customization options
?>

Then, I modified the header.php file, displaying the keywords and description meta tags on the browser. The following code snippet is put below the two original meta tags.

<!-- SEO begins -->
<?php
    if (is_front_page()) {
        $keywords = get_theme_mod("seo_keywords", "WordPress");
        $description = get_theme_mod("seo_description", "A beautiful website powered by WordPress");
    } else {
        if ($post->post_excerpt) {
            $description = $post->post_excerpt;
        } else {
            $description = "This is the inner page";;
        }

        if (function_exists('is_product') and is_product()) { // Addd product tags if this page is a woocommerce product page
            $product_tags = get_the_terms($product->ID, 'product_tag');
            foreach ($product_tags as $product_tag) {
                $keywords = $keywords . $product_tag->name . ', ';
            }
        } else { // Not a product page
            $tags = wp_get_post_tags($post->ID);
            foreach ($tags as $tag) {
                $keywords = $keywords . $tag->name . ', ';
            }
        }
        $keywords = $keywords . get_bloginfo('name');
    }
?>
<meta name="keywords" content="<?php echo $keywords; ?>">
<meta name="description" content="<?php echo $description; ?>">
<!-- SEO ends -->

This simple enhancement also works with WooCommerce.

The code is added to my twentyseventeen child theme which is hosted on Github.