SEO meta tags: a complete guide to optimizing titles and descriptions

Meta tags are a fundamental element of SEO optimization that directly affects how search engines interpret and display your pages in search results. Although meta tags are not a direct ranking factor, they are critical for attracting clicks and improving the user experience. In this article, we’ll take an in-depth look at meta tags and cover every aspect of configuring and optimizing them correctly.

What are meta tags and why are they needed?

Meta tags are HTML elements that provide search engines and browsers with information about a web page’s content. These tags are placed in the <head> section of an HTML document and are not displayed on the page itself, but they play a key role in how the page appears in search results.

The primary purpose of meta tags is to provide search engines with structured information about a page’s content, helping them better understand the context and relevance of the content to user queries. In addition, meta tags affect how a link to the page appears in search results, which can significantly affect its click-through rate.

The history of meta tags

Meta tags appeared in the early 1990s alongside the development of HTML. Initially, they were used to provide basic information about a document, such as its author, description, and keywords. As search engines developed, meta tags evolved and became more specialized.

In the 2000s, social networks emerged, leading to the creation of new types of meta tags, such as Open Graph for Facebook and Twitter Cards for Twitter. These tags let you control how content appears when shared on social networks.

Main types of meta tags

Title tag

The title tag is one of the most important meta tags for SEO. It defines the page title shown in search results, browser tabs, and bookmarks.

CodeHTML

<title>Купить iPhone 15 в Москве - Официальный магазин Apple | Example Store</title>

Best practices for the title tag:

Length: 50-60 characters (Google displays approximately 60 characters)
Uniqueness: each title should be unique
Relevance: it should accurately reflect the page content
Keywords: include the main keywords near the beginning
Appeal: it should encourage users to click

Meta description

The meta description provides a brief description of the page content, which appears in search results below the title.

CodeHTML

<meta name="description" content="Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка, гарантия производителя, рассрочка 0%. Цены от 89 990 ₽.">

Best practices for the meta description:

Length: 150-160 characters
Informative content: it should contain useful information
Call to action: it may include a CTA
Keywords: include keywords naturally
Uniqueness: each description should be unique

Meta keywords

Meta keywords were once an important SEO factor, but today most search engines ignore this tag.

CodeHTML

<meta name="keywords" content="iPhone 15, Apple, смартфон, купить iPhone, Москва">

Modern use: Although Google does not officially use meta keywords, some other search engines may take them into account. Including them for completeness is recommended, but don’t spend a lot of time optimizing them.

Specialized meta tags

Open Graph tags

Open Graph tags were created by Facebook to control how content appears when shared on social networks.

CodeHTML

<meta property="og:title" content="Купить iPhone 15 в Москве - Официальный магазин Apple">
<meta property="og:description" content="Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка, гарантия производителя.">
<meta property="og:image" content="https://example.com/images/iphone-15.jpg">
<meta property="og:url" content="https://example.com/iphone-15">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Example Store">
<meta property="og:locale" content="ru_RU">

Main Open Graph tags:

og:title — title for social networks
og:description — description for social networks
og:image — preview image
og:url — canonical page URL
og:type — content type (article, product, website, etc.)
og:site_name — site name
og:locale — page locale

Twitter Cards

Twitter Cards let you control how content appears when shared on Twitter.

CodeHTML

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplestore">
<meta name="twitter:creator" content="@examplestore">
<meta name="twitter:title" content="Купить iPhone 15 в Москве">
<meta name="twitter:description" content="Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка.">
<meta name="twitter:image" content="https://example.com/images/iphone-15-twitter.jpg">
<meta name="twitter:image:alt" content="iPhone 15 на белом фоне">

Types of Twitter Cards:

summary — standard card with an image
summary_large_image — large image card
app — card for mobile apps
player — video card

Structured data (Schema.org)

Structured data helps search engines better understand page content.

CodeHTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15",
  "description": "Новый iPhone 15 с улучшенной камерой и процессором A17 Pro",
  "brand": {
    "@type": "Brand",
    "name": "Apple"
  },
  "offers": {
    "@type": "Offer",
    "price": "89990",
    "priceCurrency": "RUB",
    "availability": "https://schema.org/InStock"
  },
  "image": "https://example.com/images/iphone-15.jpg"
}
</script>

Technical meta tags

Viewport

The viewport tag is critical for responsive design and mobile optimization.

CodeHTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport parameters:

width=device-width — width equal to the device width
initial-scale=1.0 — initial scale
user-scalable=no — disable zooming (not recommended)
maximum-scale=1.0 — maximum scale

Charset

The charset tag defines the page’s character encoding.

CodeHTML

<meta charset="UTF-8">

Robots

The robots tag lets you control whether search engine crawlers index a page.

CodeHTML

<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="index, nofollow">

Robots values:

index / noindex — allow/disallow indexing
follow / nofollow — allow/disallow following links
noarchive — prevent caching
nosnippet — prevent displaying the snippet

Canonical

The canonical tag tells search engines which version of a page is preferred.

CodeHTML

<link rel="canonical" href="https://example.com/iphone-15">

Hreflang

The hreflang tag is used for multilingual websites.

CodeHTML

<link rel="alternate" hreflang="ru" href="https://example.com/ru/iphone-15">
<link rel="alternate" hreflang="en" href="https://example.com/en/iphone-15">
<link rel="alternate" hreflang="x-default" href="https://example.com/iphone-15">

Optimizing meta tags for different page types

Homepage

The homepage requires a special approach to meta tags because it represents the entire site.

CodeHTML

<title>Example Store - Официальный магазин Apple в Москве | iPhone, iPad, MacBook</title>
<meta name="description" content="Официальный магазин Apple в Москве. Купите iPhone, iPad, MacBook с гарантией производителя. Бесплатная доставка по Москве, рассрочка 0%.">
<meta property="og:title" content="Example Store - Официальный магазин Apple в Москве">
<meta property="og:description" content="Официальный магазин Apple в Москве. iPhone, iPad, MacBook с гарантией.">
<meta property="og:type" content="website">

Category pages

Category pages should be optimized for relevant keywords.

CodeHTML

<title>Смартфоны iPhone - Купить в Москве | Example Store</title>
<meta name="description" content="Купите iPhone в официальном магазине Apple в Москве. iPhone 15, iPhone 14, iPhone 13. Бесплатная доставка, гарантия производителя.">
<meta property="og:title" content="Смартфоны iPhone - Купить в Москве">
<meta property="og:type" content="website">

Product pages

Product pages require detailed information about the product.

CodeHTML

<title>iPhone 15 128GB - Купить в Москве за 89 990 ₽ | Example Store</title>
<meta name="description" content="Купите iPhone 15 128GB в официальном магазине Apple в Москве за 89 990 ₽. Бесплатная доставка, гарантия 1 год, рассрочка 0%.">
<meta property="og:title" content="iPhone 15 128GB - Купить за 89 990 ₽">
<meta property="og:type" content="product">
<meta property="product:price:amount" content="89990">
<meta property="product:price:currency" content="RUB">

Blog articles

Blog articles require a special approach to meta tags.

CodeHTML

<title>Обзор iPhone 15: новые возможности и улучшения | Example Store</title>
<meta name="description" content="Подробный обзор iPhone 15: новые возможности, улучшения камеры, производительность. Читайте на Example Store.">
<meta property="og:title" content="Обзор iPhone 15: новые возможности и улучшения">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2025-07-18T10:00:00+00:00">
<meta property="article:author" content="Example Store">

Automating meta tag creation

Generation in PHP

For dynamic websites, it is important to automate the creation of meta tags.

CodePHP

<?php
class MetaTagGenerator {
    private $title;
    private $description;
    private $keywords;
    private $image;
    private $url;
    private $type;
    
    public function __construct($title, $description, $keywords = '', $image = '', $url = '', $type = 'website') {
        $this->title = $title;
        $this->description = $description;
        $this->keywords = $keywords;
        $this->image = $image;
        $this->url = $url;
        $this->type = $type;
    }
    
