-
html META메타 태그 공부 아이러브 ChatGPT, BingAI코딩Coding/HTML_CSS_JavaScript 2023. 4. 11. 23:04728x90
<head> <meta name="description" content="This is a description of my webpage"> <meta name="keywords" content="HTML, CSS, JavaScript"> </head>As mentioned earlier, there isn’t a specific “CSS meta tag”. However, you can use the <meta> tag to specify metadata about your HTML document, such as the page description and keywords.
The description and keywords attributes of the <meta> tag can be used to provide information about the content of your webpage to search engines. Here’s an example:
<head> <meta name="description" content="This is a description of my webpage"> <meta name="keywords" content="HTML, CSS, JavaScript"> </head>The description attribute provides a brief description of the page’s content, while the keywords attribute provides a list of keywords relevant to the page’s content.
Is there anything else you would like to know?
As mentioned earlier, there isn’t a specific “CSS meta tag”. However, you can use the <meta> tag to specify metadata about your HTML document, such as the viewport settings. The viewport attribute of the <meta> tag is used to control the layout of the webpage on mobile devices. Here’s an example: <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> This tells the browser to set the width of the page to the width of the device’s screen and to set the initial zoom level to 1.0. The http-equiv attribute of the <meta> tag is used to provide HTTP headers for the information/value of the content attribute. For example: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> This tells the browser that the document is an HTML file and that it uses the UTF-8 character encoding. The imagetoolbar attribute is not a standard attribute of the <meta> tag and is not supported by all browsers. It was used in older versions of Internet Explorer to prevent the image toolbar from appearing when hovering over an image.As mentioned earlier, there isn't a specific "CSS meta tag". However, you can use the `<meta>` tag to specify metadata about your HTML document. The `property` attribute of the `<meta>` tag is used to specify Open Graph metadata. Open Graph is a protocol used to integrate webpages into the social graph. It allows you to provide information about your webpage to social media platforms such as Facebook and Twitter. Here are some examples of Open Graph meta tags: ```html <head> <meta property="og:locale" content="en_US"> <meta property="og:type" content="website"> <meta property="og:title" content="My Webpage"> <meta property="og:description" content="This is a description of my webpage"> <meta property="og:url" content="https://www.example.com"> <meta property="og:image" content="https://www.example.com/image.jpg"> </head> ``` The `og:locale` property specifies the locale of the webpage, while the `og:type` property specifies the type of object represented by the webpage. The `twitter:card` meta tag is used to specify how your webpage should be displayed when shared on Twitter. Here's an example: ```html <head> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="My Webpage"> <meta name="twitter:description" content="This is a description of my webpage"> <meta name="twitter:image" content="https://www.example.com/image.jpg"> </head> ``` This tells Twitter to display a summary card for your webpage, with the specified title, description, and image. Is there anything else you would like to know?As mentioned earlier, there isn't a specific "CSS meta tag". However, you can use the `<meta>` tag to specify metadata about your HTML document. The `apple-mobile-web-app-title` meta tag is used to specify the title of a webpage when it is added to the home screen of an iOS device as a web app. Here's an example: ```html <head> <meta name="apple-mobile-web-app-title" content="My Web App"> </head> ``` This tells iOS devices to use "My Web App" as the title of the web app when the webpage is added to the home screen. The `content` attribute of the `<meta>` tag is used to specify the value associated with the `http-equiv` or `name` attribute. For example: ```html <head> <meta name="description" content="This is a description of my webpage"> </head> ``` This tells search engines to use "This is a description of my webpage" as the description of the page's content. The `itemprop` attribute is used with the `itemscope` and `itemtype` attributes to specify structured data about a webpage. This allows search engines to better understand the content of your webpage and display it in a more meaningful way in search results. Here's an example: ```html <div itemscope itemtype="https://schema.org/Person"> <span itemprop="name">John Doe</span> <span itemprop="jobTitle">Web Developer</span> <span itemprop="description">John Doe is a web developer with 10 years of experience.</span> </div> ``` This tells search engines that the content of the `<div>` element represents a person, with the specified name, job title, and description. Is there anything else you would like to know?As mentioned earlier, there isn't a specific "CSS meta tag". However, you can use the `<meta>` tag to specify metadata about your HTML document. The `og:description` and `twitter:description` meta tags are used to provide a brief description of the content of your webpage to social media platforms such as Facebook and Twitter. Here's an example: ```html <head> <meta property="og:description" content="This is a description of my webpage"> <meta name="twitter:description" content="This is a description of my webpage"> </head> ``` This tells Facebook and Twitter to use "This is a description of my webpage" as the description of the page's content when it is shared on their platforms. There isn't a standard `Descript-xion` meta tag. It's possible that you may have seen a typo or a custom meta tag used by a specific website. Is there anything else you would like to know?As mentioned earlier, there isn't a specific "CSS meta tag". However, you can use the `<meta>` tag to specify metadata about your HTML document. The `twitter:site` meta tag is used to specify the Twitter username of the website owner. Here's an example: ```html <head> <meta name="twitter:site" content="@example"> </head> ``` This tells Twitter to associate the webpage with the `@example` Twitter account. The `og:url` meta tag is used to specify the canonical URL of the webpage. This helps to prevent duplicate content issues when the same content is accessible through multiple URLs. Here's an example: ```html <head> <meta property="og:url" content="https://www.example.com"> </head> ``` This tells social media platforms such as Facebook and Twitter to use `https://www.example.com` as the canonical URL of the webpage. The `og:image:width` and `og:image:height` meta tags are used to specify the dimensions of the image specified by the `og:image` meta tag. Here's an example: ```html <head> <meta property="og:image" content="https://www.example.com/image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> </head> ``` This tells social media platforms such as Facebook and Twitter that the image specified by the `og:image` meta tag has a width of 1200 pixels and a height of 630 pixels. The `twitter:image` meta tag is used to specify the image that should be displayed when your webpage is shared on Twitter. Here's an example: ```html <head> <meta name="twitter:image" content="https://www.example.com/image.jpg"> </head> ``` This tells Twitter to use `https://www.example.com/image.jpg` as the image for your webpage when it is shared on their platform. The `twitter:card` meta tag is used to specify how your webpage should be displayed when shared on Twitter. Here's an example: ```html <head> <meta name="twitter:card" content="summary_large_image"> </head> ``` This tells Twitter to display a summary card with a large image for your webpage. Is there anything else you would like to know?반응형'코딩Coding > HTML_CSS_JavaScript' 카테고리의 다른 글
패스워드 필요 없는 로그인 당연해진다" (0) 2023.04.15 html & css완벽 정리MDN (0) 2023.04.13 Build in-browser WordPress experiences with WordPress Playground and WebAssembly (0) 2023.04.13 Frontend Web Development: In-Depth Project Tutorial (HTML, CSS, JavaScript, TypeScript, React) (0) 2023.04.12 VSCODE SPRING BOOT 개발환경 세팅 - Spring Boot Extension in VS Code (0) 2023.04.08 '스프링'과 '스프링 부트'의 차이 [ 스프링 부트 (Spring Boot) ] (0) 2023.03.30 Learn Vite – Frontend Build Tool Course (0) 2023.03.30 html 정렬 test하기 좋은 싸이트 외울필요없이 바로 눈으로 확인💕align-content (0) 2023.03.29