The meta viewport is an element added to the HTML code that instructs the browser to control the display dimensions of a web page. This element allows the layout of the content to be responsive, i.e. it adapts to the screens of different user devices, mainly mobile devices, such as mobile phones and tablets for example.
It is important to have a meta viewport because today, the majority of user searches are done from a mobile device. When a web page doesn't adapt to these devices, it makes the user experience difficult which penalizes its referencing.
How to optimize your meta viewport
The meta viewport must be declared in the HTML code at the <head> level :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In order for the page content to fit on a mobile screen, it is necessary to define the meta viewport with the following 2 instructions, otherwise the browser will not perform the layout correctly :