    public function generateTitle() {
        return '<title>' . htmlspecialchars($this->title) . '</title>';
    }
    
    public function generateDescription() {
        return '<meta name="description" content="' . htmlspecialchars($this->description) . '">';
    }
    
    public function generateKeywords() {
        if (empty($this->keywords)) return '';
        return '<meta name="keywords" content="' . htmlspecialchars($this->keywords) . '">';
    }
    
    public function generateOpenGraph() {
        $og = [];
        $og[] = '<meta property="og:title" content="' . htmlspecialchars($this->title) . '">';
        $og[] = '<meta property="og:description" content="' . htmlspecialchars($this->description) . '">';
        $og[] = '<meta property="og:type" content="' . htmlspecialchars($this->type) . '">';
        
        if (!empty($this->url)) {
            $og[] = '<meta property="og:url" content="' . htmlspecialchars($this->url) . '">';
        }
        
        if (!empty($this->image)) {
            $og[] = '<meta property="og:image" content="' . htmlspecialchars($this->image) . '">';
        }
        
        return implode("\n    ", $og);
    }
    
    public function generateTwitterCards() {
        $twitter = [];
        $twitter[] = '<meta name="twitter:card" content="summary_large_image">';
        $twitter[] = '<meta name="twitter:title" content="' . htmlspecialchars($this->title) . '">';
        $twitter[] = '<meta name="twitter:description" content="' . htmlspecialchars($this->description) . '">';
        
        if (!empty($this->image)) {
            $twitter[] = '<meta name="twitter:image" content="' . htmlspecialchars($this->image) . '">';
        }
        
        return implode("\n    ", $twitter);
    }
    
    public function generateAll() {
        return $this->generateTitle() . "\n    " .
               $this->generateDescription() . "\n    " .
               $this->generateKeywords() . "\n    " .
               $this->generateOpenGraph() . "\n    " .
               $this->generateTwitterCards();
    }
}

// Пример использования
$meta = new MetaTagGenerator(
    'iPhone 15 - Купить в Москве за 89 990 ₽',
    'Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка, гарантия производителя.',
    'iPhone 15, Apple, смартфон, купить iPhone, Москва',
    'https://example.com/images/iphone-15.jpg',
    'https://example.com/iphone-15',
    'product'
);

echo $meta->generateAll();
?>

Generation in JavaScript

For single-page applications, JavaScript can be used to create meta tags dynamically.

CodeJavaScript

class MetaTagManager {
    constructor() {
        this.baseUrl = 'https://example.com';
        this.siteName = 'Example Store';
    }
    
    updateTitle(title) {
        document.title = title;
        this.updateMetaTag('property', 'og:title', title);
        this.updateMetaTag('name', 'twitter:title', title);
    }
    
    updateDescription(description) {
        this.updateMetaTag('name', 'description', description);
        this.updateMetaTag('property', 'og:description', description);
        this.updateMetaTag('name', 'twitter:description', description);
    }
    
    updateImage(imageUrl) {
        this.updateMetaTag('property', 'og:image', imageUrl);
        this.updateMetaTag('name', 'twitter:image', imageUrl);
    }
    
    updateUrl(url) {
        const fullUrl = this.baseUrl + url;
        this.updateMetaTag('property', 'og:url', fullUrl);
        this.updateMetaTag('rel', 'canonical', fullUrl);
    }
    
    updateMetaTag(attribute, value, content) {
        let meta = document.querySelector(`meta[${attribute}="${value}"]`);
        
        if (!meta) {
            meta = document.createElement('meta');
            meta.setAttribute(attribute, value);
            document.head.appendChild(meta);
        }
        
        meta.setAttribute('content', content);
    }
    
    updateAll(pageData) {
        this.updateTitle(pageData.title);
        this.updateDescription(pageData.description);
        if (pageData.image) this.updateImage(pageData.image);
        if (pageData.url) this.updateUrl(pageData.url);
    }
}

// Пример использования
const metaManager = new MetaTagManager();

