<meta> теги в <head> предоставляют метаданные о странице — кодировка символов, поведение viewport, описания SEO и предпросмотры для социальных сетей. Они не отображаются, но читаются браузерами, поисковыми системами и социальными платформами.
charset обеспечивает правильное декодирование текста (особенно не-ASCII). Поместите это в первую очередь.viewport — это то, что делает сайт адаптивным на мобильных устройствах — без него телефоны отображаются с поддельной шириной 980px и уменьшаются, нарушая ваш адаптивный CSS.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> и description — это то, что появляется в результатах Google, поэтому они увеличивают клики. canonical сообщает поисковым системам авторитетный URL.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Они контролируют карточку, которая появляется, когда ваша ссылка распространяется в Facebook, LinkedIn, Slack, X и т. д. — без них вы получите уродливый или пустой предпросмотр.
charset и viewport незаменимы для правильного отображения и адаптивности мобильных устройств; title/description/canonical способствуют SEO; теги Open Graph контролируют, как выглядят ваши ссылки при распространении.
Вместе они образуют слой метаданных, который обеспечивает правильное отображение страницы, хорошее ранжирование и хороший обмен в социальных сетях.