New feature: Dynamic SEO and Open Graph settings

Announcements Updates
1

When you’re running a blog or other content-heavy website, managing SEO and Open Graph settings for every single page can be seriously time-consuming.

So we thought, wouldn’t it be cool if you could automate that?

So we did.

That’s why we’re stoked to announce all-new dynamic SEO and Open Graph settings for Collections in Webflow CMS.

1280×788 57.1 KB

To start defining your dynamic SEO, just open the Collection Template’s settings (by clicking the gear icon you see on hover), and scroll down to SEO Settings.

To pull in content from a Collection field, click Add Field and pick from the list of the options.

1280×782 47.6 KB

1278×1254 105 KB

If you ever need to update it, just click the existing dynamic field to open a dropdown of options. And if there’s anything you want to apply to all pages (like “Webflow Blog” above), just type it in as you want it to display.

In the Search Result Preview field, you’ll see how your choices will show up in search engine results pages (SERPs). You can also click the left and right arrow buttons to scroll through previews and make sure none of your posts break the mold.

1256×288 34.4 KB

Keep scrolling to set up your dynamic Open Graph settings, and don’t forget to tell Webflow where to grab your OG image!

(If you’re not familiar with Open Graph, it works a lot like meta titles and descriptions, but for social networks like Facebook, Twitter, LinkedIn, Pinterest, and Google+).

1278×676 42.4 KB

1274×832 321 KB

Dynamic SEO and Open Graph settings are live as of … now. Enjoy!

34 Likes
2

Your’e a genius @roope :smiley: this work is absolutely incredible :smiley:

1 Like
4

If you want it to show the category and name in the tab of the browser, you can set it as the title in the head section like this:

<title>{{category:name}} | {{name}}</title>

Content for <title> tag already comes from Meta Title field in SEO Settings so no need to add custom code to head section with custom code :wink:

1 Like
5

Your’e a genius @roope :smiley:

Thanks! This was a team effort though :wink:

2 Likes
6

This is badass!! Taking Webflow to the next level :slight_smile:

7

You all are incredible :smile: :grin::grin::grin: thank you so much for this!

8

@roope This is awesome, but I feel like I hit a time-warp…wasn’t this added a few weeks ago?

9

@jdesign Yeah, it’s been in Webflow for some time already so it was about time to announce it :smile:

2 Likes
10

Great feature, thanks for announcing guys as I had no idea it was in there!

11

Thank You Webflow !!!

12

TEAM WEBFLOW THE BEST!!!

:clap:

It remains to add shopping cart ! And I’ll be happy to 10000000 %

13

Finally.It is confirmed Liquid programming. Webflow would go a long way into changing the way dynamic content is created in the future. This absolutely takes away the need for core developers (php, jsp, etc). Developers needs will be probably be for intense application requirements which is better.

14

A post was split to a new topic: Ability for clients to change SEO & Open Graph Meta Info for Static Pages

15

Any plans on integrating Rich Text Elements into the Dynamic SEO Custom Fields? Or did I miss something? :innocent:

Would be helpful to add the blog content to the meta description field. I’m not a SEO guy so please tell me if this is bad practice.

1 Like
16

Hello, @Marci.

Not that I am a SEO specialist, but I know for sure, that recommended size of meta description is 150 characters. So I don’t think it would make sense to connect blog content to that.

Cheers,
Anna

2 Likes
17

To Sabanna’s point, your meta description can only be so long (around 150 characters) and there’s no need for the formatting options rich text fields allow for, so I’d recommend using a plain text field with a character count limit of 150 and letting authors write something custom for each post. We do this with the Subheading field on the Webflow Blog.

2 Likes
18

@roope @jmw How do specify the same open graph image for all blog posts? The blog posts created in my project don’t have an image I can pull from. It seems like that is the only option is to upload a placeholder image with each blog post (which I want to avoid).

Update: I did add "<meta content="image.jpg" property="og:image"> in the custom code header section on the blog posts template and that did it… my initial though was this should be something we can do via the designer.

19

Hey there! Glad to hear you found a fix. At the moment I’d just not select anything for the OG image, or just add <meta property="og:image" content="http://yourwebsite.com/images/default-og.jpg" /> to the code (replacing that URL with your image link, obviously). With the first method, FB and others will look for something to pull in for the image, so if there are images in the rich text field, one of those might show up when shared.

1 Like