metaManager.updateAll({
    title: 'iPhone 15 - Купить в Москве',
    description: 'Купите iPhone 15 в официальном магазине Apple в Москве',
    image: '/images/iphone-15.jpg',
    url: '/iphone-15'
});

Testing and validating meta tags

Testing tools

There are many tools for testing meta tags:

Google Search Console — check how pages appear in search
Facebook Sharing Debugger — test Open Graph
Twitter Card Validator — test Twitter Cards
LinkedIn Post Inspector — test for LinkedIn
Schema.org Validator — check structured data

Performance monitoring

It is important to track the performance of meta tags.

CodeJavaScript

// Скрипт для мониторинга кликабельности
function trackMetaTagPerformance() {
    const title = document.title;
    const description = document.querySelector('meta[name="description"]')?.content;
    
    // Отправляем данные в аналитику
    gtag('event', 'meta_tag_view', {
        'title': title,
        'description_length': description?.length || 0,
        'page_url': window.location.href
    });
}

// Отслеживаем клики по ссылкам в результатах поиска
function trackSearchClicks() {
    // Если пользователь пришел из поиска
    if (document.referrer.includes('google.com/search')) {
        gtag('event', 'search_click', {
            'search_term': getSearchTermFromReferrer(),
            'position': getPositionFromReferrer()
        });
    }
}

Conclusion

Meta tags remain a critical element of SEO optimization, even though they are not a direct ranking factor. Properly configuring meta tags can significantly improve click-through rates in search results and how content appears on social networks.

It is important to remember that meta tags should be unique, informative, and appealing. Regularly testing and updating meta tags to reflect changes in content will help maintain a site’s optimal visibility in search results.

Using automation to create meta tags can save time and ensure consistency, especially for large websites with many pages.

🔗 Check your site’s meta tags: rechecker.ru/services/meta-tags

What are meta tags and why are they needed?

The history of meta tags

Main types of meta tags

Title tag

The title tag is one of the most important meta tags for SEO. It defines the page title shown in search results, browser tabs, and bookmarks.

CodeHTML

<title>Купить iPhone 15 в Москве - Официальный магазин Apple | Example Store</title>

Best practices for the title tag:

Length: 50-60 characters (Google displays approximately 60 characters)
Uniqueness: each title should be unique
Relevance: it should accurately reflect the page content
Keywords: include the main keywords near the beginning
Appeal: it should encourage users to click

Meta description

The meta description provides a brief description of the page content, which appears in search results below the title.

CodeHTML

<meta name="description" content="Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка, гарантия производителя, рассрочка 0%. Цены от 89 990 ₽.">

Best practices for the meta description:

Length: 150-160 characters
Informative content: it should contain useful information
Call to action: it may include a CTA
Keywords: include keywords naturally
Uniqueness: each description should be unique

Meta keywords

Meta keywords were once an important SEO factor, but today most search engines ignore this tag.

CodeHTML

<meta name="keywords" content="iPhone 15, Apple, смартфон, купить iPhone, Москва">

Specialized meta tags

Open Graph tags

Open Graph tags were created by Facebook to control how content appears when shared on social networks.

CodeHTML

<meta property="og:title" content="Купить iPhone 15 в Москве - Официальный магазин Apple">
<meta property="og:description" content="Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка, гарантия производителя.">
<meta property="og:image" content="https://example.com/images/iphone-15.jpg">
<meta property="og:url" content="https://example.com/iphone-15">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Example Store">
<meta property="og:locale" content="ru_RU">

Main Open Graph tags:

og:title — title for social networks
og:description — description for social networks
og:image — preview image
og:url — canonical page URL
og:type — content type (article, product, website, etc.)
og:site_name — site name
og:locale — page locale

Twitter Cards

Twitter Cards let you control how content appears when shared on Twitter.

CodeHTML

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplestore">
<meta name="twitter:creator" content="@examplestore">
<meta name="twitter:title" content="Купить iPhone 15 в Москве">
<meta name="twitter:description" content="Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка.">
<meta name="twitter:image" content="https://example.com/images/iphone-15-twitter.jpg">
<meta name="twitter:image:alt" content="iPhone 15 на белом фоне">

