# Meta Tags Generator — Examples > Hands-on walkthroughs with the Meta Tags Generator: a base head for a new page, an article with Open Graph and Twitter Card, JSON-LD, security headers, and verification. Source: https://www.jpkc.com/db/en/tools/meta-tags/examples/ Back to the overview: [Meta Tags Generator](https://www.jpkc.com/db/en/tools/meta-tags/) · Open the tool: [www.jpkc.com/tools/meta-tags/](https://www.jpkc.com/tools/meta-tags/) The [manual](https://www.jpkc.com/db/en/tools/meta-tags/manual/) explains every section and field in detail. This page complements it with **concrete workflows**: typical tasks played out step by step, focused on which building blocks you enable and how you read the result. The interface is in English, so section and button names appear exactly as you'll see them in the live tool. ## Example 1: The base head for a new page The most common case — you need a clean set of mandatory head tags fast. 1. Open the [generator](https://www.jpkc.com/tools/meta-tags/). **Essential** is already active; leave the other sections off for now. 2. Keep **Charset** on `UTF-8` and **Viewport** on `Standard`. 3. Type a **Page Title**. Watch the char counter: if it stays green you're in the 50–60 character range; if it turns orange/red, Google will likely truncate your title later. 4. Write a **Meta Description** between 120 and 160 characters — the counter guides you. 5. Enter the **Canonical URL** (absolute, with `https://`). Handy: the tool carries it over into later JSON-LD and `og:url` fields automatically. 6. Leave **Robots Directives** at `index` + `follow`. The full Essential block is now on the right. 7. Click **Copy** and paste the HTML into your page's `` — or **Download** for the `meta-tags.html` file. That's the mandatory kit. Everything else builds on top of it. ## Example 2: An article page with Open Graph and Twitter Card A blog post should look good when shared on social media. 1. Enable the **Open Graph** section via its **Include in output** switch. 2. Set **Type** to `article`. Now the **Article fields** appear: Published Time, Modified Time, Author, Section, and Tags. 3. Fill in **Title**, **Description**, and above all **Image URL** — as an absolute URL. Enter **Width** `1200` and **Height** `630` (the size the tool recommends) and an **Image Alt** text. 4. Add **Site Name** and **Locale** (e.g. `en_US`). In the article fields, set published date, author, section, and comma-separated **Tags** — the tool turns each into its own `article:tag`. 5. Also enable **Twitter / X Card**, pick `summary_large_image`, and enter `@site` and `@creator` handles (the tool adds the `@`). You can keep title, description, and image shorter than for OG. 6. Switch to the **Preview** tab and check the **Open Graph Card** and **Twitter / X Card**. If there's no Twitter title, the preview shows the OG title as a fallback — but the markup then contains nothing for it, so set the fields you actually want output. This gives you a complete social preview that works on Facebook, LinkedIn, WhatsApp, and X. ## Example 3: Building structured data with JSON-LD You want to prepare for rich results without hand-typing Schema.org syntax. 1. Enable **Structured Data (JSON-LD)** and pick a **Schema Type**, e.g. `Article`. 2. The common fields `url`, `name`, and `description` are often already filled — the tool carried them over from Title, Description, and Canonical. Add the article fields **Author Name** and **Published**/**Modified**. 3. Look at the generated `