Meta tags allow you to control how your website appears in search engines and when shared on social media.
This article will show you how to add the most commonly used meta tags to your website using Site Scripts.
No coding experience is required. Simply update the example tags with your own information and add them to your website.
Before You Begin
The examples in this article use a fictional pottery business called Luna Barro.
Before adding the meta tags to your website, replace all the information inside the quotation marks ("") with your own details.
For example:
<meta property="og:site_name" content="Luna Barro">should become:
<meta property="og:site_name" content="Your Business Name">
What are Search and Social Previews?
Search Preview
A Search Preview is how your website may appear in search engine results.
A good search preview can help more people click through to your website.
Rich Link Preview
Your Rich Link Preview is how your website may appear when shared on social media platforms such as Facebook, LinkedIn, and WhatsApp.
A good rich link preview can make your content more appealing and encourage visitors to click.
Step 1: Create Your Meta Tags
Copy the template below and replace the example information with your own website details.
<!-- Website Name -->
<meta property="og:site_name" content="Luna Barro">
<!-- Search Result Title -->
<meta name="title" content="Luna Barro | Handmade Pottery in Bristol">
<!-- Search Result Description -->
<meta name="description" content="Discover handmade ceramics, pottery workshops and creative classes at Luna Barro in Bristol.">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.lunabarro.co.uk">
<!-- Favicon -->
<link rel="icon" href="https://www.lunabarro.co.uk/favicon.ico">
<!-- Rich Link Title -->
<meta property="og:title" content="Luna Barro | Handmade Pottery in Bristol">
<!-- Rich Link Description -->
<meta property="og:description" content="Discover handmade ceramics, pottery workshops and creative classes at Luna Barro in Bristol.">
<!-- Rich Link Image -->
<meta property="og:image" content="https://www.lunabarro.co.uk/images/social-preview.jpg">
<!-- Website URL -->
<meta property="og:url" content="https://www.lunabarro.co.uk">
<!-- Content Type -->
<meta property="og:type" content="website">
What Should I Replace?
Replace every example value with information about your own website.
| Tag | Purpose |
|---|---|
| og:site_name | Displays your website name |
| title | The title that may appear in search engine results |
| description | The description that may appear in search engine results |
| canonical | Tells search engines the preferred URL for your page |
| icon | Defines your website's favicon |
| og:title | The title shown when your website is shared on social media |
| og:description | The description shown when your website is shared on social media |
| og:image | The image shown when your website is shared on social media |
| og:url | The URL associated with the shared content |
| og:type | Identifies the content as a website |
Step 2: Add the Meta Tags to Your Website
- Within your site builder, open the Pages panel.
- At the bottom of that panel, click Site Scripts.
- Locate the Head Scripts section.
- Paste your completed meta tag template into the field.
- Click Save.
Step 3: Publish Your Changes
After saving your Site Scripts:
- Click Publish.
- Wait for the publishing process to complete.
Your meta tags are now live on your website.
Why Can't I See My Changes Yet?
Search engines and social media platforms often store cached versions of website information.
Because of this, changes may not appear immediately after publishing.
Search Engines
Google will usually update your search preview automatically the next time it visits your website.
This can take a couple of weeks.
Please note that Google may choose to display different titles or descriptions than the ones you provide.
Social Media Platforms
Social media platforms may continue showing an older preview until their cache is refreshed.
For Facebook, Messenger and WhatsApp, you can refresh the preview using Facebook's Sharing Debugger:
https://developers.facebook.com/tools/debug/
- Enter your website address.
- Click Debug.
- Click Scrape Again.
For LinkedIn, you can refresh your preview using the LinkedIn Post Inspector:
https://www.linkedin.com/post-inspector/
- Enter your website address.
- Click Inspect.