Types of Twitter Cards:

summary — standard card with an image
summary_large_image — large image card
app — card for mobile apps
player — video card

Structured data (Schema.org)

Structured data helps search engines better understand page content.

CodeHTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15",
  "description": "Новый iPhone 15 с улучшенной камерой и процессором A17 Pro",
  "brand": {
    "@type": "Brand",
    "name": "Apple"
  },
  "offers": {
    "@type": "Offer",
    "price": "89990",
    "priceCurrency": "RUB",
    "availability": "https://schema.org/InStock"
  },
  "image": "https://example.com/images/iphone-15.jpg"
}
</script>

Technical meta tags

Viewport

The viewport tag is critical for responsive design and mobile optimization.

CodeHTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport parameters:

width=device-width — width equal to the device width
initial-scale=1.0 — initial scale
user-scalable=no — disable zooming (not recommended)
maximum-scale=1.0 — maximum scale

Charset

The charset tag defines the page’s character encoding.

CodeHTML

<meta charset="UTF-8">

Robots

The robots tag lets you control whether search engine crawlers index a page.

CodeHTML

<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="index, nofollow">

Robots values:

index / noindex — allow/disallow indexing
follow / nofollow — allow/disallow following links
noarchive — prevent caching
nosnippet — prevent displaying the snippet

Canonical

The canonical tag tells search engines which version of a page is preferred.

CodeHTML

<link rel="canonical" href="https://example.com/iphone-15">

Hreflang

The hreflang tag is used for multilingual websites.

CodeHTML

<link rel="alternate" hreflang="ru" href="https://example.com/ru/iphone-15">
<link rel="alternate" hreflang="en" href="https://example.com/en/iphone-15">
<link rel="alternate" hreflang="x-default" href="https://example.com/iphone-15">

Optimizing meta tags for different page types

Homepage

The homepage requires a special approach to meta tags because it represents the entire site.

CodeHTML

<title>Example Store - Официальный магазин Apple в Москве | iPhone, iPad, MacBook</title>
<meta name="description" content="Официальный магазин Apple в Москве. Купите iPhone, iPad, MacBook с гарантией производителя. Бесплатная доставка по Москве, рассрочка 0%.">
<meta property="og:title" content="Example Store - Официальный магазин Apple в Москве">
<meta property="og:description" content="Официальный магазин Apple в Москве. iPhone, iPad, MacBook с гарантией.">
<meta property="og:type" content="website">

Category pages

Category pages should be optimized for relevant keywords.

CodeHTML

<title>Смартфоны iPhone - Купить в Москве | Example Store</title>
<meta name="description" content="Купите iPhone в официальном магазине Apple в Москве. iPhone 15, iPhone 14, iPhone 13. Бесплатная доставка, гарантия производителя.">
<meta property="og:title" content="Смартфоны iPhone - Купить в Москве">
<meta property="og:type" content="website">

Product pages

Product pages require detailed information about the product.

CodeHTML

<title>iPhone 15 128GB - Купить в Москве за 89 990 ₽ | Example Store</title>
<meta name="description" content="Купите iPhone 15 128GB в официальном магазине Apple в Москве за 89 990 ₽. Бесплатная доставка, гарантия 1 год, рассрочка 0%.">
<meta property="og:title" content="iPhone 15 128GB - Купить за 89 990 ₽">
<meta property="og:type" content="product">
<meta property="product:price:amount" content="89990">
<meta property="product:price:currency" content="RUB">

Blog articles

Blog articles require a special approach to meta tags.

CodeHTML

<title>Обзор iPhone 15: новые возможности и улучшения | Example Store</title>
<meta name="description" content="Подробный обзор iPhone 15: новые возможности, улучшения камеры, производительность. Читайте на Example Store.">
<meta property="og:title" content="Обзор iPhone 15: новые возможности и улучшения">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2025-07-18T10:00:00+00:00">
<meta property="article:author" content="Example Store">

