While Smart Wishlist focuses on the functionality of saving products, it has no control over the <head> section of the default wishlist page (/a/wishlist). However, you can still optimize meta tags like <title>,<meta> and Open Graph tags for better SEO and social sharing.
1. Adding Meta Tags to the <head>
To include meta tags specifically for the wishlist page, you’ll need to edit your theme’s layout/theme.liquid file (or any file where meta tags for the entire store are defined). Use conditional Liquid statements to target the wishlist page:
{% unless template %}
<meta name="description" content="Meta description for wishlist page" />
{% endunless %}
<!-- Alternative version of the above code -->
{% if template %}
<meta name="description" content="Meta description for other pages of the store" />
{% else %}
<meta name="description" content="Meta description for wishlist page" />
{% endif %}This code snippet demonstrates how to add a meta description. You can adapt this structure to include any type of meta tag, including Open Graph tags (og:title, og:image, og:url, og:description) and Twitter cards.
Updating the <title> of Your Smart Wishlist Page
Here is how you can customize the <title> tag of the default wishlist page for better SEO and user experience:
1. Using Conditional Statements in Your Theme:
The most reliable way to change the <title> is by editing your theme’s header.liquid file (or equivalent). Since Smart Wishlist doesn’t provide a specific template variable to identify the wishlist page, you can use a conditional statement to check the current page’s template:
HTML
{% if template %}
<title>Title for other pages of the store</title>
{% else %}
<title>Title for Wishlist page of the store</title>
{% endif %}
This code checks if a specific template is assigned to the page. If not (meaning it’s likely the default wishlist page), it applies the wishlist title.
2. Dynamically Modifying the Title with Javascript:
For a non-SEO approach, you can use Javascript to change the title dynamically. This is useful for simple title changes that don’t need to be indexed by search engines. Here’s a sample code snippet:
JavaScript
<script>
if (window.location.href.includes('/wishlist')) { // Adjust the URL part if needed
document.title = 'My Awesome Wishlist';
}
</script>
This script checks if the current URL contains “/wishlist” and updates the title accordingly
By implementing these techniques, you can effectively update the <title> of your Smart Wishlist page, improving both SEO and user experience.
Managing Open Graph Tags
The app offers some control over Open Graph tags, specifically og:image and og:title in the Settings. You can visit Apps > Smart Wishlist > Wishlist Page for accessing these.
- og:image: For shared wishlist URLs, the app automatically uses the featured image of the last product in the wishlist. You can set a default image in the app’s settings for empty wishlists or products without images.
- og:title: The app settings also include an option to specify the og:title tag, providing control over how the wishlist is presented when shared on social media.