Automating meta tag creation

Generation in PHP

For dynamic websites, it is important to automate the creation of meta tags.

CodePHP

<?php
class MetaTagGenerator {
    private $title;
    private $description;
    private $keywords;
    private $image;
    private $url;
    private $type;
    
    public function __construct($title, $description, $keywords = '', $image = '', $url = '', $type = 'website') {
        $this->title = $title;
        $this->description = $description;
        $this->keywords = $keywords;
        $this->image = $image;
        $this->url = $url;
        $this->type = $type;
    }
    
    public function generateTitle() {
        return '<title>' . htmlspecialchars($this->title) . '</title>';
    }
    
    public function generateDescription() {
        return '<meta name="description" content="' . htmlspecialchars($this->description) . '">';
    }
    
    public function generateKeywords() {
        if (empty($this->keywords)) return '';
        return '<meta name="keywords" content="' . htmlspecialchars($this->keywords) . '">';
    }
    
    public function generateOpenGraph() {
        $og = [];
        $og[] = '<meta property="og:title" content="' . htmlspecialchars($this->title) . '">';
        $og[] = '<meta property="og:description" content="' . htmlspecialchars($this->description) . '">';
        $og[] = '<meta property="og:type" content="' . htmlspecialchars($this->type) . '">';
        
        if (!empty($this->url)) {
            $og[] = '<meta property="og:url" content="' . htmlspecialchars($this->url) . '">';
        }
        
        if (!empty($this->image)) {
            $og[] = '<meta property="og:image" content="' . htmlspecialchars($this->image) . '">';
        }
        
        return implode("\n    ", $og);
    }
    
    public function generateTwitterCards() {
        $twitter = [];
        $twitter[] = '<meta name="twitter:card" content="summary_large_image">';
        $twitter[] = '<meta name="twitter:title" content="' . htmlspecialchars($this->title) . '">';
        $twitter[] = '<meta name="twitter:description" content="' . htmlspecialchars($this->description) . '">';
        
        if (!empty($this->image)) {
            $twitter[] = '<meta name="twitter:image" content="' . htmlspecialchars($this->image) . '">';
        }
        
        return implode("\n    ", $twitter);
    }
    
    public function generateAll() {
        return $this->generateTitle() . "\n    " .
               $this->generateDescription() . "\n    " .
               $this->generateKeywords() . "\n    " .
               $this->generateOpenGraph() . "\n    " .
               $this->generateTwitterCards();
    }
}

// Пример использования
$meta = new MetaTagGenerator(
    'iPhone 15 - Купить в Москве за 89 990 ₽',
    'Купите iPhone 15 в официальном магазине Apple в Москве. Бесплатная доставка, гарантия производителя.',
    'iPhone 15, Apple, смартфон, купить iPhone, Москва',
    'https://example.com/images/iphone-15.jpg',
    'https://example.com/iphone-15',
    'product'
);

echo $meta->generateAll();
?>

Generation in JavaScript

For single-page applications, JavaScript can be used to create meta tags dynamically.

CodeJavaScript

class MetaTagManager {
    constructor() {
        this.baseUrl = 'https://example.com';
        this.siteName = 'Example Store';
    }
    
    updateTitle(title) {
        document.title = title;
        this.updateMetaTag('property', 'og:title', title);
        this.updateMetaTag('name', 'twitter:title', title);
    }
    
    updateDescription(description) {
        this.updateMetaTag('name', 'description', description);
        this.updateMetaTag('property', 'og:description', description);
        this.updateMetaTag('name', 'twitter:description', description);
    }
    
    updateImage(imageUrl) {
        this.updateMetaTag('property', 'og:image', imageUrl);
        this.updateMetaTag('name', 'twitter:image', imageUrl);
    }
    
    updateUrl(url) {
        const fullUrl = this.baseUrl + url;
        this.updateMetaTag('property', 'og:url', fullUrl);
        this.updateMetaTag('rel', 'canonical', fullUrl);
    }
    
    updateMetaTag(attribute, value, content) {
        let meta = document.querySelector(`meta[${attribute}="${value}"]`);
        
        if (!meta) {
            meta = document.createElement('meta');
            meta.setAttribute(attribute, value);
            document.head.appendChild(meta);
        }
        
        meta.setAttribute('content', content);
    }
    
    updateAll(pageData) {
        this.updateTitle(pageData.title);
        this.updateDescription(pageData.description);
        if (pageData.image) this.updateImage(pageData.image);
        if (pageData.url) this.updateUrl(pageData.url);
    }
}

// Пример использования
const metaManager = new MetaTagManager();

metaManager.updateAll({
    title: 'iPhone 15 - Купить в Москве',
    description: 'Купите iPhone 15 в официальном магазине Apple в Москве',
    image: '/images/iphone-15.jpg',
    url: '/iphone-15'
});

Testing and validating meta tags

Testing tools

There are many tools for testing meta tags:

Google Search Console — check how pages appear in search
Facebook Sharing Debugger — test Open Graph
Twitter Card Validator — test Twitter Cards
LinkedIn Post Inspector — test for LinkedIn
Schema.org Validator — check structured data

Performance monitoring

It is important to track the performance of meta tags.

CodeJavaScript

// Скрипт для мониторинга кликабельности
function trackMetaTagPerformance() {
    const title = document.title;
    const description = document.querySelector('meta[name="description"]')?.content;
    
    // Отправляем данные в аналитику
    gtag('event', 'meta_tag_view', {
        'title': title,
        'description_length': description?.length || 0,
        'page_url': window.location.href
    });
}

// Отслеживаем клики по ссылкам в результатах поиска
function trackSearchClicks() {
    // Если пользователь пришел из поиска
    if (document.referrer.includes('google.com/search')) {
        gtag('event', 'search_click', {
            'search_term': getSearchTermFromReferrer(),
            'position': getPositionFromReferrer()
        });
    }
}

Conclusion

Using automation to create meta tags can save time and ensure consistency, especially for large websites with many pages.

🔗 Check your site’s meta tags: rechecker.ru/services/meta-tags

What are meta tags and why are they needed?

The history of meta tags

Main types of meta tags

Title tag

Meta description

Meta keywords

Specialized meta tags

Open Graph tags

Twitter Cards

Structured data (Schema.org)

Technical meta tags

Viewport

Charset

Robots

Canonical

Hreflang

Optimizing meta tags for different page types

Homepage

Category pages

Product pages

Blog articles

Automating meta tag creation

Generation in PHP

Generation in JavaScript

Testing and validating meta tags

Testing tools

Performance monitoring

Conclusion

The page doesn’t appear in search results

How to troubleshoot technical audit errors

Terms by topic

Meta tags: what they are and why they matter

Canonical URL: what it is and why it's needed

Meta description: what it is and how to write one

SEO audit: what it is and how to conduct one

How to Find a Site Template SEO Error Affecting Many Pages

Canonical URL: what it is and why it matters for SEO

How to fix errors after an SEO audit: a step-by-step plan

Check your website

Feedback

What are meta tags and why are they needed?

The history of meta tags

Main types of meta tags

Title tag

Meta description

Meta keywords

Specialized meta tags

Open Graph tags

Twitter Cards

Structured data (Schema.org)

Technical meta tags

Viewport

Charset

Robots

Canonical

Hreflang

Optimizing meta tags for different page types

Homepage

Category pages

Product pages

Blog articles

Automating meta tag creation

Generation in PHP

Generation in JavaScript

Testing and validating meta tags

Testing tools

Performance monitoring

Conclusion

The page doesn’t appear in search results

How to troubleshoot technical audit errors

Terms by topic

Meta tags: what they are and why they matter

Canonical URL: what it is and why it's needed

Meta description: what it is and how to write one

SEO audit: what it is and how to conduct one

How to Find a Site Template SEO Error Affecting Many Pages

Canonical URL: what it is and why it matters for SEO

How to fix errors after an SEO audit: a step-by-step plan

Check your website